当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript中Object.freeze冻结对象详解

JavaScript中Object.freeze冻结对象详解

2025-08-28 09:58:43 0浏览收藏

想必大家都知道，在JavaScript中，`Object.freeze()` 方法用于冻结对象，使其成为不可变对象。本文将深入探讨 `Object.freeze()` 的使用方法、特性以及适用场景。通过本文，你将了解到 `Object.freeze()` 如何禁止添加、删除属性以及修改属性特性，从而保证对象的稳定性和安全性。但需要注意的是，`Object.freeze()` 仅执行浅冻结，嵌套对象仍可被修改。同时，本文还会对比 `Object.freeze()` 与 `const`、`Object.seal()` 和 `Object.preventExtensions()` 的区别，帮助你选择合适的“冻结”方式。最后，文章还将讨论 `Object.freeze()` 的适用场景，以及需要注意的陷阱和性能考量，助你更好地在项目中使用 `Object.freeze()`。

Object.freeze() 在 JavaScript 中用于冻结对象，使其不可修改，包括添加、删除属性或更改属性特性。1. 它仅执行浅冻结，嵌套对象仍可被修改；2. 与 const 不同，它冻结对象内容而非变量绑定；3. 比 Object.seal() 和 Object.preventExtensions() 更严格，禁止任何修改；4. 适用于配置对象、状态管理、公共接口等需不可变性的场景；5. 需注意严格模式下修改会抛出错误、性能开销及无法解冻等限制。

JavaScript如何用Object.freeze冻结对象

Object.freeze() 在 JavaScript 中用于冻结一个对象，使其不能再被修改。这意味着你不能添加新属性、删除现有属性、改变现有属性的可枚举性、可配置性或可写性，也不能重新分配现有属性的值，甚至不能改变它的原型。它提供了一种简单直接的方式来创建不可变的对象。

解决方案

要冻结一个对象，你只需要将它作为参数传递给 Object.freeze() 方法。该方法会返回被冻结的对象本身。

const config = {
  apiBaseUrl: 'https://api.example.com',
  timeout: 5000,
  debugMode: false
};

Object.freeze(config);

// 尝试修改，在严格模式下会抛出 TypeError，非严格模式下会静默失败
try {
  config.apiBaseUrl = 'https://api.new-example.com'; // 尝试修改现有属性
  config.newProperty = 'value'; // 尝试添加新属性
  delete config.timeout; // 尝试删除属性
} catch (e) {
  console.error("修改冻结对象失败:", e.message);
}

console.log(config);
// 输出：{ apiBaseUrl: 'https://api.example.com', timeout: 5000, debugMode: false }
// 证明对象内容未被改变

当一个对象被冻结后：

它的属性值不能被修改（除非是引用类型，后面会讲到）。
不能添加新的属性。
不能删除现有的属性。
不能改变属性的特性（如 writable, configurable）。
不能改变对象的原型。

`Object.freeze` 真的能让对象“纹丝不动”吗？理解其“浅冻结”的边界

第一次接触 Object.freeze 的时候，我曾天真地以为它能把一个对象里里外外、彻彻底底地锁死，就像一个密封的保险箱。但实际使用后才发现，它其实是个“浅冻结”。这意味着 Object.freeze() 只作用于对象本身及其直接属性，如果这些直接属性的值是另一个对象（或者数组，数组在 JavaScript 中也是对象），那么这些嵌套的对象或数组本身是不会被冻结的。它们的内部属性仍然可以被修改。

这就像你把一个装着几本书的箱子锁起来，箱子本身不能被打开、添加或移除书，但如果你箱子里有一本书是活页的，你可以随意翻动活页，甚至增删活页的内容。箱子是冻结的，但箱子里的“活页书”却不是。

const userProfile = {
  name: '张三',
  settings: {
    theme: 'dark',
    notifications: true
  },
  roles: ['admin', 'editor']
};

Object.freeze(userProfile);

console.log("冻结后的userProfile:", userProfile);

// 尝试修改顶级属性（会失败）
try {
  userProfile.name = '李四';
} catch (e) {
  console.error("修改顶级属性失败:", e.message);
}

