屬性屬性：簡介 • 深入了解 JavaScript

9 屬性屬性：簡介

9.1 物件的結構
- 9.1.1 內部插槽
- 9.1.2 屬性金鑰
- 9.1.3 屬性屬性
9.2 屬性描述符
9.3 擷取屬性的描述符
- 9.3.1 Object.getOwnPropertyDescriptor()：擷取單一屬性的描述符
- 9.3.2 Object.getOwnPropertyDescriptors()：擷取物件所有屬性的描述符
9.4 透過描述符定義屬性
- 9.4.1 Object.defineProperty()：透過描述符定義單一屬性
- 9.4.2 Object.defineProperties()：透過描述符定義多個屬性
9.5 Object.create()：透過描述符建立物件
9.6 Object.getOwnPropertyDescriptors() 的使用案例
- 9.6.1 使用案例：將屬性複製到物件中
- 9.6.2 Object.getOwnPropertyDescriptors() 的使用案例：複製物件
9.7 省略描述符屬性
- 9.7.1 建立屬性時省略描述符屬性
- 9.7.2 變更屬性時省略描述符屬性
9.8 內建結構使用哪些屬性屬性？
- 9.8.1 透過指派建立的自有屬性
- 9.8.2 透過物件文字建立的自有屬性
- 9.8.3 陣列的自有屬性 .length
- 9.8.4 內建類別的原型屬性
- 9.8.5 使用者定義類別的原型屬性與實例屬性
9.9 API：屬性描述符
9.10 延伸讀物

在本章中，我們將更深入地了解 ECMAScript 規範如何看待 JavaScript 物件。特別是，屬性在規範中並非原子性的，而是由多個屬性組成（想想記錄中的欄位）。甚至資料屬性的值都儲存在屬性中！

9.1 物件的結構

在 ECMAScript 規範中，物件包含

內部插槽，這些是儲存位置，無法從 JavaScript 存取，只能從規範中的運算存取。
屬性的集合。每個屬性將金鑰與屬性關聯起來（想想記錄中的欄位）。

9.1.1 內部插槽

規範將內部插槽描述如下。我加入了項目符號並強調了一部分

內部插槽對應於與物件關聯並由各種 ECMAScript 規範演算法使用的內部狀態。
內部插槽不是物件屬性，也不會被繼承。
根據具體的內部插槽規範，此狀態可能包含
- 任何 ECMAScript 語言類型的值或
- 特定 ECMAScript 規範類型值的類型。
除非另有明確說明，否則內部插槽會在建立物件的過程中分配，且無法動態新增到物件中。
除非另有說明，否則內部插槽的初始值為 undefined。
本規範中的各種演算法會建立具有內部插槽的物件。然而，ECMAScript 語言沒有提供任何直接將內部插槽與物件關聯的方法。
本規範中使用以雙方括弧 [[ ]] 括起來的名稱來識別內部方法和內部插槽。

有兩種內部插槽

用於操作物件的方法插槽（取得屬性、設定屬性等）
用於儲存值的資料插槽。

一般物件具有下列資料插槽

.[[Prototype]]: null | 物件
- 儲存物件的原型。
- 可透過 Object.getPrototypeOf() 和 Object.setPrototypeOf() 間接存取。
.[[Extensible]]: 布林值
- 表示是否可以將屬性新增到物件。
- 可透過 Object.preventExtensions() 設定為 false。
.[[PrivateFieldValues]]: EntryList
- 用於管理私有類別欄位。

9.1.2 屬性鍵

屬性的鍵為下列其中一者

字串
符號

9.1.3 屬性屬性

有兩種屬性，它們的屬性決定其特性

資料屬性 儲存資料。其屬性 value 儲存任何 JavaScript 值。
存取器屬性 包含一個 getter 函式和/或一個 setter 函式。前者儲存在屬性 get 中，後者儲存在屬性 set 中。

此外，還有兩種屬性都具備。下表列出所有屬性及其預設值。

屬性種類	屬性名稱和類型	預設值
資料屬性	`value: any`	`undefined`
	`writable: boolean`	`false`
存取器屬性	`get: (this: any) => any`	`undefined`
	`set: (this: any, v: any) => void`	`undefined`
所有屬性	`configurable: boolean`	`false`
	`enumerable: boolean`	`false`

