JavaScript深拷贝与循环引用的处理方案

2025-12-21 7571阅读

在JavaScript开发中，深拷贝是复制对象（包括嵌套对象）所有层级的操作，而循环引用（对象引用自身或形成引用闭环）会给深拷贝带来挑战。本文将解析循环引用的本质，分析传统深拷贝的缺陷，并提供可靠的解决方案。

一、循环引用的本质与场景

循环引用指对象的某个属性直接或间接指向自身，例如：

const obj = { name: "demo" };
obj.self = obj; // obj的self属性指向obj自身，形成循环引用

更复杂的场景包括树形结构的循环引用（如链表的环）、对象间的相互引用（a.b = b; b.a = a;）。这类结构在序列化（如JSON.stringify）或递归拷贝时会触发无限递归，导致程序崩溃或错误。

二、传统深拷贝的缺陷

常见的递归深拷贝实现（如以下代码）在遇到循环引用时会栈溢出：

function naiveDeepClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj; // 基本类型或null，直接返回
  }
  const newObj = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    newObj[key] = naiveDeepClone(obj[key]); // 递归拷贝属性
  }
  return newObj;
}

当传入含循环引用的对象（如上述obj）时，naiveDeepClone会因无限递归导致栈溢出（Maximum call stack size exceeded）。

三、解决循环引用的核心思路

要解决循环引用，需记录已拷贝的对象，当再次遇到同一对象时直接返回之前的拷贝结果，避免无限递归。核心逻辑是：

用缓存容器（如Map或WeakMap）存储“原对象→拷贝对象”的映射；
拷贝前检查原对象是否已在缓存中，若存在则直接返回对应的拷贝对象。

四、带循环引用处理的深拷贝实现

以下是基于WeakMap的深拷贝实现（WeakMap不会阻止原对象被垃圾回收，更适合此场景）：

/**
 * 处理循环引用的深拷贝函数
 * @param {any} obj - 待拷贝的对象
 * @param {WeakMap} hash - 缓存已拷贝对象的映射，避免循环引用
 * @returns {any} 拷贝后的新对象
 */
function deepCloneWithCycle(obj, hash = new WeakMap()) {
  // 处理基本类型、null、函数（函数一般按引用传递，直接返回）
  if (obj === null || typeof obj !== 'object' || typeof obj === 'function') {
    return obj;
  }
  // 检查是否已拷贝过该对象（解决循环引用）
  if (hash.has(obj)) {
    return hash.get(obj); // 返回之前拷贝的结果
  }
  // 初始化新对象（区分数组和普通对象）
  const newObj = Array.isArray(obj) ? [] : {};
  hash.set(obj, newObj); // 记录当前对象的拷贝映射

  // 遍历自身属性（排除原型链属性）
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      // 递归拷贝属性，传递缓存容器
      newObj[key] = deepCloneWithCycle(obj[key], hash);
    }
  }
  // 处理Symbol类型的键（可选，根据需求扩展）
  const symbols = Object.getOwnPropertySymbols(obj);
  symbols.forEach((sym) => {
    newObj[sym] = deepCloneWithCycle(obj[sym], hash);
  });

  return newObj;
}

代码逻辑解析：

缓存检查：通过hash.has(obj)判断原对象是否已被拷贝，若已拷贝则直接返回缓存的新对象。
类型处理：区分数组和普通对象，分别初始化新容器；同时处理Symbol类型的键（需遍历Object.getOwnPropertySymbols）。
递归拷贝：对每个属性递归调用deepCloneWithCycle，并传递缓存容器hash，确保嵌套对象的循环引用也被处理。

五、测试与验证

测试循环引用场景：

// 构造循环引用对象
const cycleObj = { name: "test" };
cycleObj.self = cycleObj; // 自身引用

// 执行深拷贝
const cloned = deepCloneWithCycle(cycleObj);

// 验证结果
console.log(cloned.self === cloned); // 输出 true（新对象的self属性指向自身）
console.log(cloned.name); // 输出 "test"（属性拷贝正确）

该测试中，cloned.self与cloned严格相等，说明循环引用被正确处理，且属性值拷贝无误。

六、对比其他方案的局限性

JSON序列化方案（JSON.parse(JSON.stringify(obj))）：
该方法在遇到循环引用时会直接抛出错误（如TypeError: Converting circular structure to JSON），且无法处理函数、undefined、Symbol等类型的属性。
结构化克隆（如MessageChannel）：
通过postMessage触发的结构化克隆会自动处理循环引用，但兼容性有限（如小程序环境可能不支持），且无法克隆函数、Symbol等。
第三方库（如lodash.cloneDeep）：
lodash的cloneDeep内部已处理循环引用，适合快速开发，但需引入额外依赖。