整理下Object.defineProperty - 2018

• 2018-06-28 创建

参数

var a= {}
Object.defineProperty(a,"b",{
  value:123
})
console.log(a.b);//123

• 第一个参数：目标对象

• 第二个参数：需要定义的属性或方法的名字。

• 第三个参数：目标属性所拥有的特性。（descriptor）

第三个参数（descriptor）

可选属性（默认值）：

• value：属性的值(不用多说了)

• writable：如果为false，属性的值就不能被重写,只能为只读了（默认值：false）

• configurable：总开关，一旦为false，就不能再设置他的（value，writable，configurable）（默认值：false）

• enumerable：是否能在for...in循环中遍历出来或在Object.keys中枚举出来。（默认值：false)

• get：章节说明

• set：章节说明

for example:

var a= {}
Object.defineProperty(a,"b",{
  value:123,
  writable:false,
  enumerable:false,
  configurable:false
})
console.log(a.b);//123

set 和 get

在 descriptor 中不能同时设置访问器（get 和 set）和 wriable 或 value，否则会错，就是说想用 get 和 set，就不能用 writable 或 value 中的任何一个。

可做数据劫持，去劫持数据每个属性对应的getter和setter，vue双向数据绑定实现原理，for example:

var a= {}
Object.defineProperty(a,"b",{
  set:function(newValue){
    console.log("你要赋值给我,我的新值是"＋newValue)
    },
  get:function(){
    console.log("你取我的值")
    return 2 //注意这里，我硬编码返回2
   }
})
a.b =1 //打印 你要赋值给我,我的新值是1
console.log(a.b)    //打印 你取我的值
                    //打印 2    注意这里，和我的硬编码相同的

简单来说，这个 “b” 赋值或者取值的时候会分别触发 set 和 get 对应的函数。