保護物件不被變更 • 深入探討 JavaScript

10 保護物件不被變更

10.1 保護層級：防止擴充、密封、凍結
10.2 防止物件擴充
- 10.2.1 檢查物件是否可擴充
10.3 密封物件
- 10.3.1 檢查物件是否已密封
10.4 凍結物件
- 10.4.1 檢查物件是否已凍結
- 10.4.2 凍結是淺層的
- 10.4.3 實作深度凍結
10.5 進一步閱讀

在本章中，我們將探討如何保護物件不被變更。範例包括：防止新增屬性以及防止屬性被變更。

所需知識：屬性屬性

對於本章，你應熟悉屬性屬性。如果你不熟悉，請查看§9「屬性屬性：簡介」。

10.1 保護層級：防止擴充、密封、凍結

JavaScript 有三種保護物件的層級

防止擴充使我們無法新增新的屬性到物件中。不過，我們仍然可以刪除和變更屬性。
- 方法：Object.preventExtensions(obj)
密封會防止擴充，並使所有屬性都不可設定（大致上來說：我們無法再變更屬性的運作方式）。
- 方法：Object.seal(obj)
凍結會在使物件的所有屬性都不可寫入後密封物件。也就是說，物件不可擴充，所有屬性都是唯讀的，而且沒有辦法變更。
- 方法：Object.freeze(obj)

10.2 防止物件擴充

Object.preventExtensions<T>(obj: T): T

此方法的運作方式如下

如果 obj 不是物件，則回傳它。
否則，它會變更 obj，讓我們無法再新增屬性，並回傳它。
類型參數 <T> 表示結果與參數具有相同的類型。

讓我們在範例中使用 Object.preventExtensions()

const obj = { first: 'Jane' };
Object.preventExtensions(obj);
assert.throws(
  () => obj.last = 'Doe',
  /^TypeError: Cannot add property last, object is not extensible$/);

不過，我們仍然可以刪除屬性

assert.deepEquals(
  Object.keys(obj), ['first']);
delete obj.first;
assert.deepEquals(
  Object.keys(obj), []);

10.2.1 檢查物件是否可延伸

Object.isExtensible(obj: any): boolean

檢查 obj 是否可延伸，例如

> const obj = {};
> Object.isExtensible(obj)
true
> Object.preventExtensions(obj)
{}
> Object.isExtensible(obj)
false

10.3 封裝物件

Object.seal<T>(obj: T): T

此方法的說明

如果 obj 不是物件，它會回傳它。
否則，它會防止 obj 延伸，讓所有屬性都「不可設定」，並回傳它。屬性不可設定表示它們無法再變更（其值除外）：唯讀屬性會保持唯讀，可列舉屬性會保持可列舉，等等。

下列範例示範封裝會讓物件無法延伸，且其屬性不可設定。

const obj = {
  first: 'Jane',
  last: 'Doe',
};

// Before sealing
assert.equal(Object.isExtensible(obj), true);
assert.deepEqual(
  Object.getOwnPropertyDescriptors(obj),
  {
    first: {
      value: 'Jane',
      writable: true,
      enumerable: true,
      configurable: true
    },
    last: {
      value: 'Doe',
      writable: true,
      enumerable: true,
      configurable: true
    }
  });

Object.seal(obj);

// After sealing
assert.equal(Object.isExtensible(obj), false);
assert.deepEqual(
  Object.getOwnPropertyDescriptors(obj),
  {
    first: {
      value: 'Jane',
      writable: true,
      enumerable: true,
      configurable: false
    },
    last: {
      value: 'Doe',
      writable: true,
      enumerable: true,
      configurable: false
    }
  });

我們仍然可以變更屬性 .first 的值

obj.first = 'John';
assert.deepEqual(
  obj, {first: 'John', last: 'Doe'});

但我們無法變更其屬性

assert.throws(
  () => Object.defineProperty(obj, 'first', { enumerable: false }),
  /^TypeError: Cannot redefine property: first$/);

10.3.1 檢查物件是否已封裝

Object.isSealed(obj: any): boolean

檢查 obj 是否已封裝，例如

> const obj = {};
> Object.isSealed(obj)
false
> Object.seal(obj)
{}
> Object.isSealed(obj)
true

10.4 凍結物件

Object.freeze<T>(obj: T): T;

如果此方法不是物件，它會立即回傳 obj。
否則，它會讓所有屬性都不可寫入，封裝 obj，並回傳它。也就是說，obj 無法延伸，所有屬性都唯讀，而且無法變更。

const point = { x: 17, y: -5 };
Object.freeze(point);

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

assert.throws(
  () => Object.defineProperty(point, 'x', {enumerable: false}),
  /^TypeError: Cannot redefine property: x$/);

assert.throws(
  () => point.z = 4,
  /^TypeError: Cannot add property z, object is not extensible$/);

10.4.1 檢查物件是否已凍結

Object.isFrozen(obj: any): boolean

檢查 obj 是否已凍結，例如

> const point = { x: 17, y: -5 };
> Object.isFrozen(point)
false
> Object.freeze(point)
{ x: 17, y: -5 }
> Object.isFrozen(point)
true

10.4.2 凍結是淺層的

Object.freeze(obj) 只會凍結 obj 及其屬性。它不會凍結這些屬性的值，例如

const teacher = {
  name: 'Edna Krabappel',
  students: ['Bart'],
};
Object.freeze(teacher);

// We can’t change own properties:
assert.throws(
  () => teacher.name = 'Elizabeth Hoover',
  /^TypeError: Cannot assign to read only property 'name'/);

// Alas, we can still change values of own properties:
teacher.students.push('Lisa');
assert.deepEqual(
  teacher, {
    name: 'Edna Krabappel',
    students: ['Bart', 'Lisa'],
  });

10.4.3 實作深度凍結

如果我們要深度凍結，我們需要自己實作

function deepFreeze(value) {
  if (Array.isArray(value)) {
    for (const element of value) {
      deepFreeze(element);
    }
    Object.freeze(value);
  } else if (typeof value === 'object' && value !== null) {
    for (const v of Object.values(value)) {
      deepFreeze(v);
    }
    Object.freeze(value);
  } else {
    // Nothing to do: primitive values are already immutable
  } 
  return value;
}

重新檢視前一節的範例，我們可以檢查 deepFreeze() 是否真的深度凍結

const teacher = {
  name: 'Edna Krabappel',
  students: ['Bart'],
};
deepFreeze(teacher);

assert.throws(
  () => teacher.students.push('Lisa'),
  /^TypeError: Cannot add property 1, object is not extensible$/);

10.5 進一步閱讀

有關防止資料結構變更的模式的更多資訊：§15「集合的不可變包裝器」