JavaScript オブジェクト - 浅いフリーズと深いフリーズ

浅いフリーズと深いフリーズの違いは、フリーズ動作がネストされたオブジェクトにどのように適用されるかにあります。 2 つの概念の内訳は次のとおりです。

---

1.シャローフリーズ

• 定義: オブジェクトの最上位プロパティのみを凍結します。
• 動作:
  • トップレベルのプロパティの追加、削除、変更を禁止します。
  ネストされたオブジェクトを
  • フリーズしません。それらは変更可能なままです。
• 例:

const shallowObject = {
    name: "Alice",
    details: { age: 25, city: "New York" },
};

Object.freeze(shallowObject);

// Top-level properties are immutable
shallowObject.name = "Bob"; // Ignored
shallowObject.newProp = "test"; // Ignored

// Nested objects are still mutable
shallowObject.details.age = 30; // Allowed

console.log(shallowObject);
// Output: { name: "Alice", details: { age: 30, city: "New York" } }

---

2.ディープフリーズ

• 定義: オブジェクトを、そのすべてのネストされたオブジェクトおよび配列とともに再帰的にフリーズします。
• 動作:
  • オブジェクトのどの部分も (トップレベルまたはネストされた) 変更できないようにします。
• 例:

const deepObject = {
    name: "Alice",
    details: { age: 25, city: "New York" },
};

// Deep freeze function
function deepFreeze(object) {
    const propertyNames = Object.getOwnPropertyNames(object);
    for (const name of propertyNames) {
        const value = object[name];
        if (value && typeof value === 'object') {
            deepFreeze(value); // Recursively freeze
        }
    }
    return Object.freeze(object);
}

deepFreeze(deepObject);

// Neither top-level nor nested properties can be changed
deepObject.name = "Bob"; // Ignored
deepObject.details.age = 30; // Ignored

console.log(deepObject);
// Output: { name: "Alice", details: { age: 25, city: "New York" } }

---

比較表

機能 シャローフリーズ ディープフリーズ

Feature	Shallow Freeze	Deep Freeze
Scope	Only freezes top-level properties.	Freezes top-level and nested objects.
Nested Object Mutability	Mutable.	Immutable.
Implementation	Object.freeze(object).	Custom recursive function with Object.freeze().
Example Mutation	Modifications to nested objects are allowed.	No modifications allowed at any level.

スコープ トップレベルのプロパティのみを凍結します。 トップレベルおよびネストされたオブジェクトを凍結します。 ネストされたオブジェクトの変更可能性 変更可能。 不変。 実装 Object.freeze(オブジェクト). Object.freeze() を使用したカスタム再帰関数。 突然変異の例 ネストされたオブジェクトの変更は許可されます。 どのレベルでも変更は許可されません。 テーブル>

---

使用例

1. シャローフリーズ:

   • トップレベルのプロパティのみを不変にする必要がある場合に適しています。
   • 例: ネストされたプロパティが独立して管理される構成。

2. ディープフリーズ:

   • オブジェクト階層全体に完全な不変性が必要な場合に最適です。
   • 例: 状態管理で深くネストされたオブジェクトのデータの一貫性を確保します。

考慮事項

• パフォーマンス:
  • 大規模なオブジェクトや深くネストされたオブジェクトの場合、急速凍結は計算コストが高くなる可能性があります。
• 循環参照:
  • オブジェクトに循環参照が含まれている場合は、無限再帰を避けるために、訪問したオブジェクトを追跡する必要があります。

循環参照の処理

循環参照を処理するには、訪問したオブジェクトの WeakSet を維持できます。

const shallowObject = {
    name: "Alice",
    details: { age: 25, city: "New York" },
};

Object.freeze(shallowObject);

// Top-level properties are immutable
shallowObject.name = "Bob"; // Ignored
shallowObject.newProp = "test"; // Ignored

// Nested objects are still mutable
shallowObject.details.age = 30; // Allowed

console.log(shallowObject);
// Output: { name: "Alice", details: { age: 30, city: "New York" } }

これにより、循環参照の無限再帰が防止されます。

以上がJavaScript オブジェクト - 浅いフリーズと深いフリーズの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。