当前位置：首页 > news >正文

如何在 JavaScript 中冻结对象：深入理解 Object.freeze() 和深冻结

news 来源：原创 2025/6/15 16:07:16

在 JavaScript 开发中，我们经常需要确保某些对象不会被意外修改。例如，在配置对象、常量或共享状态管理中，防止对象被篡改是非常重要的。JavaScript 提供了 Object.freeze() 方法来实现对象的冻结，但它的行为可能并不完全符合你的预期。本文将深入探讨 Object.freeze() 的使用方法、注意事项，以及如何实现深冻结。

什么是对象冻结？

对象冻结是指将一个对象设置为不可变状态。冻结后的对象具有以下特性：

不能添加新属性。
不能删除现有属性。
不能修改现有属性的值。

JavaScript 提供了 Object.freeze() 方法来实现这一功能。

使用 `Object.freeze()` 冻结对象

Object.freeze() 是 JavaScript 中用于冻结对象的方法。它的使用非常简单：

const obj = {
  prop1: 42,
  prop2: 'Hello'
};

// 冻结对象
Object.freeze(obj);

// 尝试修改属性
obj.prop1 = 100; // 不会生效
console.log(obj.prop1); // 输出: 42

// 尝试添加新属性
obj.prop3 = 'New'; // 不会生效
console.log(obj.prop3); // 输出: undefined

// 尝试删除属性
delete obj.prop2; // 不会生效
console.log(obj.prop2); // 输出: 'Hello'

严格模式下的行为

在非严格模式下，尝试修改冻结对象的属性会静默失败。但在严格模式下，会抛出 TypeError 错误：

'use strict';

const obj = { prop: 42 };
Object.freeze(obj);

obj.prop = 100; // 抛出 TypeError

因此，建议在严格模式下开发，以便更容易发现潜在的错误。

`Object.freeze()` 的局限性

Object.freeze() 是一个浅冻结方法。它只会冻结对象的第一层属性。如果对象的属性值是另一个对象，那么嵌套对象不会被冻结：

const obj = {
  nested: {
    prop: 42
  }
};

Object.freeze(obj);

obj.nested.prop = 100; // 可以修改嵌套对象的属性
console.log(obj.nested.prop); // 输出: 100

从上面的例子可以看出，Object.freeze() 并不会递归地冻结嵌套对象。

如何实现深冻结？

如果需要完全冻结一个对象及其所有嵌套对象，可以编写一个递归函数来实现深冻结：

function deepFreeze(obj) {
  // 冻结当前对象
  Object.freeze(obj);

  // 递归冻结所有嵌套对象
  for (const key in obj) {
    if (obj.hasOwnProperty(key) && typeof obj[key] === 'object' && obj[key] !== null) {
      deepFreeze(obj[key]);
    }
  }
}

const obj = {
  nested: {
    prop: 42
  }
};

deepFreeze(obj);

obj.nested.prop = 100; // 不会生效
console.log(obj.nested.prop); // 输出: 42

通过 deepFreeze() 函数，我们可以确保对象的所有层级都被冻结，从而实现真正的不可变性。