嘿，大家好！我是今天的讲师，让我们一起深入探讨一下JavaScript中const和Object.freeze()这对“冰火两重天”的组合。
讲座主题：const 与对象字面量冻结 (Object.freeze) 的微妙关系
今天，我们不讲教科书式的定义，来点更接地气的。想象一下，const就像是一个严格的门卫，它负责看守着你的变量指向的“房间”的入口，而Object.freeze()则是给这个“房间”里的家具全部贴上封条，禁止任何人挪动它们的位置。
让我们先从最基础的开始：
1. const：守住入口，不代表房间里的东西不变
const声明的变量，意味着这个变量一旦被赋值，就不能再指向另一个不同的值（也就是不能重新赋值）。但！注意这个“但”字，如果这个变量指向的是一个对象，const只能保证你不能让这个变量指向另一个对象，但它管不了对象内部属性的变化。
const myObject = {
name: "小明",
age: 18
};
myObject.age = 20; // 这是允许的! 小明的年龄可以被修改
console.log(myObject); // 输出: { name: '小明', age: 20 }
// myObject = { name: "小红", age: 22 }; // 报错! 不能重新赋值!就像你租了一个房子（myObject），const保证你不能换租到另一个房子，但你在房子里把床搬来搬去，把墙刷成粉红色，const管不着。
2. Object.freeze()：给房间里的家具贴封条
Object.freeze()的作用是冻结一个对象。被冻结的对象不能添加新的属性，不能删除已有属性，也不能修改已有属性的值。更狠的是，它还会阻止对象原型链上的属性被修改。
const myFrozenObject = Object.freeze({
name: "老王",
age: 50
});
// myFrozenObject.age = 55; // 严格模式下报错, 非严格模式下静默失败
// myFrozenObject.address = "隔壁老王家"; // 严格模式下报错, 非严格模式下静默失败
// delete myFrozenObject.name; // 严格模式下报错, 非严格模式下静默失败
console.log(myFrozenObject); // 输出: { name: '老王', age: 50 } (值没有改变)现在，Object.freeze()就像给老王家的家具都贴上了封条，谁也别想动它们一下。
3. const + Object.freeze()：双保险，但有例外
当你把const和Object.freeze()一起使用时，你就得到了一个“表面看起来”非常安全的对象。你不能修改变量的指向，也不能修改对象内部的属性。
const mySuperSafeObject = Object.freeze({
name: "隔壁老李",
address: {
city: "北京",
street: "长安街"
}
});
// mySuperSafeObject.name = "隔壁老赵"; // 报错!
// mySuperSafeObject.address.city = "上海"; // 可以修改! 这是一个重点!
console.log(mySuperSafeObject); // 输出：{ name: '隔壁老李', address: { city: '上海', street: '长安街' } }看到问题了吗？ 即使mySuperSafeObject被冻结了，但是其内部嵌套的对象（address）并没有被冻结。 这就是Object.freeze()的一个重要限制：它只能进行浅冻结（shallow freeze）。
这意味着，Object.freeze()只会冻结对象的第一层属性，如果对象内部还嵌套了其他对象，那么这些嵌套的对象仍然可以被修改。
4. 深度冻结：彻底锁死
为了真正地冻结一个对象，你需要进行深度冻结，也就是递归地冻结对象的所有属性，包括嵌套的对象。
function deepFreeze(obj) {
// 确保传入的是一个对象
if (typeof obj !== "object" || obj === null) {
return obj;
}
// 先冻结当前对象
Object.freeze(obj);
// 递归冻结所有属性
for (let key in obj) {
if (obj.hasOwnProperty(key)) { // 避免遍历到原型链上的属性
deepFreeze(obj[key]);
}
}
return obj;
}
const myReallySafeObject = deepFreeze({
name: "隔壁老孙",
address: {
city: "广州",
street: "珠江新城"
}
});
// myReallySafeObject.address.city = "深圳"; // 报错! 现在修改不了了!
console.log(myReallySafeObject); // 输出：{ name: '隔壁老孙', address: { city: '广州', street: '珠江新城' } }现在，老孙家的所有东西都被彻底锁死了，谁也别想动它们一下。
5. 为什么要冻结对象？
- 防止意外修改： 在大型项目中，避免因疏忽而意外修改对象属性，导致程序出现 Bug。
- 提高性能： 某些 JavaScript 引擎可以对冻结的对象进行优化，提高性能。
- 数据不可变性（Immutability）： 在函数式编程中，数据不可变性是一个重要的概念。冻结对象可以确保数据的不可变性，方便进行状态管理和调试。
- 安全性： 防止恶意代码修改对象属性，提高程序的安全性。
6. 使用场景
- 配置对象： 对于一些配置对象，一旦初始化后就不应该被修改，可以使用
const和Object.freeze()来保护它们。
const config = deepFreeze({
apiUrl: "https://api.example.com",
timeout: 5000
});
// config.timeout = 10000; // 尝试修改配置会报错- Redux 中的状态： 在 Redux 中，状态应该是不可变的。可以使用
Object.freeze()或类似的工具来确保状态的不可变性。 - 缓存数据： 对于一些缓存的数据，可以使用
Object.freeze()来防止意外修改。
7. 陷阱与注意事项
- 性能： 深度冻结可能会影响性能，特别是对于大型对象。
- 严格模式： 在严格模式下，尝试修改冻结对象的属性会抛出错误。在非严格模式下，修改会静默失败，这可能会导致一些难以调试的问题。
- 只读属性：
Object.freeze()与只读属性描述符（writable: false）不同。Object.freeze()会阻止所有属性的修改（包括添加、删除和修改），而只读属性描述符只阻止属性值的修改。 - Proxy：
Object.freeze()不能阻止通过 Proxy 对象对原始对象的修改。
8. 总结
const和Object.freeze()是JavaScript中非常有用的工具，可以帮助我们编写更安全、更可靠的代码。 但是，我们需要了解它们的局限性，并根据实际情况选择合适的冻结方式。
| 特性 | const |
Object.freeze() |
const + Object.freeze() |
const + deepFreeze() |
|---|---|---|---|---|
| 作用 | 变量不能重新赋值 | 对象不能添加、删除、修改属性 | 变量不能重新赋值, 对象第一层属性不能添加、删除、修改。 | 变量不能重新赋值, 对象所有属性(包括嵌套对象)不能添加、删除、修改。 |
| 深度冻结 | No | No (浅冻结) | No (浅冻结) | Yes (深度冻结) |
| 适用场景 | 任何需要防止变量重新赋值的场景 | 需要防止对象被修改的场景 (例如: 配置对象, 缓存数据) | 需要防止对象被修改的场景，但对象内部可能存在嵌套对象，且不需要深度冻结时。 | 需要彻底防止对象被修改的场景, 保证数据的完全不可变性。 (例如: Redux中的状态) |
| 性能影响 | 低 | 低 | 低 | 高 (特别是对于大型对象) |
| 安全性级别 | 低 (对象内部属性可以修改) | 中 (只能防止第一层属性被修改) | 中 (变量指向不可变, 对象第一层属性不可变) | 高 (变量指向不可变, 对象所有属性不可变) |
| 是否能阻止Proxy修改 | 可以阻止直接修改，但不能阻止通过 Proxy 修改 | 可以阻止直接修改，但不能阻止通过 Proxy 修改 | 可以阻止直接修改，但不能阻止通过 Proxy 修改 | 可以阻止直接修改，但不能阻止通过 Proxy 修改 |
温馨提示：
- 不要过度使用
Object.freeze()，特别是在性能敏感的场景下。 - 在开发环境中，可以使用一些工具来检测对象是否被意外修改。
- 记住
Object.freeze()是浅冻结，如果需要深度冻结，需要自己实现或使用现有的库。
好了，今天的讲座就到这里。希望大家对const和Object.freeze()有了更深入的理解。 记住，它们是你的好帮手，但也要小心使用，避免掉入陷阱。下次再见！