1. Object.defineProperty()
js
// 1. 语法:
Object.defineProperty(obj, prop, descriptor)
// 2. 参数
obj: 要定义属性的对象
prop: 要定义或修改的属性名
descriptor: 要定义或修改的属性描述符 是一个对象:{}
// 3. 作用:
// => 在一个对象上定义一个新属性,或者修改一个对象的现有属性.
// 4. 返回值:传入的obj
descriptor这个对象的6个属性 - MDN 文档。
configurable
,属性是否可以被修改或者删除,默认 false。enumerable
,属性是否可枚举,默认 false。(1. for in 遍历不出来 2. Object.keys() 枚举)writable
, 属性值是否可写(修改),默认为falsevalue
, 属性对应的值,默认为undefinedget
,属性的 getter 函数,当访问该属性时,会调用此函数。set
,属性的 setter 函数,当属性值被修改时(设置属性的值时),会调用此函数。
注意:==> writable / value 不能和 get / set 同时存在
=>规定: 数据描述符和存取描述符( get / set )不能混合使用
描述符默认值
- 拥有布尔值的键
configurable
、enumerable
和writable
的默认值都是false
。 - 属性值和函数的键
value
、get
和set
字段的默认值为undefined
。
js
// 在对象中添加一个设置了存取描述符属性的示例
// 存取属性 get / set
const obj = {}
let num = 99
// 给obj这个对象添加一个age属性,值为num
Object.defineProperty(obj, "age", {
configurable: true,
enumerable: true,
// 使用了方法名称缩写(ES2015 特性)
// 下面两个缩写等价于:
// get : function() { return value; },
// set : function(newValue) { value = newValue; },
get(){
console.log('触发了get方法')
return num
},
set(newVal) {
console.log('触发了set方法')
num = newVal;
},
})
// 注意
// 点开obj的age属性,才会看到age的值,同时触发get (相当于读取get)
console.log(obj)
// 1. 当读取age属性值的时候,触发getter函数
console.log(obj.age)
console.log('--------------')
// 2. 当设置age属性值的时候,触发setter函数 (set我们一般叫做setter函数)
obj.age = 88
通过给obj的age属性 设置getter和setter函数,我们可以监听obj的age属性的变化