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()在某些特殊場景纔會用到。