Object.freeze用于实现对象浅层不可变,比const更严格地防止属性增删改及描述符变更,但不冻结嵌套对象;需配合const、严格模式、立即冻结和深度冻结策略使用。

Object.freeze 是 JavaScript 中实现对象“浅层不可变”的标准方法,适用于定义前端全局常量配置对象——它能阻止新增、删除、修改属性,也能防止属性描述符被更改,但需注意其局限性(如不冻结嵌套对象)。
为什么用 Object.freeze 而不是 const?
const 只保证变量绑定不可重新赋值,不保证对象内容不可变。 例如:
const CONFIG = { api: 'https://api.example.com' };<br>CONFIG.api = 'https://hacked.com'; // ✅ 合法!对象属性仍可改<br>CONFIG.newKey = 'xxx'; // ✅ 合法!仍可添加属性
而 Object.freeze 作用于对象本身,从运行时层面锁定其结构和属性值:
立即学习“Java免费学习笔记(深入)”;
const CONFIG = Object.freeze({<br> API_URL: 'https://api.example.com',<br> TIMEOUT: 5000,<br> FEATURES: ['auth', 'analytics']<br>});<br><br>CONFIG.API_URL = 'x'; // ❌ 无效(非严格模式下静默失败;严格模式抛 TypeError)<br>delete CONFIG.TIMEOUT; // ❌ 失败<br>CONFIG.NEW = 1; // ❌ 失败
正确声明全局常量配置的三步实践
-
立即冻结,避免中间可变窗口:在对象创建后立刻调用
Object.freeze(),不要分两步写(如先赋值再 freeze),防止竞态或误操作。 -
配合 const 声明 + 严格模式:在文件顶部启用
'use strict';,确保尝试修改时抛出明确错误,便于开发阶段及时发现。 -
导出时保持冻结状态:ESM 中直接导出冻结对象(而非导出变量再 freeze),例如:
export const APP_CONFIG = Object.freeze({<br> ENV: 'production',<br> CDN: 'https://cdn.example.com'<br>});
关键限制与应对:嵌套对象仍可变
Object.freeze 是浅冻结 —— 它只冻结顶层属性,不递归冻结嵌套对象或数组。例如:
const CONFIG = Object.freeze({<br> server: { host: 'a.com', port: 80 },<br> flags: ['debug']<br>});<br><br>CONFIG.server.host = 'b.com'; // ❌ 顶层 server 属性不可改,但…<br>CONFIG.server.port = 443; // ✅ 实际上会成功!因为 server 对象本身未被 freeze
解决办法:
• 手动深度冻结(简单场景可用递归函数)
• 使用第三方库如 deep-freeze(注意仅用于开发/测试,不建议生产环境运行时调用)
• 更推荐:用 JSON 模式 + 构建时校验,或把嵌套结构拆为独立冻结对象,例如:
export const SERVER_CONFIG = Object.freeze({ host: 'a.com', port: 80 });<br>export const APP_CONFIG = Object.freeze({<br> server: SERVER_CONFIG, // 引用已冻结对象<br> flags: Object.freeze(['debug'])<br>});
进阶保障:类型 + 构建时检查
仅靠 Object.freeze 无法阻止编译/打包阶段的误改。建议组合使用:
• TypeScript:定义 readonly 接口或 as const 断言,让类型系统提前报错
• Webpack/Vite 插件(如 webpack-define-plugin)将常量内联为字面量,彻底消除运行时对象
• CI 中加入脚本扫描源码,禁止对已冻结配置对象进行赋值操作(正则匹配 CONFIG\.xxx = 类模式)


















