在我们学习到Vue响应式原理的时候,必然要了解到JS里Object.defineProperty()方法,底层就是用这个方法来实现的。可以实现对象的简单代理。
Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
Object.defineProperty(object1, 'property1', {
value: 42,
writable: false
});
第一个参数object1:是要操作的对象
第二个参数'property1':表示的是object1里的属性
第二个参数:要定义或修改的属性描述符
描述符:
描述符有两种主要形式:数据描述符和存取描述符。数据描述符是一个具有值的属性,该值可以是可写的,也可以是不可写的。存取描述符是由 getter 函数和 setter 函数所描述的属性。一个描述符只能是这两者其中之一;不能同时是两者。
数据描述符:
默认情况下,使用 Object.defineProperty()
添加的属性值是不可修改的。
configurable:当且仅当该属性的 configurable
键值为 true
时,该属性的描述符才能够被改变,同时该属性也能从对应的对象上被删除
enumerable:当且仅当该属性的 enumerable
键值为 true
时,该属性才会出现在对象的枚举属性中
value:该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)
writable:当且仅当该属性的 writable
键值为 true
时,属性的值,也就是上面的 value
,才能被改变
存取描述符:
get:当访问该属性时,会调用此函数。执行时不传入任何参数,但是会传入 this
对象。该函数的返回值会被用作属性的值
set:当属性值被修改时,会调用此函数。该方法接受一个参数(也就是被赋予的新值),会传入赋值时的 this
对象
get,set的使用:
Object.defineProperty(o, "b", {
enumerable : true,
configurable : true
// 下面两个缩写等价于:
// get : function() { return bValue; },
// set : function(newValue) { bValue = newValue; },
get() { return bValue; },
set(newValue) { bValue = newValue; },
});