JavaScript中防止对象扩展的三种方法

防止对象扩展——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的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享