在JavaScript中，如何实现对象的不可变性（Immutability）？-js教程-PHP中文网

在JavaScript中，如何实现对象的不可变性（Immutability）？

紅蓮之龍

发布： 2025-10-05 13:49:02

原创

169人浏览过

使用Object.freeze()可实现对象浅层不可变，深层不可变需递归封装deepFreeze函数；复杂场景推荐Immutable.js或immer库；结合扩展运算符可手动保持不可变性，选择方案应根据项目规模决定。

在javascript中，如何实现对象的不可变性（immutability）？

在JavaScript中，对象默认是可变的，但可以通过多种方式实现不可变性，确保数据不会被意外修改。关键在于合理使用内置方法和遵循函数式编程原则。

使用 Object.freeze() 实现浅层不可变

Object.freeze() 是最常用的方法之一，它能冻结对象，阻止属性的添加、删除和修改。

注意：它只作用于对象自身属性，属于浅层冻结。

示例：

<pre class="brush:php;toolbar:false;">const user = {
  name: 'Alice',
  profile: { age: 25 }
};
Object.freeze(user);

user.name = 'Bob'; // 无效，严格模式下会报错
user.email = 'alice@example.com'; // 添加失败

// 但嵌套对象仍可变
user.profile.age = 30; // 成功！

登录后复制

实现深层不可变（Deep Freeze）

为了冻结嵌套对象，需要递归调用 Object.freeze()。

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

可以封装一个 deepFreeze 函数：

<pre class="brush:php;toolbar:false;">function deepFreeze(obj) {
  Object.getOwnPropertyNames(obj).forEach(prop => {
    const value = obj[prop];
    if (value && typeof value === 'object') {
      deepFreeze(value);
    }
  });
  return Object.freeze(obj);
}

const config = { api: { url: 'https://api.example.com' } };
deepFreeze(config);

config.api.url = 'https://hacked.com'; // 失败，已被深层冻结

登录后复制

使用 Immutable.js 或其他库

对于复杂场景，推荐使用成熟的不可变数据结构库，如 Immutable.js 或 immer。

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

查看详情

Immutable.js 提供 Map、List 等不可变集合，每次操作返回新实例。
immer 允许你以可变的方式编写代码，但生成不可变结果，适合处理复杂状态。

例如使用 immer：

<pre class="brush:php;toolbar:false;">import produce from 'immer';

const baseState = { users: [] };
const nextState = produce(baseState, draft => {
  draft.users.push({ name: 'Charlie' }); // 看似可变，实际返回新对象
});

登录后复制

结合解构与扩展运算符进行安全更新

即使不使用额外工具，也可以通过扩展运算符手动保持不可变性。

常见做法：

更新对象：使用 { ...oldObj, newProp }
更新数组：使用 [...arr, newItem] 或 arr.filter() 等纯函数

示例：

<pre class="brush:php;toolbar:false;">const state = { count: 1 };
const newState = { ...state, count: state.count + 1 }; // 返回新对象

登录后复制

基本上就这些。选择哪种方式取决于项目复杂度。小型应用可用 Object.freeze 加规范约束，大型状态管理建议搭配 immer 或类似工具，既保证不可变性又提升开发体验。

以上就是在JavaScript中，如何实现对象的不可变性（Immutability）？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

统计字符串中字符出现次数并输出为 JavaScript 对象 JavaScript引擎性能优化策略与实现原理解决fetch在then()中首次点击不工作的问题使用纯CSS实现固定头部、动态底部与可滚动叠加层统计字符串中字符出现次数并输出为对象（JavaScript）