我們已經看過屬性 value、get 和 set。其他屬性的運作方式如下

writable 決定資料屬性的值是否可以變更。
configurable 決定屬性的屬性是否可以變更。如果為 false，則
- 我們無法刪除屬性。
- 我們無法將屬性從資料屬性變更為存取器屬性，反之亦然。
- 我們無法變更任何屬性，除了 value。
- 不過，允許再變更一個屬性：我們可以將 writable 從 true 變更為 false。這種異常現象的背後原因源自歷史：陣列的屬性 .length 一直都是可寫入且不可設定的。允許變更其 writable 屬性，讓我們得以凍結陣列。
enumerable 會影響某些操作（例如 Object.keys()）。如果為 false，則這些操作會忽略屬性。大多數屬性都是可列舉的（例如透過指派或物件文字建立的屬性），這就是為什麼你很少會在實務中注意到這個屬性的原因。如果你仍然有興趣了解它的運作方式，請參閱 §12「屬性的可列舉性」。

9.1.3.1 陷阱：繼承而來的不可寫入屬性會阻止透過指派建立自己的屬性

如果繼承而來的屬性不可寫入，我們無法使用指派來建立具有相同鍵的自己的屬性

const proto = {
  prop: 1,
};
// Make proto.prop non-writable:
Object.defineProperty(
  proto, 'prop', {writable: false});

const obj = Object.create(proto);

assert.throws(
  () => obj.prop = 2,
  /^TypeError: Cannot assign to read only property 'prop'/);

9.2 屬性描述子

屬性描述子將屬性的屬性編碼為 JavaScript 物件。其 TypeScript 介面如下所示。

interface DataPropertyDescriptor {
  value?: any;
  writable?: boolean;
  configurable?: boolean;
  enumerable?: boolean;
}
interface AccessorPropertyDescriptor {
  get?: (this: any) => any;
  set?: (this: any, v: any) => void;
  configurable?: boolean;
  enumerable?: boolean;
}
type PropertyDescriptor = DataPropertyDescriptor | AccessorPropertyDescriptor;

問號表示所有屬性都是選用的。§9.7 “省略描述子屬性” 說明如果省略這些屬性會發生什麼事。

9.3 擷取屬性的描述子

9.3.1 `Object.getOwnPropertyDescriptor()`：擷取單一屬性的描述子

考慮下列物件

const legoBrick = {
  kind: 'Plate 1x3',
  color: 'yellow',
  get description() {
    return `${this.kind} (${this.color})`;
  },
};

我們先為資料屬性 .color 取得描述子

assert.deepEqual(
  Object.getOwnPropertyDescriptor(legoBrick, 'color'),
  {
    value: 'yellow',
    writable: true,
    enumerable: true,
    configurable: true,
  });

存取器屬性 .description 的描述子如下所示

const desc = Object.getOwnPropertyDescriptor.bind(Object);
assert.deepEqual(
  Object.getOwnPropertyDescriptor(legoBrick, 'description'),
  {
    get: desc(legoBrick, 'description').get, // (A)
    set: undefined,
    enumerable: true,
    configurable: true
  });

使用 A 行的公用函式 desc() 可確保 .deepEqual() 正常運作。

9.3.2 `Object.getOwnPropertyDescriptors()`：擷取物件所有屬性的描述子

const legoBrick = {
  kind: 'Plate 1x3',
  color: 'yellow',
  get description() {
    return `${this.kind} (${this.color})`;
  },
};

const desc = Object.getOwnPropertyDescriptor.bind(Object);
assert.deepEqual(
  Object.getOwnPropertyDescriptors(legoBrick),
  {
    kind: {
      value: 'Plate 1x3',
      writable: true,
      enumerable: true,
      configurable: true,
    },
    color: {
      value: 'yellow',
      writable: true,
      enumerable: true,
      configurable: true,
    },
    description: {
      get: desc(legoBrick, 'description').get, // (A)
      set: undefined,
      enumerable: true,
      configurable: true,
    },
  });

使用 A 行的輔助函式 desc() 可確保 .deepEqual() 正常運作。

9.4 透過描述子定義屬性

如果我們透過屬性描述子 propDesc 定義具有金鑰 k 的屬性，會發生下列情況

如果沒有金鑰為 k 的屬性，會建立一個新的自有屬性，其屬性由 propDesc 指定。
如果有一個金鑰為 k 的屬性，定義會變更屬性的屬性，使其符合 propDesc。

