学习VUE总得知道Object.defineProxy怎么使用吧
工作归工作,不要觉得会用就完事了,很多时候得多看看基础。今天就专门讲一下Object.defineProxy是如何使用的,这样在以后讲到Vue2.X的源码时,就更容易理解了。
Object.defineProperty()方法可以直接在一个对象上定义一个新属性或者修改它的一个先有属性并返回此对象。
下面先举个例子示意下。
const obj = {};
const obj2 = Object.defineProperty(obj, 'property', {
value: 42,
writable: false
});
obj.property = 77;
console.log(obj); // {property: 42}
obj2.test = 3
obj2.property = 78;
console.log(obj) // {test: 3, property: 42}
obj.test = 5
console.log(obj2) //{test: 5, property: 42}
可以看出入参有三个,出参就是原对象(修改后的)
Object.defineProperty(obj, prop, descriptor)
入参中第一个参数,就是要修改的对象,第二个参数是要定义或修改的属性,第三个参数是对应的属性描述符号。前两个比较好理解,重点在于第三个参数。
属性描述符分为两类,一种是数据描述符一种是存取描述符。
数据描述符包含的属性有:configurable、enumerable、value、writable
存取描述符包含的属性有:configurable、enumerable、get、set
一个描述符不可能同时存在 value
或 writable
和 get
或 set
示例:
const obj = {};
const obj2 = Object.defineProperty(obj, 'property', {
writable: false,
get() {
return 1
}
});
console.log(obj2)
此时浏览器会报错:Invalid property descriptor. Cannot both specify accessors and a value or writable attribute
属性介绍:
-
configurable
当且仅当该属性的
configurable
键值为true
时,该属性的描述符才能够被改变,同时该属性也能从对应的对象上被删除。 默认为false
。 -
enumerable
当且仅当该属性的
enumerable
键值为true
时,该属性才会出现在对象的枚举属性中。 默认为false
。 -
value
该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。 默认为 undefined
-
writable
当且仅当该属性的
writable
键值为true
时,属性的值,也就是上面的value
,才能被赋值运算符
(en-US)改变。 **默认为false
。 -
get
相比直接使用value可以多一些运算在里面 默认值undefined -
set
相比直接赋值可以多一些函数进行处理 默认值undefined
几个简单示例:
const obj = {};
const obj2 = Object.defineProperty(obj, 'property', {
writable: false,
value: 22
});
delete obj2.property
console.log(obj2)
//你会发现无法删除该属性
const obj = {};
const obj2 = Object.defineProperty(obj, 'property', {
get() {
return property
},
set(val) {
property = val + 1
}/
});
obj2.property = 2
console.log(obj2.property)
// 显示3
这里值得注意的是set和get函数中的属性是如何设置或返回的。
简单用法就是这些,下一篇讲讲VUE是如何把它活用起来的。