理解 JavaScript 對象的屬性

對象屬性

建立 JavaScript 自定義對象有兩種方法。一種是經過 new 關鍵字建立一個 Object 實例，而後爲它添加屬性和方法。

let person = new Object();
person.name = 'Zhang san';
person.age = 18;
person.job = 'Engineer';
person.sayName = function() {
    alert(this.name);
};
複製代碼

另外一種是對象的字面量，也是建立對象首選的方式，前面的例子能夠寫成：

const person = {
    name: 'Zhang san',
    age: 18,
    job: 'Engineer',
    sayName: function() {
        alert(this.name);
    }
};
複製代碼

兩中方式的 person 對象是同樣的，有相同的屬性和方法。這些屬性建立時都帶有必定的特徵，JavaScript 經過這些特徵來定義對象的行爲。

屬性的類型

數據屬性（Data property）

數據屬性表示存儲數據的位置，在這個位置能夠讀取和寫入值。 數據屬性有 4 個描述其行爲的特性：

• [[Configurable]]: 表示可以經過 delete 刪除屬性，可以修改屬性的特性，可以修改訪問屬性，默認值爲 true。
• [[Enumerable]]: 表示可否經過 for-in 循環返回屬性值。默認值 true.
• [[Writable]]: 表示可否修改屬性值。默認值 true。
• [[Value]]: 表示這個屬性的數據值。數據存儲的位置。

var person = ();
Object.defineProperty(person, "name", {
	  configurable: false,
	  wriable: false,
    value: 'Zhang san'
}

delete person.name;
console.log(person.name); // Zhang san

// TypeError: Cannot redefine property: name
Object.defineProperty(person, "name", {
    configurable: false,
}
複製代碼

把 configuration 設置爲 false，表示沒法刪除該屬性，若是嘗試 delete 該屬性，則在非嚴格模式下什麼都不會發生。

對於已經定義爲不可配置的屬性，不能再經過 Object 的 defineProperty 方法修改描述特性。強制修改會出現錯誤：TypeError: Cannot redefine property: name。

訪問器屬性（Accessor property）

訪問器屬性不包含數據值，它包含一對 getter 和 setter 函數，不過這兩個函數並非必須的。

在讀取訪問器屬性時，會調用 getter 函數，這個函數負責返回有效的值；在寫入訪問器屬性時，會調用 setter 函數並傳入新值，這個函數負責決定如何處理數據。

訪問器屬性有以下 4 個特性：

• [[Configurable]]: 表示可否經過 delete 刪除屬性重定義屬性，可否修改屬性的特性，或者可否把屬性修改成數據屬性。默認值爲 true。
• [[Enumerable]]: 表示可以經過 for-in 循環返回屬性，默認值 true。
• [[Get]]: 在讀取函數時調用的函數。默認值是 undefined。
• [[Set]]: 在寫入屬性時調用的函數。默認值 undefined。

var book = {
    _year: 2018,
    edition: 1
}

Object.defineProperty(book, 'year', {
    get() {
        return this._year;
    },
    set(newValue) {
        if (newValue > 2018) {
            this._year = newValue;
            this.edition += newValue - 2018;
        }
    }
});

book.year = 2020;
console.log(book.edition); // 3
複製代碼

這裏的 _year 能夠理解爲 Swift 中的 stored properties，year 相似於 computed properties。

定義多個屬性

若是有多個屬性須要定義特性，用 defineProperty逐個定義有些繁瑣。ECMAScript5 又定義了一個 Object.defineProperties()方法。利用這個方法能夠經過描述符一次定義多個屬性。

這個方法接受兩個對象參數：第一個對象是要添加和修改其屬性的對象，第二個對象的屬性與第一個對象中要添加或者修改的屬性一一對應。

例如：

var book = {};
Object.defineProperties(book, {
    _year: {
        writable: true,
        value: 2018
    },
    edition: {
        configurable: true,
        writable: true,
        value: 1
    },
    year: {
        get() {
            return this._year;
        },
        set(newValue) {
            this._year = newValue;
            this.edition += newValue - 2018;
        }
    }
});

book.year = 2020;
console.log(book.edition);
複製代碼

以上方法在 book 對象上定義了兩個數據屬性和一個訪問器屬性。

讀取屬性的特性

使用Object.getOwnPropertyDescriptor()方法，能夠取得給定屬性的描述符。這個方法接收兩個參數：屬性所在的對象和讀取其描述符的屬性名稱。

返回值是一個對象，若是是訪問器屬性，這個對象的屬性是 configurable、enumerable、get、set；若是是數據屬性，這個對象的屬性有 configurable、enumerable、writable 和 value。

// 訪問器屬性
var descriptor = Object.getOwnPropertyDescriptor(book, 'year');
console.log(descriptor); 
/** { get: [Function: get], set: [Function: set], enumerable: false, configurable: false } */ 

// 數據屬性
var descriptor1 = Object.getOwnPropertyDescriptor(book, 'edition');
console.log(descriptor1);
/** { value: 3, writable: true, enumerable: false, configurable: true } */
複製代碼

總結

屬性的描述符通常會有如下幾種用途；

1. 檢查某個屬性可否經過 for-in 從對象中枚舉；
2. 檢查對象的某個屬性可否被修改；
3. 屬性觀察，在屬性改變時產生反作用。