全面解读 JavaScript 深拷贝的奥秘——遍历、循环引用、包装对象一一攻破

2024-02-15 03:20:00

JavaScript 深拷贝的奥秘

当我们想复制一个 JavaScript 对象时，最直接的想法是使用赋值运算符 (=) 或 Object.assign() 方法。然而，这些方法只会进行浅拷贝，即只复制对象本身的属性，而不会复制其嵌套的对象。如果嵌套对象包含循环引用，使用浅拷贝方法复制对象就会出现问题。

为了解决这个问题，我们需要使用深拷贝方法。深拷贝会复制对象本身及其所有嵌套对象的属性，即使存在循环引用。

深度复制的实现

实现深拷贝的方法有很多，但最常见的方法是使用递归算法。该算法从对象的最外层属性开始，然后对每个属性进行递归调用，直到复制完整个对象。

在实现深拷贝时，需要注意以下几个特殊情况：

循环引用： 如果对象包含循环引用，递归算法会陷入无限循环。为了解决这个问题，我们需要在递归调用之前检查对象是否已经被复制过。如果已经复制过，则直接返回该对象的引用，而不是再次复制。
包装对象： JavaScript 中的某些内置对象，如 Date 对象、String 对象和 Number 对象，都是包装对象。包装对象的行为与普通对象不同，因此我们需要特殊处理。在复制包装对象时，我们需要使用相应的构造函数创建一个新的对象，然后将包装对象的值复制到新对象中。
函数： 函数是 JavaScript 中的一种特殊类型的值。函数不能直接复制，因为函数的引用指向的是函数的代码，而不是函数的实际值。为了复制函数，我们需要创建一个新的函数，然后将函数的代码复制到新函数中。
Symbol： Symbol 是 JavaScript 中的一种特殊类型的值，用于表示唯一标识符。Symbol 不能直接复制，因为 Symbol 的值是不可变的。为了复制 Symbol，我们需要创建一个新的 Symbol，然后将 Symbol 的值复制到新 Symbol 中。
Map 和 Set： Map 和 Set 是 JavaScript 中的两种特殊类型的值，用于存储键值对和唯一值。Map 和 Set 不能直接复制，因为 Map 和 Set 的值是不可变的。为了复制 Map 和 Set，我们需要创建一个新的 Map 或 Set，然后将 Map 或 Set 的值复制到新 Map 或 Set 中。

通用深拷贝解决方案

以下是一个可以用于生产环境的通用深拷贝解决方案：

function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  if (obj instanceof Date) {
    return new Date(obj.getTime());
  }

  if (obj instanceof String || obj instanceof Number || obj instanceof Boolean) {
    return new obj.constructor(obj.valueOf());
  }

  if (obj instanceof Array) {
    return obj.map(item => deepCopy(item));
  }

  if (obj instanceof Map) {
    const newMap = new Map();
    for (const [key, value] of obj) {
      newMap.set(deepCopy(key), deepCopy(value));
    }
    return newMap;
  }

  if (obj instanceof Set) {
    const newSet = new Set();
    for (const value of obj) {
      newSet.add(deepCopy(value));
    }
    return newSet;
  }

  if (obj instanceof Symbol) {
    return Symbol(obj.description);
  }

  if (typeof obj === 'function') {
    return obj.bind({});
  }

  const newObj = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepCopy(obj[key]);
    }
  }
  return newObj;
}