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