深入解析 freeze、seal、preventExtensions 的异同，让锁对象不再迷惑

2023-12-23 00:58:59

剖析 JavaScript 的数据保护哨兵：Object.freeze、Object.seal 和 Object.preventExtensions

在前端开发的浩瀚世界中，经常会遇到需要保护数据免遭篡改或意外修改的情况。此时，JavaScript 提供了三种内置方法：Object.freeze、Object.seal 和 Object.preventExtensions，宛若忠诚的哨兵，时刻守护着对象的安全。

概念解析：冻结级别和属性可变性

Object.freeze ：深度冻结对象，使其成为一块坚不可摧的冰。冻结后，对象及其所有属性，包括嵌套的对象和数组，都牢牢锁定，任何修改企图都将以 TypeError 异常告终。
Object.seal ：浅层冻结对象，就好比一潭看似平静的水面。对象属性的值被牢牢封印，无法修改，但仍然允许在对象中游泳，添加或删除属性。不过，一旦属性值被修改，就会触发 TypeError 异常。
Object.preventExtensions ：只冻结对象的外壳，就像给对象戴上了紧箍咒。虽然对象及其属性的值可以自由修改，但禁止添加或删除属性，否则也会引发 TypeError 异常。

异同对比：深入剖析三种方法

特征	Object.freeze	Object.seal	Object.preventExtensions
冻结级别	深度冻结	浅层冻结	无冻结
属性修改	不允许	不允许	允许
添加/删除属性	不允许	允许	不允许
嵌套对象/数组	也被冻结	不受影响	不受影响

应用场景：根据需求合理选择

Object.freeze： 保护敏感数据，例如银行账户信息或用户密码，防止其被恶意篡改；作为函数参数传递时，确保对象不会被意外修改；创建不可变对象，例如 Redux 中的状态对象。
Object.seal： 保护对象属性的值，例如产品价格或用户设置，防止其被意外修改；允许动态地添加或删除属性，适合需要保持对象结构不变但允许添加新属性的场景。
Object.preventExtensions： 防止对象扩展，即无法再添加或删除属性；适合需要保持对象属性数量不变的场景，例如某些配置对象。

代码示例：实际操作演示

const frozenObject = Object.freeze({
  name: 'John',
  age: 30,
  address: {
    street: 'Main Street',
    city: 'New York',
  },
});

try {
  frozenObject.name = 'Jane';
  console.log(frozenObject.name); // TypeError: Cannot assign to read-only property 'name' of object
} catch (error) {
  console.log(error.message);
}