防止对象扩展——Object.freeze() vs Object.seal() vs Object.preventExtensions()
什么是防止对象扩展？
- 完全阻止扩展* 无法添加新属性或更新现有属性或删除现有属性。
- 部分阻止扩展* 能够添加新属性但阻止更新现有属性。允许删除现有属性。* 能够添加新属性但阻止更新现有属性。不允许删除现有属性。
JavaScript 提供了以下三种对象方法来分别满足所有这些场景。
Object.freeze()、Object.preventExtension()和Obejct.seal()
我们将逐一介绍这些方法以及它们如何按此顺序工作。
Object.freeze() 方法
Object.freeze() 方法冻结一个对象。 它提供了完全防止对象扩展的能力。不能将新属性添加到对象，也不能更新现有属性。
const user = {name: 'xiaoming',sex: 'female',school: {name: 'yizhong'}
};
Object.freeze(user);
user.name = 'Jemu';
// 类型错误：无法分配给对象的只读属性“名称”
user.age = 30;
// 类型错误：无法添加属性 age
当 user 对象被 Object.freeze() 方法包装时，添加/更新属性会导致不同的 TypeError 。
一个声明无法分配给对象的只读属性‘名称’，另一个声明TypeError：无法添加属性年龄，对象不可扩展。
这里需要注意的一件事是 Object.freeze() 方法只能“冻结”对象的顶级属性。嵌套对象仍然绑定到扩展。
因此，在前面的示例中， user 中的 school 对象是可扩展的。
user.school.name = 'erzhong';
user.school.address = 'beijing';
如果你想像这样冻结它们，则有必要使用 Object.freeze() 包装嵌套对象。
Object.freeze(user.school);
user.school.name = 'erzhong';
user.school.address = 'beijing';
Object.preventExtension() 方法
Object.preventExtensions() 方法会阻止将新属性添加到对象，但仍然可以更新现有属性。
以下面的例子为例。
const user = {name: 'xiaoming',sex: 'female',school: {name: 'yizhong'}
};
Object.preventExtensions(user);
user.name = 'xiaohong';
// 可以添加
user.age = 30;
// 类型错误：无法添加属性 age
当使用 Object.preventExtensions() 方法包装 user 对象时，允许更新 user 对象的 name 属性，但是当添加名为 age 的新属性时，它会抛出一个 TypeError 。
另外，当使用 Object.preventExtensions() 方法时，允许像这样删除现有的属性。
delete user.name; // 可以删除
与 Object.freeze() 类似， Object.preventExtensions() 方法也不能阻止嵌套对象的扩展。因此，如果是这种情况，则有必要像这样包装嵌套对象。
Object.preventExtensions(user.school);
Object.seal() 方法
最后， Object.seal() 方法密封了一个对象。该方法与 Object.preventExtensions() 的工作方式相同，除了使用 Object.seal() 方法时，无法删除现有属性。
以下面的例子为例。
const user = {name: 'xiaoming',sex: 'female',school: {name: 'yizhong'}
};
Object.seal(user);
user.name = 'xiaohong';
// 可以修改
user.age = 30;
// 失败
但是不允许删除现有属性。
delete user.name;
// TypeError: 不能删除
与 Object.freeze() 和 Object.preventExtensions() 方法类似， Object.seal() 方法也不能阻止嵌套对象的扩展。因此，如果是这种情况，则有必要像这样包装嵌套对象。
Object.seal(user.school);
最后
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
有需要的小伙伴，可以点击下方卡片领取，无偿分享