// 尝试修改嵌套对象属性（会成功！）
userProfile.settings.theme = 'light';
userProfile.settings.notifications = false;

// 尝试修改嵌套数组元素（会成功！）
userProfile.roles.push('viewer');
userProfile.roles[0] = 'super_admin';

console.log("修改嵌套属性后的userProfile:", userProfile);
/*
输出：
{
  name: '张三',
  settings: { theme: 'light', notifications: false }, // settings内部被修改了
  roles: [ 'super_admin', 'editor', 'viewer' ] // roles内部被修改了
}
*/

从上面的例子可以看出，userProfile 对象本身是冻结的，你不能直接给它添加 age 属性或者删除 name 属性。但 settings 和 roles 这两个嵌套对象（和数组）并没有被冻结，它们的内部属性和元素仍然可以被修改。

如果你需要一个真正的深度冻结，你需要递归地遍历对象的每一个属性，并对所有嵌套的对象或数组都调用 Object.freeze()。当然，你也可以借助一些库（如 lodash.clonedeep 然后 Object.freeze，或者专门的不可变数据结构库）来实现。

`Object.freeze` 与 `const`、`Object.seal`、`Object.preventExtensions` 有何不同？选择合适的“冻结”姿态

JavaScript 提供了几种不同的方式来限制对象的修改，它们各有侧重，就像给对象穿上不同厚度的盔甲。理解它们的区别，能帮助你选择最符合需求的“冻结”姿态。

const 关键字：const 关键字用于声明一个常量。它确保变量的绑定不能被重新赋值。但请注意，const 限制的是变量本身，而不是变量指向的对象内容。
```
const myObject = { a: 1 };
myObject.a = 2; // 允许，因为修改的是对象内部
console.log(myObject); // { a: 2 }

// myObject = { b: 2 }; // 报错：TypeError: Assignment to constant variable.
```
const 只是说 myObject 这个变量永远指向同一个内存地址，但这个地址里的内容是可以变化的（除非内容本身是原始值）。

Object.preventExtensions()： 这个方法阻止向对象添加新的属性。但现有属性的值可以修改，也可以删除。

const obj1 = { a: 1, b: 2 };
Object.preventExtensions(obj1);

obj1.a = 3; // 允许，修改现有属性
delete obj1.b; // 允许，删除现有属性
// obj1.c = 4; // 报错：TypeError: Cannot add property c, object is not extensible
console.log(obj1); // { a: 3 }

它就像给对象加了一层“不扩容”的限制，但已有的空间可以随意使用或清空。

Object.seal()：Object.seal() 比 Object.preventExtensions() 更严格。它不仅阻止添加新属性（像 preventExtensions），还阻止删除现有属性。但与 Object.freeze() 不同的是，现有属性的值可以被修改。
```
const obj2 = { x: 10, y: 20 };
Object.seal(obj2);

obj2.x = 30; // 允许，修改现有属性
// obj2.z = 40; // 报错：TypeError: Cannot add property z, object is not extensible
// delete obj2.y; // 报错：TypeError: Cannot delete property 'y' of #<Object>
console.log(obj2); // { x: 30, y: 20 }
```
你可以把 Object.seal() 理解为“密封”：不能加新东西，也不能扔掉旧东西，但旧东西里面的内容可以调整。

Object.freeze()： 这是最严格的。它在 Object.seal() 的基础上，进一步阻止了现有属性值的修改。简单来说，Object.freeze() = Object.preventExtensions() + 阻止删除属性 + 阻止修改属性值 + 阻止修改属性特性（如可写性、可配置性）+ 阻止修改原型。

const obj3 = { key: 'value' };
Object.freeze(obj3);

// obj3.key = 'newValue'; // 报错：TypeError: Cannot assign to read only property 'key' of object '#<Object>'
// obj3.another = 'something'; // 报错：TypeError: Cannot add property another, object is not extensible
// delete obj3.key; // 报错：TypeError: Cannot delete property 'key' of #<Object>
console.log(obj3); // { key: 'value' }

它就像给对象上了最厚的锁，一旦锁上，什么都不能动。

总结选择：

