浅冻结与深冻结
了解冻结操作会深入到哪一层。
浅冻结与深冻结 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。
冻结是浅层的
Object.freeze 只会锁定对象的顶层。它所引用的任何嵌套对象或数组仍然完全可以修改。
这会让许多开发者感到意外，并导致隐蔽的错误。
证明浅层限制
冻结一个包含嵌套对象的对象。顶层会被锁定，但嵌套对象仍然可以改变。
const user = Object.freeze({
name: 'Ada',
address: { city: 'London' }
});
user.name = 'Grace';
user.address.city = 'Paris';
console.log(user.name);
console.log(user.address.city);嵌套数组也一样
被冻结对象中的数组同样不会受到保护。您可以对它们执行 push、弹出元素以及重新赋值元素等操作。
const state = Object.freeze({ tags: ['a', 'b'] });
state.tags.push('c');
state.tags[0] = 'X';
console.log(state.tags);isFrozen 可以确认这一点
嵌套对象报告 isFrozen 为 false，这确认了冻结并未深入到对象内部。
const obj = Object.freeze({ inner: { v: 1 } });
console.log(Object.isFrozen(obj));
console.log(Object.isFrozen(obj.inner));编写 deepFreeze
要锁定所有内容，请使用递归：先冻结对象，然后冻结每个嵌套对象属性。这就是深度冻结。
function deepFreeze(obj) {
for (const key of Object.keys(obj)) {
const value = obj[key];
if (value && typeof value === 'object') {
deepFreeze(value);
}
}
return Object.freeze(obj);
}
const data = deepFreeze({ a: { b: { c: 1 } } });
data.a.b.c = 999;
console.log(data.a.b.c);对数组使用 deepFreeze
数组也是对象，因此同样的递归可以冻结数组。之后，在每个深度上，push 和元素写入都会被阻止。
function deepFreeze(obj) {
for (const key of Object.keys(obj)) {
const value = obj[key];
if (value && typeof value === 'object') deepFreeze(value);
}
return Object.freeze(obj);
}
const state = deepFreeze({ list: [1, 2, 3] });
state.list.push(4);
state.list[0] = 99;
console.log(state.list);验证深度冻结
深度冻结后，每个嵌套对象报告 isFrozen 的结果都会是 true。
function deepFreeze(obj) {
for (const key of Object.keys(obj)) {
const v = obj[key];
if (v && typeof v === 'object') deepFreeze(v);
}
return Object.freeze(obj);
}
const o = deepFreeze({ a: { b: 1 } });
console.log(Object.isFrozen(o));
console.log(Object.isFrozen(o.a));防范循环引用
如果对象引用了自身，简单的递归会无限循环。跳过已经冻结的对象即可确保安全。
function deepFreeze(obj) {
if (Object.isFrozen(obj)) return obj;
for (const key of Object.keys(obj)) {
const v = obj[key];
if (v && typeof v === 'object') deepFreeze(v);
}
return Object.freeze(obj);
}
const a = { name: 'a' };
a.self = a;
deepFreeze(a);
console.log(Object.isFrozen(a.self));深度冻结的代价
深度冻结会访问每个嵌套值，因此对于大型结构会消耗时间和内存。请只冻结真正需要保护的内容，例如共享 config 或常量。
function deepFreeze(obj) {
if (Object.isFrozen(obj)) return obj;
Object.keys(obj).forEach(k => {
const v = obj[k];
if (v && typeof v === 'object') deepFreeze(v);
});
return Object.freeze(obj);
}
const small = deepFreeze({ a: 1, b: { c: 2 } });
console.log('frozen deeply:', Object.isFrozen(small.b));何时浅层冻结就足够
如果对象只包含原始值，那么浅层的 Object.freeze 已经可以完全保护它。只有存在嵌套对象或数组时，深度冻结才有意义。
const flat = Object.freeze({ a: 1, b: 'two', c: true });
flat.a = 100;
console.log(flat.a);
console.log(Object.isFrozen(flat));为何这很重要
理解浅层与深度冻结的区别，可以避免误以为被冻结的对象完全不可变。对于嵌套数据，请使用递归。作为修改的替代方案，下一些课程会介绍通过 copy 而不是冻结来实现不可变更新的模式。
const config = Object.freeze({ db: { host: 'local' } });
config.db.host = 'changed';
console.log('shallow freeze leaked:', config.db.host);快速检查
执行 Object.freeze({ a: { b: 1 } }) 后，您能修改嵌套的 b 吗？
回顾：浅层与深度冻结
您已经了解了冻结的深度限制：
Object.freeze是浅层的；嵌套对象和数组仍然可以修改。- deepFreeze 会使用递归锁定每一层。
- 请通过跳过已经冻结的对象来防范循环引用。
- 深度冻结需要付出代价，因此请只冻结需要保护的内容。
常见问题解答
「浅冻结与深冻结」课时是免费的吗？
是的 — 「浅冻结与深冻结」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。
「浅冻结与深冻结」这节课中我会学到什么？
了解冻结操作会深入到哪一层。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 JavaScript Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「浅冻结与深冻结」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 JavaScript Academy 课中编写并运行代码吗？
能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。