Object.freeze()注意事项

Richar2026-06-15 15:33

Object.freeze()：运行时的锁

js 复制代码

const config = { apiKey: 'sk-xxxxxx', timeout: 5000 }; 

Object.freeze(config);

config.timeout = 3000;
console.log(config.timeout); // 5000，没变（严格模式会抛 TypeError）

但 freeze 有个暗坑：只锁表面

js 复制代码

const config = { 
    env: 'production', 
    db: { host: '127.0.0.1', port: 3306 } 
}; 

Object.freeze(config); 

config.db.port = 5432; 
console.log(config.db.port); // 5432 ------ 改成功了

config.db 的引用被冻住了，但 db 对象本身没有被冻结，内部属性随便改。

所有需要有深层的冻结，只能手写一个方法实现

js 复制代码

function deepFreeze(obj) { 
    Object.getOwnPropertyNames(obj).forEach(key => { const val = obj[key]; 
        if (val && typeof val === 'object') deepFreeze(val);
    }); 
    return Object.freeze(obj); 
} 
deepFreeze(config); 
config.db.port = 5432; // 失效 console.log(config.db.port); // 3306

性能优化点

传入前 Object.freeze()，Vue 会跳过响应式代理，渲染快一截