【JavaScript】Object.freeze是什么？

Object.freeze 是 JavaScript 中的一个方法，用于冻结一个对象，使其不可被修改。冻结后的对象具有以下特点：

1. 不可添加新属性。
2. 现有属性不可删除。
3. 现有属性的值不可改变。
4. 现有属性的配置不可更改（如 writable, configurable, enumerable）。

用途

Object.freeze 主要用在以下场景：

• 保护数据不被意外修改。
• 创建不可变数据结构。
• 优化性能（某些引擎可以对冻结的对象进行优化）。

如何使用 Object.freeze

冻结对象

你可以使用 Object.freeze 方法来冻结一个对象：

const obj = {
    
    
  name: 'Alice',
  age: 25,
};

const frozenObj = Object.freeze(obj);

冻结后的效果

一旦对象被冻结后，就不能再对其进行任何修改。以下是一些尝试修改冻结对象的例子：

1. 添加新属性

   frozenObj.newProp = 'value'; // 不生效，frozenObj 新增属性无效
   

2. 删除现有属性

   delete frozenObj.age; // 不生效，age 属性仍然存在
   

3. 修改现有属性的值

   frozenObj.name = 'Bob'; // 不生效，name 的值仍然是 'Alice'
   

4. 修改现有属性的配置

   Object.defineProperty(frozenObj, 'age', {
         
          writable: false }); // 不生效
   

示例代码

创建并冻结对象

const person = {
    
    
  name: 'Alice',
  age: 25,
};

const frozenPerson = Object.freeze(person);

console.log(frozenPerson); // 输出 "{ name: 'Alice', age: 25 }"

尝试修改冻结后的对象

frozenPerson.name = 'Bob'; // 不生效
delete frozenPerson.age; // 不生效

console.log(frozenPerson); // 输出 "{ name: 'Alice', age: 25 }"

检查是否冻结

你可以使用 Object.isFrozen 方法检查一个对象是否已经被冻结。

检查冻结状态

function isFrozen(obj) {
    
    
  if (!Object.isFrozen) {
    
    
    throw new Error('当前环境不支持 Object.isFrozen 方法');
  }

  return Object.isFrozen(obj);
}

console.log(isFrozen(frozenPerson)); // 输出 true
console.log(isFrozen(person));       // 输出 false （未冻结）

注意事项

1. 浅层冻结：Object.freeze 只能冻结顶层属性，对于嵌套的对象或数组不起作用。

2. 深拷贝冻结：如果需要完全冻结一个复杂对象，可以考虑使用深拷贝后再冻结。

浅层冻结 vs 深层冻结

const nestedObj = {
    
    
  name: 'Alice',
  details: {
    
    
    age: 25,
    city: 'New York'
  }
};

const frozenNestedObj = Object.freeze(nestedObj);

nestedObj.details.age = 30; // 修改成功！因为 details 是一个对象

console.log(nestedObj); // 输出 "{ name: 'Alice', details: { age: 30, city: 'New York' } }"

深拷贝冻结

const deepFreeze = (obj) => {
    
    
  for (let key in obj) {
    
    
    if (typeof obj[key] === 'object' && obj[key] !== null) {
    
    
      deepFreeze(obj[key]);
    }
  }
  
  return Object.freeze(obj);
};

const deepFrozenNestedObj = deepFreeze(nestedObj);

deepFrozenNestedObj.details.age = 30; // 不生效！

console.log(deepFrozenNestedObj); // 输出 "{ name: 'Alice', details: { age: 25, city: 'New York' } }"

总结

Object.freeze 是一种强大的工具，用于保护对象不受意外修改。它适用于多种场景，特别是在需要保持数据不变的情况下。