在前端开发中，我们经常需要处理对象的属性和方法，而 ES10 提供了两种方法 Object.freeze() 和 Object.seal() 来保护对象的属性和方法，以防止被误操作或篡改。本文将详细解释这两个方法的用法和注意事项，并带有相关示例代码。
Object.freeze()
Object.freeze() 方法可以冻结对象，使其内容不可更改。具体来说，当对一个对象使用 Object.freeze() 方法时，该对象的属性和方法都不能被修改、添加或删除。如果尝试修改或添加，将会被静默忽略或直接抛出错误。示例代码如下：
// javascriptcn.com 代码示例
const obj = {
name: 'Alex',
age: 30,
};
Object.freeze(obj);
obj.age = 31; // 将被忽略
obj.gender = 'male'; // 将被忽略
delete obj.name; // 将被忽略
console.log(obj); // { name: 'Alex', age: 30 }在上面的示例代码中，我们使用 Object.freeze() 方法冻结了一个对象。尝试修改属性 age 和添加属性 gender 和删除属性 name 时，代码运行时不会报错，但是结果不会产生任何实际的变化。
需要注意的是，Object.freeze() 方法只会冻结直接属性，而不包括嵌套的对象。嵌套的对象需要单独进行冻结。示例代码如下：
// javascriptcn.com 代码示例
const obj = {
name: 'Alex',
age: 30,
address: {
city: 'Shanghai',
country: 'China',
},
};
Object.freeze(obj);
obj.age = 31;
obj.address.city = 'Beijing';
console.log(obj); // { name: 'Alex', age: 30, address: { city: 'Beijing', country: 'China' } }在上面的示例代码中，我们尝试修改属性 age 和嵌套对象属性 address.city。由于嵌套对象 address 并未被冻结，所以其属性 city 可以被修改。
Object.seal()
Object.seal() 方法可以封闭对象，使其属性可读可写但不可删除。相比于 Object.freeze() 方法，Object.seal() 方法更加灵活。示例代码如下：
// javascriptcn.com 代码示例
const obj = {
name: 'Alex',
age: 30,
};
Object.seal(obj);
obj.age = 31;
obj.gender = 'male'; // 将被忽略
delete obj.name; // 将被忽略
console.log(obj); // { name: 'Alex', age: 31 }在上面的示例代码中，我们使用 Object.seal() 方法封闭了一个对象。尝试修改属性 age 时，代码运行时不会报错且结果会被改变。尝试添加属性 gender 和删除属性 name 时，代码运行时同样不会报错，但结果不会产生任何实际的变化。
需要注意的是，Object.seal() 方法同样只会封闭直接属性，而不包括嵌套的对象。嵌套的对象需要单独进行封闭。
总结
通过本文的介绍，我们了解了 ES10 中 Object.freeze() 方法和 Object.seal() 方法的用法和注意事项，并带有相关示例代码。使用这两种方法可以确保对象的属性和方法不会被误操作或篡改，提升代码安全性和稳定性。但需要注意，这两种方法都只会操作直接属性，而不包括嵌套的对象。对于嵌套的对象需要单独进行冻结或封闭。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654781827d4982a6eb1dc0a8