Object.defineProperty
方法是给传入对象添加属性或者修改已有属性的的值。
Object.defineProperty
方法可以接收3个参数,分别是:
(1)要定义属性的对象 (2)属性名 (3)要定义或修改的属性描述符。
下面的例子是在obj对象身上通过Object.defineProperty方法定义了一个age属性
var obj = {
name: '小小陈',
sex: 'female'
}
Object.defineProperty(obj, 'age', {
value: 18, //age所对应的值
enumerable: true, //控制属性是否可以枚举,默认为false
writable: true, //控制属性是否可以被修改,默认值为false
configurable: true, //控制属性是否可以被删除,默认值是false
})
console.log(obj);//打印出{ name: '小小陈', sex: 'female', age: 18 }
我们也可以通过Object.defineProperty
方法的get
和set
方法动态的给对象设置属性,例如:
let number = 18;
var obj = {
name: '小小陈',
sex: 'female'
}
Object.defineProperty(obj, 'age', {
get() {
console.log('有人读取age属性了');
return number
}
})
console.log(obj);
此时我们修改number的值,obj.age
的值也会跟着改变,但是当我们修改obj.age
的值时,number的值并没有发生变化,我们可以通过set方法来实现动态的给obj.age
设置任意值,代码如下所示:
let number = 18;
var obj = {
name: '小小陈',
sex: 'female'
}
Object.defineProperty(obj, 'age', {
// 当有人读取person的age属性时,get(getter)函数就会被调用,且返回的值就是age的值
get() {
console.log('有人读取age属性了');
return number
},
// 当有人修改person的age属性时,set(setter)函数就会被调用,且会收到修改的具体值
set(value){
number=value
}
})
console.log(obj);
现在就实现了当number改变时obj.age
也会跟着改变,当给obj.age
设置值时,number也会跟着改变的效果