JS对象如何冻结_JavaScriptObjectfreeze方法使用与不可变对象设置教程-js教程-PHP中文网

JS对象如何冻结_JavaScriptObjectfreeze方法使用与不可变对象设置教程

絕刀狂花

发布： 2025-11-05 22:09:02

原创

407人浏览过

Object.freeze()用于冻结对象，防止添加、删除或修改属性，实现浅层不可变性。示例：const user = {name: 'Alice'}; Object.freeze(user); user.name = 'Bob'; 无效。注意：仅浅冻结，嵌套对象需递归深冻结。使用Object.isFrozen()检测是否冻结，数组同样适用，但const只防重赋值，不防内容修改。

js对象如何冻结_javascriptobjectfreeze方法使用与不可变对象设置教程

在JavaScript中，冻结对象是创建不可变对象的一种方式。使用 Object.freeze() 方法可以防止对象的现有属性被修改、删除，以及阻止新属性被添加。这对于构建稳定的数据结构、避免意外更改状态非常有用，尤其是在React等强调不可变性的框架中。

什么是Object.freeze()？

Object.freeze() 是 JavaScript 内置的方法，用于“冻结”一个对象。冻结后的对象无法进行以下操作：

添加新属性
删除已有属性
修改已有属性的值（包括 writable、configurable、enumerable 等描述符）

该方法返回被冻结的对象本身，不会创建副本。

示例：

立即学习“Java免费学习笔记（深入）”；

<pre class="brush:php;toolbar:false;">const user = {
  name: 'Alice',
  age: 25
};

Object.freeze(user);

user.name = 'Bob'; // 无效，在严格模式下会抛出错误
delete user.age;   // 无效
user.email = 'alice@example.com'; // 无效

console.log(user); // { name: 'Alice', age: 25 }

登录后复制

浅冻结：只冻结第一层

Object.freeze() 只对对象的第一层属性生效，即它只能做浅冻结。如果对象包含嵌套对象，这些子对象仍然可以被修改。

示例：

立即学习“Java免费学习笔记（深入）”；

<pre class="brush:php;toolbar:false;">const config = {
  theme: 'dark',
  metadata: {
    version: '1.0',
    debug: true
  }
};

Object.freeze(config);
config.theme = 'light';        // 无效
config.metadata.debug = false; // ✅ 仍然可以修改！

console.log(config.metadata.debug); // false

登录后复制

要实现深冻结，需要递归冻结所有嵌套对象。

如何实现深冻结对象

可以通过递归函数手动实现深冻结：

Fireflies.ai

自动化会议记录和笔记工具，可以帮助你的团队记录、转录、搜索和分析语音对话。

145

查看详情

<pre class="brush:php;toolbar:false;">function deepFreeze(obj) {
  // 获取所有属性并遍历
  Object.getOwnPropertyNames(obj).forEach(prop => {
    if (
      obj[prop] && typeof obj[prop] === 'object' &&
      !Object.isFrozen(obj[prop])
    ) {
      deepFreeze(obj[prop]); // 递归冻结
    }
  });
  return Object.freeze(obj);
}

// 使用示例
const settings = {
  ui: {
    layout: 'vertical',
    animations: true
  },
  api: {
    timeout: 5000
  }
};

deepFreeze(settings);

settings.ui.layout = 'horizontal'; // 无效
console.log(settings.ui.layout);   // vertical

登录后复制

注意：需避免对 null、数组或循环引用对象处理时出错，生产环境建议结合类型判断和边界检查。

检测对象是否被冻结

使用 Object.isFrozen() 可以判断一个对象是否已被冻结。

<pre class="brush:php;toolbar:false;">const obj = { value: 42 };
console.log(Object.isFrozen(obj)); // false

Object.freeze(obj);
console.log(Object.isFrozen(obj)); // true

登录后复制

注意：对于原始值（如字符串、数字），Object.isFrozen() 返回 true，因为它们本质上是不可变的。

冻结数组

数组也是对象，因此也可以被冻结：

<pre class="brush:php;toolbar:false;">const colors = ['red', 'green', 'blue'];
Object.freeze(colors);

colors.push('yellow'); // 无效
colors[0] = 'pink';    // 无效
console.log(colors);   // ['red', 'green', 'blue']

登录后复制

同样，若数组中包含对象，需深冻结才能完全保护。

冻结与常量声明的区别

const 只保证变量绑定不可重新赋值，但不保护对象内容：

<pre class="brush:php;toolbar:false;">const user = { name: 'John' };
user.name = 'Jane'; // ✅ 允许
user = {};          // ❌ 报错：不能重新赋值

Object.freeze(user);
user.name = 'Jack'; // ❌ 修改失败（严格模式报错）

登录后复制

所以：const 防止重赋值，Object.freeze() 防止修改内容。

基本上就这些。掌握 Object.freeze() 能帮助你更好地控制数据不变性，提升程序稳定性。实际开发中，结合深冻结工具函数，能更安全地管理配置、状态快照等场景。不复杂但容易忽略细节。

以上就是JS对象如何冻结_JavaScriptObjectfreeze方法使用与不可变对象设置教程的详细内容，更多请关注php中文网其它相关文章！