Object.defineProperty和响应式

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

在enumerable: true的情况下，obj1输出{ property1: [Getter/Setter] }，就是长这样。enumerable: false的情况下,输出{}。

数据描述符和访问器描述符的主要区别

两者都是可以获取和修改属性值的。主要区别就是能不能监听到值的获取或者改变，也就是被Vue等控件玩出花的所谓响应式。

1.不需要监听值的改变用数据描述符就行了，自带value值，没什么操作性。
2.需要监听值的改变就要用访问器描述符了。需要自己定义属性值的变量。读取的逻辑都需要自己实现，更灵活也更加强大复杂。

原文地址：https://blog.csdn.net/ScottePerk/article/details/138303734

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！