理解Object.defineProperty的作用

Posted 2020-10-15 莫欺

Object.defineProperty 是vue中双向绑定的基础。vue是通过数据劫持的方式来做数据绑定的，最核心的方法是通过 Object.defineProperty()方法来实现对属性的劫持，达到能监听到数据的变动。要实现数据的双向绑定，

当使用存取器描述属性的特性的时候，允许设置以下特性属性：

var obj = {};
Object.defineProperty(obj,"newKey",{
    get:function (){} | undefined,
    set:function (value){} | undefined
    configurable: true | false
    enumerable: true | false
});
value: 设置属性的值
writable: 值是否可以重写。true | false
enumerable: 目标属性是否可以被枚举。true | false
configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false

注意：当使用了getter或setter方法，不允许使用writable和value这两个属性

getter/setter

当设置或获取对象的某个属性的值的时候，可以提供getter/setter方法。

• getter 是一种获得属性值的方法

• setter是一种设置属性值的方法。

在特性中使用get/set属性来定义对应的方法。

 

示例

var obj = {};
var initValue = \'hello\';
Object.defineProperty(obj,"newKey",{
    get:function (){
        //当获取值的时候触发的函数
        return initValue;    
    },
    set:function (value){
        //当设置值的时候触发的函数,设置的新值通过参数value拿到
        initValue = value;
    }
});
//获取值
console.log( obj.newKey );  //hello

//设置值
obj.newKey = \'change value\';

console.log( obj.newKey ); //change value

View Code

https://segmentfault.com/a/1190000007434923

 

http://www.cnblogs.com/tugenhua0707/p/7589602.html