对象的属性是由属性名 name, 值 key, 和其他特性 (可读写性 writable, 可枚举性 enumerable, 可配置性 configurable) 组成的. 从 ES5 开发, 提供了 getter 和 setter 可以将属性值的获取和设置分别绑定到方法上, 称之为 "存取器". 有了 getter 和 setter 我们就能够在属性值的变更和获取时实现一些操作.
简单的 getter , setter
直接在对象中创建属性的 getter 和 setter, 并进行测试.
注意语法规则, 是通过 get 和 set 关键字创建的 percent 属性的 getter 和 setter 函数. get 函数是没有参数的, set 函数会将等号右边的值作为参数. 当访问 percent 属性时, 会返回_num 加 %, 当设置 percent 时, 会打印日志并将值赋给_num.
使用 defineProperty
如何在已有的对象上添加 getter 和 setter 呢?
Object.defineProperty(obj, prop, descriptor) ,obj 为将要操作的对象, prop 是将要定义或者修改的属性名, descriptor 是将要被修改或者定义的描述符. 看实例
defineProperty()添加或者修改属性的时候需要注意:
1, 数据描述符 configurable 标志着该属性能够被改变, 能够被删除, 默认为 false
2, 数据描述符 enumerable 标志着该属性是否可枚举, 默认为 false. 只有可枚举属性才会在 for in 中遍历, Object.keys()中返回. 另外, 所有的内置方法都是不可枚举的, eg:toString
3, 数据描述符 value 默认为 undefined,writable 默认为 false. 所以 defineProperty 默认新增的属性, 是不可以被赋值运算符修改的.
4, 存取描述符 set 和 get 都默认为 undefined
5,set/get 是不能够和 value 或者 writable 一起用的, 因为当是存取器属性的时候, 当设置了 set 标志着可写, 设置了 get 就标志着可读, 而 value 也是通过 get 函数返回的, 所以不能同时使用.
Class 中的 getter setter
ES6 新增 class 的概念, 改变了构造对象的书写方式, class 中同样可以设置存取器.
TypeScript 中的 getter 和 setter
Angular 项目中使用的是 ts,ts 的 class 语法与 ES6 的稍有不同, 通过项目中的一个小栗子记录下 ts 中的 getter 和 setter. 场景如下, 有一个 datepicker 组件, 可以调整时间级别为 5 分钟或者天. 不同级别时, datepicker 组件需要作出不同的调整.
做如下处理: datepicker 组件中有 @input 来接受级别的调整, 在 set 中做一些操作
- export class LdatepickerComponent implements OnInit {
- public _level: Level = 'minite';
- @Input()
- get level (): Level {
- return this._level;
- }
- set level ( value: Level ) {
- // 修改级别后 重置组件的状态
- doSomething()
- // 发送新的时间为 0
- doOther()
- this._level = value;
- }
- }
当选择不同的级别时, 传入到 datepicker 组件的 level 会变化, 此时的 set 会对组件做一些自定义的操作, 实现需求.
来源: https://www.cnblogs.com/shapeY/p/9239627.html