详解Object.defineProperty方法

详解Object.defineProperty方法

Object.defineProperty()会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，然后并返回这个对象。

而在vue.js中是通过它来实现双向绑定的。俗称属性拦截器。

1、语法

Object.defineProperty(obj,prop,descriptor)

参数说明：
//obj：必需。目标对象
//prop:必需。需要定义或者修改的属性名称
//descirptor：必需。目标属性所有拥有的特性

（1）数据描述符

let obj = {}
Object.defineProperty(obj,"name",{
    enumerable:false,
    configurable:false,
    writable:false,
    value:"pul"
});

（2）存取描述符

let obj = {};
let newVal;
Object.defineProperty(obj,"name",{
    enumerable:false,
    configurable:false,
    get : function(){
        return newVal;
    },
    set : function(newValue){
        newVal = newValue;
    },
});

对比上面两个例子可以得出： 存取描述符有set和get函数，但是不存在 writable和value这2个属性

3、描述符参数实例说明

configurable

当该属性的configurable为true时，该属性描述符才能够被改变，同时就该属性也能从对应的对象上被删除。

默认为false

这个属性起到两个作用：

1.目标属性是否可以用delete删除。

2.目标属性是否可以再次设置特性。

//-----------------测试目标属性是否能被删除------------------------

//configurable为 false的情况，
let obj = {}
Object.defineProperty(obj, "name", {
  enumerable: false,
  configurable: false,
  writable: false,
  value: "张三"
});
//删除属性
delete obj.newKey;
console.log( obj.name); //张三
也就是说 configurable: false的情况，我们没有删除对象属性，
而configurable: true的情况，打出来的值应该是undefined

//-----------------测试是否可以再次修改特性------------------------
let obj = {}
Object.defineProperty(obj, "name", {
  enumerable: false,
  configurable: false,
  writable: false,
  value: "张三"
});
Object.defineProperty(obj, "name", {
  enumerable: true,
  configurable: true,
  writable: true,
  value: "李四李四"
});
console.log( obj.name); //报错，"TypeError: Cannot redefine property: name"
也就是说第一个configurable设置为false的情况下，下边的在从新设置对象属性‘name’的时候会报错。
4个属性里只要有一个值不一样就会报错。
当然了如果第一个configurable设置为true的情况，下边就可以打印出 `李四李四`。

//-----------------2次设置的对象name一样的情况下------------------------
let obj = {}
Object.defineProperty(obj, "name", {
  enumerable: false,
  configurable: false,
  writable: false,
  value: "张三"
});
Object.defineProperty(obj, "name", {
  enumerable: false,
  configurable: false,
  writable: false,
  value: "张三"
});
这个是不会报错的，因为2次设置的属性name的4个特性值都是一样的,也就等于我们没有修改描述符的值。