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中文网其他相关文章！