天猫网站运营,鱼巴适设计师服务平台,做个企业网站要多少钱,阿里云网站建设的功能Object.defineProperty()是一个监听对象属性变化的方法。一般情况下我们是不会直接使用的#xff0c;或者说我们遇到的场景还没有这么高级。
最有名的例子就是Vue2的响应式实现#xff0c;就是通过这个方法来实现的。
用起来不难#xff0c;就是个API#xff0c;只是用的…Object.defineProperty()是一个监听对象属性变化的方法。一般情况下我们是不会直接使用的或者说我们遇到的场景还没有这么高级。
最有名的例子就是Vue2的响应式实现就是通过这个方法来实现的。
用起来不难就是个API只是用的比较少或者实现的功能都看起来很吊的样子所以显得很高级。其实也就那样。
定义
Object.defineProperty() 静态方法会直接在一个对象上定义一个新属性或修改其现有属性并返回此对象。
定义新属性
运行下面的代码可以观察输出。
const obj1{}
Object.defineProperty(obj1,property1,{value:1
})
console.log(obj1)//输出{}
console.log(obj1.property1)//输出1obj1.property1输出1这是符合我们的预期的。但obj1却输出{}我们期待的应该是{property1:1}。这就非常的奇怪了。明明obj1.property1可以输出property1的值但输出obj1对象的时候却是空对象。
这就是Object.defineProperty()高级的一个地方。实际上我们可以通过enumerable这个选项来控制属性是否对用户可见。
const obj1{}
Object.defineProperty(obj1,property1,{value:1,enumerable:true
})
console.log(obj1)//输出{property1:1}
console.log(obj1.property1)//输出1修改后obj1的输出值就是{property1:1}。实际上我们利用defineProperty控制了属性的可见性。一般都会让用户可见。
数据描述符和访问器描述符
数据描述符指的是value和writable属性。访问器描述符指的get和set函数。两者是互斥的。
数据描述符
value的值就是属性的值。是可以读写的通过writable来控制的。
const obj1{}
Object.defineProperty(obj1,property1,{value:1,writable:true,
})
obj1.property110
console.log(obj1.property1)//writable为false的时候输出1writable为true的时候输出10writable为false的时候obj1.property110并不会成功赋值。obj1.property1的值还是输出1并不会报错。writable为true的时候输出10赋值成功。
访问器描述符
访问描述符是另一套读写数据的方式。不能够在get和set方法里面调用value,因为数据描述符和访问器描述符是互斥的。
const obj1 {}
let property1Value 1//必须自己定义一个变量来设置属性值
Object.defineProperty(obj1, property1, {enumerable: true,get() {console.log(get:)return property1Value},set(newValue) {property1Value newValue}
})
property1Value 10
console.log(obj1)//输出{ property1: [Getter/Setter] }
console.log(obj1.property1)//输出10在enumerable: true的情况下obj1输出{ property1: [Getter/Setter] }就是长这样。enumerable: false的情况下,输出{}。
数据描述符和访问器描述符的主要区别
两者都是可以获取和修改属性值的。主要区别就是能不能监听到值的获取或者改变也就是被Vue等控件玩出花的所谓响应式。
1.不需要监听值的改变用数据描述符就行了自带value值没什么操作性。 2.需要监听值的改变就要用访问器描述符了。需要自己定义属性值的变量。读取的逻辑都需要自己实现更灵活也更加强大复杂。
