理解 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
}
*/
複製程式碼