当前位置：首页 > article >正文

Object.defineProperty和响应式

article 2024/11/19 17:28:16

Object.defineProperty()是一个监听对象属性变化的方法。一般情况下我们是不会直接使用的，或者说我们遇到的场景还没有这么高级。

最有名的例子就是Vue2的响应式实现，就是通过这个方法来实现的。

用起来不难，就是个API，只是用的比较少或者实现的功能都看起来很吊的样子，所以显得很高级。其实也就那样。

定义

Object.defineProperty() 静态方法会直接在一个对象上定义一个新属性，或修改其现有属性，并返回此对象。

定义新属性

运行下面的代码可以观察输出。

const obj1={}
Object.defineProperty(obj1,"property1",{
    value:1
})
console.log(obj1)//输出{}
console.log(obj1.property1)//输出1

obj1.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.property1=10
console.log(obj1.property1)//writable为false的时候，输出1，writable为true的时候，输出10，

writable为false的时候，obj1.property1=10并不会成功赋值。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