JavaScript 物件 - 淺凍結與深度凍結

淺凍結和深度凍結之間的差異在於如何將凍結行為應用於巢狀物件。以下是這兩個概念的細分：

---

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中文網其他相關文章！