【面试】深入理解 JavaScript 中的 Object.freeze()

引言

在 JavaScript 的开发过程中，对象的不可变性（immutability）是一个非常重要的概念。不可变对象不仅可以提高代码的可预测性和可维护性，还能有效防止意外的数据修改。本文将深入探讨 JavaScript 中用于实现对象不可变性的一个重要方法——Object.freeze()，并通过实际示例展示其用法、优缺点以及实际应用场景。

什么是 Object.freeze()？

Object.freeze() 是 JavaScript 提供的一个内置方法，用于冻结一个对象。被冻结的对象具有以下特性：

1. 不可扩展：不能添加新的属性。
2. 不可配置：不能删除现有属性，也不能更改属性的描述符（如 writable 或 configurable）。
3. 只读属性：现有属性的值不能被修改。

简而言之，Object.freeze() 将一个对象变成一个完全不可变的实体。

基本用法

语法

Object.freeze(obj)

• 参数：obj 要冻结的对象。
• 返回值：被冻结的对象。

示例

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

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

// 尝试修改属性
user.age = 30; // 无效
console.log(user.age); // 输出: 25

// 尝试添加新属性
user.gender = 'female'; // 无效
console.log(user.gender); // 输出: undefined

// 尝试删除属性
delete user.name; // 无效
console.log(user.name); // 输出: Alice

在上述示例中，user 对象被冻结后，任何尝试修改、添加或删除属性的操作都不会生效。

深度冻结（Deep Freeze）

Object.freeze() 仅冻结对象本身及其直接属性。如果对象属性本身也是对象，这些嵌套的对象不会被冻结。为了实现深度冻结，需要递归地冻结每个嵌套对象。

示例

function deepFreeze(obj) {
  Object.freeze(obj);
  Object.getOwnPropertyNames(obj).forEach(prop => {
    if (
      obj[prop] !== null &&
      (typeof obj[prop] === 'object' || typeof obj[prop] === 'function') &&
      !Object.isFrozen(obj[prop])
    ) {
      deepFreeze(obj[prop]);
    }
  });
}

const config = {
  user: {
    name: 'Bob',
    address: {
      city: 'New York',
      zip: '10001'
    }
  },
  version: '1.0.0'
};

deepFreeze(config);

// 尝试修改嵌套属性
config.user.address.city = 'Los Angeles'; // 无效
console.log(config.user.address.city); // 输出: New York

// 尝试添加新属性
config.user.email = 'bob@example.com'; // 无效
console.log(config.user.email); // 输出: undefined

在上述示例中，deepFreeze 函数递归地冻结了嵌套的对象 address 和 user，确保整个配置对象完全不可变。

与其他相关方法的比较

4.1 Object.preventExtensions()

Object.preventExtensions() 方法用于阻止对象添加新属性，但允许修改和删除现有属性。

const obj = { prop: 1 };
Object.preventExtensions(obj);
obj.newProp = 2; // 无效
console.log(obj.newProp); // 输出: undefined
obj.prop = 3; // 有效
console.log(obj.prop); // 输出: 3
delete obj.prop; // 有效
console.log(obj.prop); // 输出: undefined

4.2 Object.seal()

Object.seal() 方法用于密封对象，阻止添加新属性和删除现有属性，但允许修改现有属性的值。

const obj = { prop: 1 };
Object.seal(obj);
obj.newProp = 2; // 无效
console.log(obj.newProp); // 输出: undefined
obj.prop = 3; // 有效
console.log(obj.prop); // 输出: 3
delete obj.prop; // 无效
console.log(obj.prop); // 输出: 3

4.3 Object.freeze() vs Object.seal()

• Object.freeze()：完全冻结对象，包括属性值，使其不可修改。
• Object.seal()：密封对象，阻止添加和删除属性，但允许修改属性值。

实际应用场景

1. 常量对象

在应用程序中定义常量对象时，使用 Object.freeze() 可以确保其值不被意外修改。

const CONFIG = Object.freeze({
  API_URL: 'https://api.example.com',
  VERSION: '1.0.0'
});

2. 防止意外修改

在某些库或框架中，为了防止用户意外修改内部对象，可以使用 Object.freeze() 来冻结对象。

function createImmutableObject(data) {
  return Object.freeze(data);
}

const immutableData = createImmutableObject({ key: 'value' });
immutableData.key = 'newValue'; // 无效
console.log(immutableData.key); // 输出: 'value'

3. 不可变数据结构

在函数式编程中，使用不可变的数据结构可以提高代码的可预测性和可维护性，Object.freeze() 可以作为实现不可变性的一个工具。

const initialState = Object.freeze({
  todos: []
});

function addTodo(state, todo) {
  return Object.freeze({
    ...state,
    todos: [...state.todos, todo]
  });
}

const newState = addTodo(initialState, { task: 'Learn Object.freeze()', completed: false });
console.log(newState.todos); // 输出: [{ task: 'Learn Object.freeze()', completed: false }]

注意事项

1. 浅冻结：Object.freeze() 是浅冻结，仅冻结对象本身，不递归冻结嵌套的对象。

2. 非对象类型：如果传入的参数不是对象类型，Object.freeze() 不起作用，返回传入的参数本身。

3. 不可变性：冻结对象后，对象的引用仍然可以更改。例如：

   const obj = { prop: 1 };
   const ref = obj;
   Object.freeze(obj);
   ref.prop = 2; // 无效，因为 obj 被冻结
   console.log(obj.prop); // 输出: 1
   

   但如果引用被重新赋值，则可以更改：

   let obj = { prop: 1 };
   let ref = obj;
   Object.freeze(obj);
   ref = { prop: 2 }; // 有效，因为 ref 被重新赋值
   console.log(obj.prop); // 输出: 1
   

4. 性能影响：冻结对象会阻止 JavaScript 引擎的某些优化，可能在性能关键的应用中产生轻微的性能影响。

总结

Object.freeze() 是一个强大的工具，用于创建不可变对象，防止对象被修改。然而，需要注意其浅冻结的特性，以及在处理嵌套对象时需要递归冻结以实现深度冻结。在设计应用程序时，合理使用 Object.freeze() 可以提高代码的健壮性和安全性。

通过深入理解 Object.freeze()，开发者可以更好地控制对象的可变性，从而编写出更加可靠和高效的代码。希望本文对你理解和使用 Object.freeze() 有所帮助！