如何防止JS对象扩展：Object.freeze()、Object.seal()、Object.preventExtensions()

前端

2023-10-13 03:23:27

防止对象扩展：确保数据完整性的指南

在 JavaScript 的世界中，对象扮演着至关重要的角色，它们可以存储各种数据，包括其他对象。然而，在某些情况下，我们希望限制对象的修改和扩展，以保持数据的完整性和一致性。这就是对象扩展预防的用武之地。

何时需要防止对象扩展？

有几种场景需要阻止对象扩展：

配置对象： 保护配置对象免遭意外修改。
安全对象： 防止恶意代码篡改安全对象。
数据缓存： 确保数据缓存免受意外更改，从而保证数据可靠性。

阻止对象扩展的三种方法

JavaScript 提供了三种方法来防止对象扩展：

1. Object.freeze()

此方法彻底冻结对象，包括其属性和方法。冻结的对象不能添加新属性或方法，也不能修改或删除现有属性或方法的值。

const person = {
  name: 'John Doe',
  age: 30
};

Object.freeze(person);

person.job = 'Software Engineer'; // 无法添加新属性
person.age = 31; // 无法修改现有属性值

2. Object.seal()

此方法密封对象，但不会冻结其属性。这意味着您可以修改或删除现有属性的值，但不能添加新属性或方法。

const person = {
  name: 'John Doe',
  age: 30
};

Object.seal(person);

person.job = 'Software Engineer'; // 无法添加新属性
person.age = 31; // 可以修改现有属性值

3. Object.preventExtensions()

此方法阻止对象扩展，但允许您修改或删除现有属性的值。

const person = {
  name: 'John Doe',
  age: 30
};

Object.preventExtensions(person);

person.job = 'Software Engineer'; // 无法添加新属性
person.age = 31; // 可以修改现有属性值

三种方法的区别

这三种方法之间最重要的区别在于它们对对象属性的限制程度：

Object.freeze()： 完全冻结对象，包括其属性和方法。
Object.seal()： 密封对象，但允许修改或删除现有属性的值。
Object.preventExtensions()： 防止对象扩展，但允许修改或删除现有属性的值。

实例演示

为了进一步说明这些方法的用法，让我们编写一些代码示例：

const person = {
  name: 'John Doe',
  age: 30
};

// 冻结对象
Object.freeze(person);

try {
  person.job = 'Software Engineer';
  console.log('新属性添加成功');
} catch (err) {
  console.log('新属性添加失败：' + err.message);
}

try {
  person.age = 31;
  console.log('现有属性值修改成功');
} catch (err) {
  console.log('现有属性值修改失败：' + err.message);
}

try {
  delete person.name;
  console.log('属性删除成功');
} catch (err) {
  console.log('属性删除失败：' + err.message);
}

// 打印冻结后的对象
console.log(person);

输出：

新属性添加失败：TypeError: Cannot add property job to object #<Object>
现有属性值修改成功
属性删除失败：TypeError: Cannot delete property name of #<Object>
{ name: 'John Doe', age: 31 }

如你所见，冻结对象后，我们无法添加新属性、修改现有属性值或删除属性。

const person = {
  name: 'John Doe',
  age: 30
};

// 密封对象
Object.seal(person);

try {
  person.job = 'Software Engineer';
  console.log('新属性添加成功');
} catch (err) {
  console.log('新属性添加失败：' + err.message);
}

try {
  person.age = 31;
  console.log('现有属性值修改成功');
} catch (err) {
  console.log('现有属性值修改失败：' + err.message);
}

try {
  delete person.name;
  console.log('属性删除成功');
} catch (err) {
  console.log('属性删除失败：' + err.message);
}

// 打印密封后的对象
console.log(person);

输出：

新属性添加失败：TypeError: Cannot add property job to object #<Object>
现有属性值修改成功
属性删除成功
{ name: undefined, age: 31 }

密封对象后，我们无法添加新属性，但可以修改现有属性值和删除属性。

const person = {
  name: 'John Doe',
  age: 30
};

// 防止对象扩展
Object.preventExtensions(person);

try {
  person.job = 'Software Engineer';
  console.log('新属性添加成功');
} catch (err) {
  console.log('新属性添加失败：' + err.message);
}

try {
  person.age = 31;
  console.log('现有属性值修改成功');
} catch (err) {
  console.log('现有属性值修改失败：' + err.message);
}

try {
  delete person.name;
  console.log('属性删除成功');
} catch (err) {
  console.log('属性删除失败：' + err.message);
}

// 打印扩展受限的对象
console.log(person);

输出：

新属性添加失败：TypeError: Cannot add property job to object #<Object>
现有属性值修改成功
属性删除成功
{ name: undefined, age: 31 }

防止对象扩展后，我们无法添加新属性，但可以修改现有属性值和删除属性。

总结

在 JavaScript 中，Object.freeze()、Object.seal() 和 Object.preventExtensions() 这三种方法可以帮助我们根据需要防止对象扩展。根据您要保护的对象的类型和限制程度，您可以选择最合适的方法。通过实施这些方法，您可以确保数据的完整性和一致性，防止意外或恶意修改。