在前端开发中，JavaScript 是最常用的编程语言之一。ECMAScript 是 JavaScript 的标准化版本，每年都会推出新的版本，其中 ECMAScript 2016 引入了 Object.freeze() 方法。本文将介绍 Object.freeze() 方法的使用及常见错误，帮助读者更好地理解该方法的作用和使用方法。
Object.freeze() 方法的作用
Object.freeze() 方法可以冻结一个对象，使其不可修改。当一个对象被冻结后，无法添加、删除或修改该对象的属性和方法。这个方法可以保护对象的数据完整性，防止意外修改对象的值。
Object.freeze() 方法的使用
Object.freeze() 方法接受一个对象作为参数，返回一个被冻结的对象。被冻结的对象可以通过 Object.isFrozen() 方法来判断是否被冻结。
示例代码如下：
// javascriptcn.com 代码示例
const obj = {
name: '张三',
age: 18
};
Object.freeze(obj);
console.log(Object.isFrozen(obj)); // true
obj.name = '李四'; // TypeError: Cannot assign to read only property 'name' of object在上面的示例代码中，我们创建了一个对象 obj，然后使用 Object.freeze() 方法将其冻结。最后我们尝试修改 obj 的属性 name 的值，会抛出 TypeError 的错误，因为该对象已被冻结，无法修改。
常见错误
Object.freeze() 方法只能冻结对象的第一层属性
Object.freeze() 方法只能冻结对象的第一层属性，如果对象的属性值是对象，那么该对象的属性值仍然可以修改。示例代码如下：
// javascriptcn.com 代码示例
const obj = {
name: '张三',
age: 18,
address: {
province: '广东',
city: '深圳'
}
};
Object.freeze(obj);
obj.name = '李四'; // TypeError: Cannot assign to read only property 'name' of object
obj.address.city = '广州'; // 不会报错
console.log(obj.address.city); // '广州'在上面的示例代码中，我们创建了一个对象 obj，其中 address 是一个对象。我们使用 Object.freeze() 方法将 obj 冻结，然后尝试修改 obj 的属性 name 的值，会抛出 TypeError 的错误，因为该对象已被冻结，无法修改。但是我们尝试修改 obj 的属性 address 的属性 city 的值，不会抛出错误，因为 address 对象没有被冻结。
Object.freeze() 方法只能冻结对象的属性值，无法冻结属性名
Object.freeze() 方法只能冻结对象的属性值，无法冻结属性名。示例代码如下：
// javascriptcn.com 代码示例
const obj = {
name: '张三',
age: 18
};
Object.freeze(obj);
delete obj.name; // TypeError: Cannot delete property 'name' of #<Object>
obj.gender = '男'; // TypeError: Cannot add property gender, object is not extensible在上面的示例代码中，我们创建了一个对象 obj，并使用 Object.freeze() 方法将其冻结。然后尝试删除 obj 的属性 name 和添加属性 gender，会抛出 TypeError 的错误，因为该对象已被冻结，无法删除或添加属性。
总结
Object.freeze() 方法可以冻结一个对象，保护对象的数据完整性，防止意外修改对象的值。但是需要注意的是，Object.freeze() 方法只能冻结对象的第一层属性值，无法冻结属性名，也无法冻结对象的属性值是对象的情况。在使用 Object.freeze() 方法时，需要注意这些细节，避免出现意外的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650a4edd95b1f8cacd4a7a35