理解 JavaScript 物件的屬性

Smallfly發表於2019-01-20
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. 屬性觀察，在屬性改變時產生副作用。

相關文章