javascript-Object.defineProperty()

建立对象属性的时候，通常用字面量建立，若是要对属性进行定制化的话，就要用到Object.defineProperty()来处理。Vue的双向数据绑定就是用了这个原理。

做用

Object.defineProperty() 这个函数就是给对象添加一个新的属性，或者是对原有属性的修改。

语法

Object.defineProperty(
    obj,            // 操做对象
    prop,           // 操做对象的某个属性
    descriptor      // 属性的描述符
)
复制代码

属性描述符（descriptor）

属性描述符分两种：数据描述符 & 存取描述符

数据描述符：直接使用value配置
存取描述符：可对数据存取进行中间操做（Vue的双向绑定就是使用了这个特性）

这两种描述符具备公有属性和私有属性

1.公有属性

数据描述符 & 存取描述符都有的属性

{   
    'configurable': false,
    // configurable 默认false
    // 为true时，该属性描述符才可被改变，而且属性可被删除
    'enumerable': false
    // enumerable 默认false
    // 为true时，该属性为可枚举
}
复制代码

2.私有属性

特有的属性，数据描述符 & 存取描述符特有的，二者不能同时存在

数据描述符

{
    'value': undefined,
    // value 默认undefined
    // 该属性对应的值
    'writable': false
    // writable 默认false
    // 为true时，属性才能被赋值改变
}
复制代码

存取描述符

{
    'get': function() {
        return value
    },
    // get 默认undefined
    // 属性的getter方法
    'set': function(newValue) {
        value = newValue
    }
    // set 默认undefined
    // 属性的setter方法，属性改变时触发该方法，参数为该属性新的参数值
}
复制代码

3.完整描述符

下面咱们看一下怎样才是一个完整的描述符

数据描述符

// 这是一个完整的数据描述符
// var obj = 123 与下面的描述符是同样的
{
    'configurable': true,
    'enumerable': true,
    'value': 123,
    'wirtable': true
}
复制代码

存取描述符

// 这是一个完整的存取描述符
{
    'configurable': true,
    'enumerable': true,
    'get': function() {
        return 1
    },
    'set': function(newValue) {
        value = newValue
    }
}
复制代码

写在最后

通常状况下，定义变量的时候其实用字面量就能够知足需求了，Object.defineProperty()在某些特殊场景才会用到。