9. ES5 之 Object.defineProperty(obj, prop, descriptor)

參數

• Object obj 目標對象

• String prop 須要定義的屬性

• Object descriptor 該屬性擁有的特性，可設置的值有：
• value 屬性的值，默認爲 undefined。

• writable 該屬性是否可寫，若是設置成 false，則任何對該屬性改寫的操做都無效（但不會報錯），默認爲 false。

• get 一旦目標對象訪問該屬性，就會調用這個方法，並返回結果。默認爲 undefined。

• set 一旦目標對象設置該屬性，就會調用這個方法。默認爲 undeinfed。

• configurable 若是爲false，則任未嘗試刪除目標屬性或修改屬性如下特性（writable, configurable, enumerable）的行爲將被無效化，默認爲 false。

• enumerable 是否能在for...in循環中遍歷出來或在Object.keys中列舉出來。默認爲 false。

 

1. 定義新屬性newDataProperty

var obj = {
    height: '180cm',
    age: 20
};
// 這裏的newDataProperty是obj的屬性
Object.defineProperty(obj, 'newDataProperty', {
    // value: 100,
    // writable: true,
    enumerable: true,
    configurable: true,
    get: function() {
        return document.getElementById('J_nickName').innerHTML;
    },
    set: function(name) {
        document.querySelector('#J_nickName').innerHTML = name;
    }
});

 

2. 參數value、writable、enumerable、configurable的使用（我的感受目前項目中用處不大）

// value: newDataProperty做爲obj的默認屬性value爲100
var defaultValue = obj.newDataProperty;

// writable: 因爲設置了writeable爲true，因此newDataProperty的屬性值仍爲100
obj.newDataProperty = 101;

// enumerable: 當enumberable的值爲false時 newDataProperty沒法被枚舉
for (var key in obj) {
    console.log(obj[key]);
}

// configurable: 修改writable屬性
Object.defineProperty(obj, 'newDataProperty', {
    writable : false
});
var descriptor = Object.getOwnPropertyDescriptor(obj, 'newDataProperty');
console.log(descriptor);

 

3. 關於set和get

通常用於數據和視圖聯動，mvvm框架的avalon.js、vue.js、angualar.js的雙向數據綁定原理就是屬性訪問器。

不容許同一個屬性存在兩個及以上的存取訪問器配置，因此writable或者value不能與get/set同時配置，不然報錯。

// get/set: newDataProperty屬性取值 賦值會觸發get和set方法 從而形成視圖更新
obj.newDataProperty = 'sampson'