const: 只是保证变量名不重新指向，对象内容可变。
Object.preventExtensions(): 阻止添加新属性，其他随意。
Object.seal(): 阻止添加/删除属性，但允许修改现有属性值。
Object.freeze(): 阻止添加/删除/修改所有属性（值、特性），提供最严格的不可变性（浅层）。

选择哪种方式，取决于你对对象不可变性的需求程度。如果你只是想防止意外地给对象添加新属性，preventExtensions 就够了。如果想确保对象结构稳定（不能增删属性），但内容可以更新，就用 seal。而如果你需要一个完全只读的对象（至少在浅层），那么 freeze 就是你的首选。

什么时候该用 `Object.freeze`？场景、陷阱与性能考量

Object.freeze 虽然强大，但并非万能药，也不是在所有场合都适用。我个人倾向于在那些“只读”的数据结构上果断使用它，比如一些全局配置或者纯粹的数据常量。

典型应用场景：

配置对象或常量： 当你的应用有一些在运行时不应该被修改的配置信息时，Object.freeze 是一个绝佳的选择。比如 API 地址、错误码映射、用户权限常量等。
```
const APP_CONFIG = Object.freeze({
  API_URL: '/api/v1',
  MAX_RETRIES: 3,
  DEFAULT_LOCALE: 'en-US'
});

// 尝试修改会报错或静默失败
// APP_CONFIG.API_URL = '/api/v2';
```
这能有效防止开发过程中不经意的修改导致难以追踪的 bug。
状态管理中的不可变性： 在像 Redux 这样的状态管理库中，强调状态的不可变性。虽然通常是通过返回新对象而不是直接修改来实现，但对返回的新状态对象进行 Object.freeze 可以提供额外的保障，确保任何尝试直接修改状态的操作都能被及时发现（在严格模式下抛出错误）。
```
function userReducer(state = {}, action) {
  switch (action.type) {
    case 'SET_USER_NAME':
      // 返回新对象，并冻结
      return Object.freeze({ ...state, name: action.payload });
    default:
      return state;
  }
}
```
共享模块或库的公共接口： 如果你开发一个库或模块，并希望暴露一些公共对象，但又不希望外部代码修改它们，可以使用 Object.freeze 来保护这些对象。这能增强代码的健壮性和可预测性。
优化性能（部分场景）： JavaScript 引擎在处理冻结对象时，有时可以进行一些内部优化，因为它知道这些对象不会再改变。但这通常是微观优化，对于大多数应用而言，性能提升不是使用 Object.freeze 的主要驱动力，其主要价值在于不可变性带来的代码可维护性和可预测性。

潜在的陷阱与注意事项：

浅冻结的陷阱： 这是最常见的误解和错误来源，前面已经详细讨论过。如果你的对象有嵌套结构，Object.freeze 只冻结了顶层，嵌套的对象仍然是可变的。如果你需要深度冻结，必须手动递归处理或使用辅助函数。
严格模式与非严格模式的行为差异： 在严格模式下，尝试修改一个冻结对象会抛出 TypeError。这对于调试和发现问题非常有帮助。但在非严格模式下，这些尝试会静默失败，不会有任何错误提示，这使得问题难以发现。因此，强烈建议在项目中使用严格模式。
性能考量： 尽管 Object.freeze 本身很快，但如果你需要对非常大或频繁创建的复杂嵌套对象进行深度冻结，递归遍历和复制可能会带来一定的性能开销。在这些极端情况下，可能需要权衡不可变性的需求与性能的优先级，或者考虑使用专门的不可变数据结构库（如 Immutable.js 或 Immer），它们通常有更优的性能表现。
无法解冻：Object.freeze 是一个单向操作，一旦对象被冻结，就没有内置的方法可以“解冻”它。如果你需要一个冻结对象的修改版本，你必须先创建一个它的深拷贝，然后修改这个拷贝。

总的来说，Object.freeze 是一个非常有用的工具，它能够有效地强制执行对象的不可变性，从而提高代码的健壮性和可预测性。但在使用时，务必清楚其“浅冻结”的特性，并在严格模式下使用，以充分利用其错误提示机制。

理论要掌握，实操不能落！以上关于《JavaScript中Object.freeze冻结对象详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！