如何使用纯JavaScript手写递归函数实现完美支持循环引用的深拷贝-js教程-PHP中文网

普通递归深拷贝会因循环引用（如自引用或相互引用）导致无限递归，引发栈溢出错误；weakmap通过以源对象为key缓存克隆体，实现首次访问标记与占位机制，精准避免重复处理和内存泄漏。

如何使用纯javascript手写递归函数实现完美支持循环引用的深拷贝

要手写一个支持循环引用的深拷贝函数，核心在于用一个弱映射（WeakMap）记录已拷贝过的对象/数组，避免无限递归和栈溢出。不能只靠类型判断和递归，必须做“首次访问标记”。

为什么普通递归深拷贝会崩溃？

当对象存在自引用（如 a.b = a）或两个对象相互引用（a.b = b; b.a = a）时，纯递归会反复进入同一对象，导致调用栈爆满、浏览器卡死或报 RangeError: Maximum call stack size exceeded。

用 WeakMap 缓存已拷贝的源对象

WeakMap 是关键：它以原始对象为 key，新克隆对象为 value，既不会阻止垃圾回收，又能精准识别“这个源对象我是不是处理过了”。不能用 Map 或普通对象模拟，否则会造成内存泄漏或 key 转字符串后全部变成 [object Object]。

实现要点：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

每次进入拷贝前，先查 WeakMap 中是否已有该源对象的克隆结果，有就直接返回，跳过递归
对新对象，先在 WeakMap 中占位（赋值空对象或空数组），再递归填充属性——这样即使内部引用自己，也能拿到占位对象，不会死循环
只对 object、array、date、regexp、map、set 等可遍历/需特殊处理的类型做缓存；基本类型（string/number/boolean/null/undefined/symbol/bigint）直接返回，无需缓存

完整可运行代码（ES6+，无依赖）

以下函数支持：对象、数组、Date、RegExp、Map、Set、ArrayBuffer、TypedArray、Blob（仅浅拷）、URL，并正确处理循环引用、Symbol 键、不可枚举属性（可选）：

function deepClone(obj, seen = new WeakMap()) {
  // 基本类型和 null 直接返回
  if (obj === null || typeof obj !== 'object') return obj;

  // 已处理过，直接返回克隆体（解决循环引用）
  if (seen.has(obj)) return seen.get(obj);

  // 区分类型，创建对应的新实例
  let clone;
  const Ctor = obj.constructor;
  
  if (obj instanceof Date) {
    clone = new Date(obj.getTime());
  } else if (obj instanceof RegExp) {
    clone = new RegExp(obj.source, obj.flags);
  } else if (obj instanceof ArrayBuffer) {
    clone = obj.slice();
  } else if (Array.isArray(obj)) {
    clone = [];
  } else if (obj instanceof Map) {
    clone = new Map();
  } else if (obj instanceof Set) {
    clone = new Set();
  } else if (ArrayBuffer.isView(obj)) {
    const buf = obj.buffer.slice();
    clone = new obj.constructor(buf, obj.byteOffset, obj.length);
  } else {
    clone = Object.create(Object.getPrototypeOf(obj));
  }

  // 立即缓存，防止递归时重复处理
  seen.set(obj, clone);

  // 拷贝属性（包括 Symbol 键）
  const keys = Reflect.ownKeys(obj);
  for (const key of keys) {
    const desc = Object.getOwnPropertyDescriptor(obj, key);
    if (desc && !desc.enumerable && key !== Symbol.toStringTag) continue;
    clone[key] = deepClone(obj[key], seen);
  }

  // 特殊结构单独处理
  if (obj instanceof Map) {
    obj.forEach((v, k) => clone.set(k, deepClone(v, seen)));
  } else if (obj instanceof Set) {
    obj.forEach(v => clone.add(deepClone(v, seen)));
  }

  return clone;
}

使用示例与验证

测试循环引用是否生效：

const a = { name: 'a' };
const b = { name: 'b', ref: a };
a.ref = b; // 形成 a ⇄ b 循环

const copied = deepClone(a);
console.log(copied.ref.ref === copied); // true，结构一致且不爆栈
console.log(copied === a); // false
console.log(copied.ref === b); // false

注意：该实现不代理 Proxy 对象（Proxy 语义复杂，通常应由业务层决定是否解包），也不深拷贝函数（函数默认按引用保留，符合多数场景预期）。如需拷贝函数，需额外处理 obj instanceof Function 分支，但一般不推荐。