9.4.1 `Object.defineProperty()`：透過描述子定義單一屬性

首先，我們透過描述子建立一個新屬性

const car = {};

Object.defineProperty(car, 'color', {
  value: 'blue',
  writable: true,
  enumerable: true,
  configurable: true,
});

assert.deepEqual(
  car,
  {
    color: 'blue',
  });

接下來，我們透過描述子變更屬性的種類；我們將資料屬性轉換為 getter

const car = {
  color: 'blue',
};

let readCount = 0;
Object.defineProperty(car, 'color', {
  get() {
    readCount++;
    return 'red';
  },
});

assert.equal(car.color, 'red');
assert.equal(readCount, 1);

最後，我們透過描述子變更資料屬性的值

const car = {
  color: 'blue',
};

// Use the same attributes as assignment:
Object.defineProperty(
  car, 'color', {
    value: 'green',
    writable: true,
    enumerable: true,
    configurable: true,
  });

assert.deepEqual(
  car,
  {
    color: 'green',
  });

我們使用與指定相同屬性屬性。

9.4.2 `Object.defineProperties()`：透過描述子定義多個屬性

Object.defineProperties() 是 `Object.defineProperty() 的多屬性版本

const legoBrick1 = {};
Object.defineProperties(
  legoBrick1,
  {
    kind: {
      value: 'Plate 1x3',
      writable: true,
      enumerable: true,
      configurable: true,
    },
    color: {
      value: 'yellow',
      writable: true,
      enumerable: true,
      configurable: true,
    },
    description: {
      get: function () {
        return `${this.kind} (${this.color})`;
      },
      enumerable: true,
      configurable: true,
    },
  });

assert.deepEqual(
  legoBrick1,
  {
    kind: 'Plate 1x3',
    color: 'yellow',
    get description() {
      return `${this.kind} (${this.color})`;
    },
  });

9.5 `Object.create()`：透過描述子建立物件

Object.create() 會建立一個新物件。其第一個引數指定該物件的原型。其第二個引數（選用）指定該物件屬性的描述子。在下列範例中，我們建立與前一個範例相同的物件。

const legoBrick2 = Object.create(
  Object.prototype,
  {
    kind: {
      value: 'Plate 1x3',
      writable: true,
      enumerable: true,
      configurable: true,
    },
    color: {
      value: 'yellow',
      writable: true,
      enumerable: true,
      configurable: true,
    },
    description: {
      get: function () {
        return `${this.kind} (${this.color})`;
      },
      enumerable: true,
      configurable: true,
    },
  });

// Did we really create the same object?
assert.deepEqual(legoBrick1, legoBrick2); // Yes!

9.6 `Object.getOwnPropertyDescriptors()` 的使用案例

如果將 Object.getOwnPropertyDescriptors() 與 Object.defineProperties() 或 Object.create() 結合使用，它有助於我們處理兩個使用案例。

9.6.1 用例：將屬性複製到物件中

自 ES6 以來，JavaScript 已具備用於複製屬性的工具方法：Object.assign()。不過，此方法使用簡單的取得和設定操作來複製其金鑰為 key 的屬性

target[key] = source[key];

這表示它只有在以下情況下才會建立屬性的忠實副本

其屬性 writable 為 true，且其屬性 enumerable 為 true（因為這是指派建立屬性的方式）。
它是一個資料屬性。

下列範例說明了此限制。物件 source 有其金鑰為 data 的設定程式。

const source = {
  set data(value) {
    this._data = value;
  }
};

// Property `data` exists because there is only a setter
// but has the value `undefined`.
assert.equal('data' in source, true);
assert.equal(source.data, undefined);

如果我們使用 Object.assign() 來複製屬性 data，則存取器屬性 data 會轉換為資料屬性

const target1 = {};
Object.assign(target1, source);

assert.deepEqual(
  Object.getOwnPropertyDescriptor(target1, 'data'),
  {
    value: undefined,
    writable: true,
    enumerable: true,
    configurable: true,
  });

// For comparison, the original:
const desc = Object.getOwnPropertyDescriptor.bind(Object);
assert.deepEqual(
  Object.getOwnPropertyDescriptor(source, 'data'),
  {
    get: undefined,
    set: desc(source, 'data').set,
    enumerable: true,
    configurable: true,
  });

很幸運地，將 Object.getOwnPropertyDescriptors() 與 Object.defineProperties() 搭配使用，確實會複製屬性 data

const target2 = {};
Object.defineProperties(
  target2, Object.getOwnPropertyDescriptors(source));

assert.deepEqual(
  Object.getOwnPropertyDescriptor(target2, 'data'),
  {
    get: undefined,
    set: desc(source, 'data').set,
    enumerable: true,
    configurable: true,
  });

9.6.1.1 陷阱：複製使用 `super` 的方法

使用 super 的方法與其家系物件（儲存該方法的物件）緊密連結。目前沒有辦法將此類方法複製或移動到不同的物件。

9.6.2 `Object.getOwnPropertyDescriptors()` 的用例：複製物件

淺層複製類似於複製屬性，這就是為什麼 Object.getOwnPropertyDescriptors() 在此也是一個好選擇。

若要建立複製，我們使用 Object.create()

const original = {
  set data(value) {
    this._data = value;
  }
};

const clone = Object.create(
  Object.getPrototypeOf(original),
  Object.getOwnPropertyDescriptors(original));

assert.deepEqual(original, clone);

如需有關此主題的更多資訊，請參閱 §6「複製物件和陣列」。

9.7 省略描述符屬性

描述符的所有屬性都是選用的。省略屬性時會發生什麼事，取決於操作。

9.7.1 建立屬性時省略描述符屬性

當我們透過描述符建立新屬性時，省略屬性表示使用其預設值

const car = {};
Object.defineProperty(
  car, 'color', {
    value: 'red',
  });
assert.deepEqual(
  Object.getOwnPropertyDescriptor(car, 'color'),
  {
    value: 'red',
    writable: false,
    enumerable: false,
    configurable: false,
  });

9.7.2 變更屬性時省略描述符屬性

如果我們變更現有屬性，則省略描述符屬性表示不變更對應的屬性

const car = {
  color: 'yellow',
};
assert.deepEqual(
  Object.getOwnPropertyDescriptor(car, 'color'),
  {
    value: 'yellow',
    writable: true,
    enumerable: true,
    configurable: true,
  });
Object.defineProperty(
  car, 'color', {
    value: 'pink',
  });
assert.deepEqual(
  Object.getOwnPropertyDescriptor(car, 'color'),
  {
    value: 'pink',
    writable: true,
    enumerable: true,
    configurable: true,
  });

9.8 內建建構式使用哪些屬性屬性？

屬性屬性的通則（少數例外）為

原型鏈開頭的物件屬性通常具有可寫入、可列舉和可設定的特性。
如可列舉性章節所述，大多數繼承的屬性都是不可列舉的，以將它們隱藏起來，避免 for-in 迴圈等舊有建構式。繼承的屬性通常具有可寫入和可設定的特性。

9.8.1 透過指派建立的自有屬性

const obj = {};
obj.prop = 3;

assert.deepEqual(
  Object.getOwnPropertyDescriptors(obj),
  {
    prop: {
      value: 3,
      writable: true,
      enumerable: true,
      configurable: true,
    }
  });

9.8.2 透過物件文字建立的自有屬性

const obj = { prop: 'yes' };

assert.deepEqual(
  Object.getOwnPropertyDescriptors(obj),
  {
    prop: {
      value: 'yes',
      writable: true,
      enumerable: true,
      configurable: true
    }
  });

9.8.3 陣列的自有屬性 `.length`

陣列的自有屬性 .length 是不可列舉的，因此不會被 Object.assign()、散布和其他類似操作複製。它也是不可設定的

> Object.getOwnPropertyDescriptor([], 'length')
{ value: 0, writable: true, enumerable: false, configurable: false }
> Object.getOwnPropertyDescriptor('abc', 'length')
{ value: 3, writable: false, enumerable: false, configurable: false }

.length 是一個特殊的資料屬性，它會受到其他自有屬性（特別是索引屬性）影響（並影響它們）。

9.8.4 內建類別的原型屬性

assert.deepEqual(
  Object.getOwnPropertyDescriptor(Array.prototype, 'map'),
  {
    value: Array.prototype.map,
    writable: true,
    enumerable: false,
    configurable: true
  });

9.8.5 使用者定義類別的原型屬性與實例屬性

class DataContainer {
  accessCount = 0;
  constructor(data) {
    this.data = data;
  }
  getData() {
    this.accessCount++;
    return this.data;
  }
}
assert.deepEqual(
  Object.getOwnPropertyDescriptors(DataContainer.prototype),
  {
    constructor: {
      value: DataContainer,
      writable: true,
      enumerable: false,
      configurable: true,
    },
    getData: {
      value: DataContainer.prototype.getData,
      writable: true,
      enumerable: false,
      configurable: true,
    }
  });

請注意，DataContainer 實例的所有自有屬性都是可寫入、可列舉和可設定的

const dc = new DataContainer('abc')
assert.deepEqual(
  Object.getOwnPropertyDescriptors(dc),
  {
    accessCount: {
      value: 0,
      writable: true,
      enumerable: true,
      configurable: true,
    },
    data: {
      value: 'abc',
      writable: true,
      enumerable: true,
      configurable: true,
    }
  });

9.9 API：屬性描述符

下列工具方法使用屬性描述符

Object.defineProperty(obj: object, key: string|symbol, propDesc: PropertyDescriptor): object ^[ES5]

在 obj 上建立或變更一個屬性，其金鑰為 key，其屬性透過 propDesc 指定。傳回已修改的物件。

const obj = {};
const result = Object.defineProperty(
  obj, 'happy', {
    value: 'yes',
    writable: true,
    enumerable: true,
    configurable: true,
  });

// obj was returned and modified:
assert.equal(result, obj);
assert.deepEqual(obj, {
  happy: 'yes',
});

Object.defineProperties(obj: object, properties: {[k: string|symbol]: PropertyDescriptor}): object ^[ES5]

Object.defineProperty() 的批次版本。properties 物件的每個屬性 p 指定一個要新增到 obj 的屬性：p 的金鑰指定屬性的金鑰，p 的值是一個描述符，指定屬性的屬性。
```
const address1 = Object.defineProperties({}, {
  street: { value: 'Evergreen Terrace', enumerable: true },
  number: { value: 742, enumerable: true },
});
```
Object.create(proto: null|object, properties?: {[k: string|symbol]: PropertyDescriptor}): object ^[ES5]

首先，建立一個原型為 proto 的物件。然後，如果已提供選用參數 properties，則以與 Object.defineProperties() 相同的方式新增屬性。最後，傳回結果。例如，下列程式碼片段產生與前一個片段相同的結果
```
const address2 = Object.create(Object.prototype, {
  street: { value: 'Evergreen Terrace', enumerable: true },
  number: { value: 742, enumerable: true },
});
assert.deepEqual(address1, address2);
```

Object.getOwnPropertyDescriptor(obj: object, key: string|symbol): undefined|PropertyDescriptor ^[ES5]

傳回 obj 的自有（非繼承）屬性的描述符，其金鑰為 key。如果沒有此類屬性，則傳回 undefined。

assert.deepEqual(
  Object.getOwnPropertyDescriptor(Object.prototype, 'toString'),
  {
    value: {}.toString,
    writable: true,
    enumerable: false,
    configurable: true,
  });
assert.equal(
  Object.getOwnPropertyDescriptor({}, 'toString'),
  undefined);

Object.getOwnPropertyDescriptors(obj: object): {[k: string|symbol]: PropertyDescriptor} ^[ES2017]

傳回一個物件，其中 obj 的每個屬性金鑰 'k' 都對應到 obj.k 的屬性描述符。結果可用作 Object.defineProperties() 和 Object.create() 的輸入。

const propertyKey = Symbol('propertyKey');
const obj = {
  [propertyKey]: 'abc',
  get count() { return 123 },
};

const desc = Object.getOwnPropertyDescriptor.bind(Object);
assert.deepEqual(
  Object.getOwnPropertyDescriptors(obj),
  {
    [propertyKey]: {
      value: 'abc',
      writable: true,
      enumerable: true,
      configurable: true
    },
    count: {
      get: desc(obj, 'count').get, // (A)
      set: undefined,
      enumerable: true,
      configurable: true
    }
  });

在 A 行中使用 desc() 是一種解決方法，讓 .deepEqual() 能夠運作。

9.10 進一步閱讀

接下來的三章節會提供更多關於屬性屬性的詳細資訊