不使用 Object.freeze 也能安全保护 JavaScript 对象 ------ 精准控制只读性的四种模式
在 JavaScript 开发中，我们经常需要确保某些对象不被意外修改，尤其是配置项、全局状态或默认参数等关键数据。面对这类需求，许多开发者的第一反应是调用 Object.freeze() 方法，以期让对象变为只读。然而，这种做法虽然直观，却未必是最优解。
事实上，Object.freeze 存在明显的局限性，尤其是在处理嵌套对象时，其"浅冻结"特性可能导致数据仍然可被修改。更重要的是，我们往往并不需要对整个对象进行全面冻结，而是希望实现更细粒度、更灵活的控制。
本文将系统性地介绍 Object.freeze 的工作机制与局限，并在此基础上，提出四种更加精准、高效且可维护的替代方案，帮助你在不同场景下做出更合理的设计选择。
理解 Object.freeze：浅冻结与深冻结的区别
在探讨替代方案之前，我们必须先理解 Object.freeze 到底做了什么。
什么是浅冻结？
Object.freeze(obj) 的作用是冻结一个对象，使其：
- 无法添加新属性（不可扩展）
- 无法删除已有属性（
configurable: false） - 无法修改已有属性的值（
writable: false）
然而，这种冻结是浅层的，它只作用于对象自身的直接属性，而不会递归地冻结嵌套的对象或数组。
例如：
js
const config = {
api: 'https://api.example.com',
headers: {
'Content-Type': 'application/json'
}
};
Object.freeze(config);
// 顶层属性无法修改
config.api = 'https://hacker.com'; // 无效（严格模式下抛错）
config.newProp = 'evil'; // 无效
delete config.api; // 无效
// 但嵌套对象仍可被修改
config.headers.Authorization = 'xxx'; // 成功
console.log(config.headers.Authorization); // 输出: xxx可以看到，尽管 config 被冻结，但 headers 是一个对象，其内部状态仍然可以被更改。这意味着，浅冻结并不能真正保证数据的完整性。
什么是深冻结？
为了实现真正的不可变性，我们需要进行深冻结（Deep Freeze） ------ 即递归地冻结对象的所有层级。
js
function deepFreeze(obj) {
if (!obj || typeof obj !== 'object' || Object.isFrozen(obj)) {
return obj;
}
Object.getOwnPropertyNames(obj).forEach(key => {
if (typeof obj[key] === 'object') {
deepFreeze(obj[key]);
}
});
return Object.freeze(obj);
}
// 使用
const safeConfig = deepFreeze({
api: 'https://api.example.com',
headers: { token: '123' }
});
safeConfig.headers.token = 'hacked'; // 失败：已被冻结深冻结能够彻底防止任何层级的数据被修改，但代价是性能开销较大，尤其在处理大型对象树时，递归遍历会带来显著的计算成本。
此外，Object.freeze 是一个不可逆操作，一旦冻结，无法恢复。这在某些动态场景下会带来维护上的困难。
四种更优的只读控制模式
与其依赖 Object.freeze 这种"粗粒度"的保护机制，不如根据实际需求，选择更精细、更灵活的控制方式。以下是四种在现代 JavaScript 开发中广泛使用的替代方案。
1. 使用 Object.seal 锁定对象结构
Object.seal 的作用是密封一个对象，使其无法添加或删除属性，但允许修改现有属性的值。
js
const obj = { a: 1, b: { c: 2 } };
Object.seal(obj);
obj.a = 9; // 允许：值可以修改
obj.d = 4; // 无效：不能添加新属性
delete obj.a; // 无效：不能删除属性Object.seal 实际上是将对象的所有已有属性的 configurable 设置为 false，并调用 Object.preventExtensions() 防止扩展。
这种模式适用于需要保持对象结构稳定，但允许动态更新其值的场景，例如：
- 插件配置对象
- 表单 schema 定义
- API 接口契约
它比 Object.freeze 更灵活，同时提供了足够的结构保护。
2. 使用 Object.defineProperty 实现属性级控制
如果你只想锁定某个关键字段，而保留其他字段的可变性，Object.defineProperty 是最合适的工具。
js
const config = { apiKey: 'xxx', timeout: 5000 };
Object.defineProperty(config, 'apiKey', {
writable: false, // 值不可修改
configurable: false // 属性不可删除，描述符不可更改
});
config.apiKey = 'yyy'; // 无效（严格模式下抛错）
delete config.apiKey; // 无效
config.timeout = 8000; // 允许：其他字段仍可修改这种方式允许你对对象的每个属性进行精细化控制，包括：
- 是否可写（
writable） - 是否可枚举（
enumerable） - 是否可配置（
configurable） - 是否为 getter/setter
它非常适合保护敏感字段，如 API 密钥、版本号、默认路径等，而不影响整体对象的灵活性。
3. 使用 Proxy 实现完全自定义的访问控制
Proxy 是 ES6 引入的强大特性，允许你拦截和自定义对象的各种操作，如读取、赋值、删除、定义属性等。
js
const readOnly = obj => new Proxy(obj, {
set() { throw new TypeError('Read only'); },
deleteProperty() { throw new TypeError('Read only'); },
defineProperty() { throw new TypeError('Read only'); }
});
const cfg = readOnly({ host: 'api.x.com', port: 443 });
cfg.port = 80; // 抛错
delete cfg.host; // 抛错通过 Proxy，你可以实现：
- 完全只读视图
- 深冻结逻辑
- 访问日志、权限验证、数据校验等高级功能
它是 Vue 3 响应式系统、MobX 等现代框架的核心机制。虽然 Proxy 在 IE 中不被支持，但在现代前端开发中，它已成为构建高级数据抽象的首选工具。
4. 使用闭包与副本返回实现架构级保护
最根本的解决方案，是从设计层面避免共享可变状态。通过闭包封装原始数据，并在每次访问时返回副本，可以从根本上杜绝意外修改。
js
const getCfg = (() => {
const cfg = { api: 'https://x.com', timeout: 5000 };
return () => ({ ...cfg }); // 每次返回浅拷贝
})();
const config = getCfg();
config.api = 'hacker.com'; // 修改的是副本
console.log(getCfg().api); // 仍然是 'https://x.com'这种方式的优势在于：
- 原始数据完全私有，外部无法直接访问
- 每次获取的都是"干净"的初始状态
- 无需冻结操作，性能更高
- 符合函数式编程中"不可变性"的核心理念
它被广泛应用于 Redux 的 createStore、React 的 useState 等现代状态管理机制中，是构建可预测、可维护应用架构的重要思想。
如何选择合适的只读控制方式？
不同的场景需要不同的解决方案。以下是四种模式的适用建议：
- 若需锁定个别关键字段 ，如密钥、版本号，推荐使用
Object.defineProperty。 - 若需锁定对象结构但允许修改值 ，如配置 schema，推荐使用
Object.seal。 - 若需完全控制访问行为 ，如实现响应式、权限控制，推荐使用
Proxy。 - 若从架构层面追求数据安全与可预测性，推荐使用"闭包 + 返回副本"的模式。