JS 深拷贝实现方案对比 - 处理循环引用的结构化克隆算法解析.doc

《JS 深拷贝实现方案对比 - 处理循环引用的结构化克隆算法解析》

在JavaScript开发中，深拷贝是处理复杂数据结构的常见需求。与浅拷贝仅复制引用不同，深拷贝需要递归创建对象的独立副本。然而，当对象存在循环引用（即对象属性相互引用形成闭环）时，传统递归实现会陷入无限循环，导致栈溢出或数据不完整。本文将系统对比多种深拷贝方案，重点解析结构化克隆算法（Structured Clone Algorithm）如何优雅解决循环引用问题，并探讨其实现原理与性能优化。

一、深拷贝基础与循环引用问题

深拷贝的核心目标是创建一个与原对象完全独立的新对象，包括所有嵌套属性。对于简单数据类型（如Number、String），直接赋值即可实现深拷贝；但对于引用类型（Object、Array、Date等），必须递归处理。

循环引用是深拷贝中的典型挑战。例如：

const obj = { name: 'A' };
obj.self = obj; // 对象引用自身

若使用简单递归实现：

function simpleDeepCopy(source) {
  if (typeof source !== 'object' || source === null) {
    return source;
  }
  const target = Array.isArray(source) ? [] : {};
  for (const key in source) {
    target[key] = simpleDeepCopy(source[key]); // 递归调用
  }
  return target;
}

当处理循环引用时，上述代码会因无限递归导致栈溢出。这是因为每次递归调用都会创建新的栈帧，而循环引用使得递归无法终止。

二、传统深拷贝方案对比

1. JSON序列化法

最简单的方法是利用JSON.stringify和JSON.parse：

function jsonDeepCopy(source) {
  return JSON.parse(JSON.stringify(source));
}

优点：实现简单，原生支持。
缺点：

无法处理函数、Symbol、undefined等非JSON兼容类型
会丢失对象原型链信息
无法处理循环引用（会抛出错误）

示例：

const obj = { a: 1 };
obj.self = obj;
jsonDeepCopy(obj); // 抛出TypeError: Converting circular structure to JSON

2. 手动递归+哈希表

为解决循环引用，可在递归过程中使用哈希表（WeakMap）记录已拷贝的对象：

function hashDeepCopy(source, hash = new WeakMap()) {
  if (typeof source !== 'object' || source === null) {
    return source;
  }
  if (hash.has(source)) {
    return hash.get(source); // 返回已拷贝的对象
  }
  const target = Array.isArray(source) ? [] : {};
  hash.set(source, target); // 记录映射关系
  for (const key in source) {
    target[key] = hashDeepCopy(source[key], hash);
  }
  return target;
}

原理：通过WeakMap建立源对象与拷贝对象的映射，当遇到已处理的对象时直接返回缓存结果。
优点：可处理循环引用，保留对象结构。
缺点：

无法拷贝非可枚举属性、Symbol属性
不支持Date、RegExp等特殊对象
性能受哈希表操作影响

3. 第三方库方案

流行库如Lodash的_.cloneDeep通过更复杂的逻辑处理多种边界情况：

function lodashCloneDeep(value) {
  // 简化版实现
  const map = new WeakMap();
  function baseClone(value) {
    if (!isObject(value)) return value;
    const cloned = map.get(value);
    if (cloned) return cloned;
    const obj = Array.isArray(value) ? [] : {};
    map.set(value, obj);
    for (const key in value) {
      obj[key] = baseClone(value[key]);
    }
    return obj;
  }
  return baseClone(value);
}

改进点：

更完善的类型判断（如处理Map、Set）
性能优化（如短路判断）
兼容性处理

三、结构化克隆算法解析

结构化克隆算法（Structured Clone Algorithm）是HTML5规范定义的深拷贝标准，被用于PostMessage API、History API等场景。其核心优势在于：

原生支持循环引用
可拷贝Date、RegExp、Map、Set等特殊对象
保留原型链信息（部分实现）

1. 算法原理

结构化克隆通过两阶段处理实现：

序列化阶段：将对象转换为可传输的中间格式，记录循环引用关系
反序列化阶段：根据中间格式重建对象，恢复引用关系

关键实现细节：

使用WeakMap记录对象引用ID
对特殊对象（如Date）进行类型标记
递归处理属性时检查引用ID

2. 浏览器内置实现

现代浏览器通过`structuredClone()`方法暴露该算法：

const obj = { a: 1 };
obj.self = obj;
const clone = structuredClone(obj);
console.log(clone.self === clone); // true

支持类型：

原始值：Boolean、String、Number等
对象类型：Object、Array、Date、RegExp等
特殊类型：Map、Set、Blob、File等

限制：

不可拷贝函数、DOM节点
跨窗口/iframe时可能受限

3. Node.js实现

Node.js通过`v8.serialize()`和`v8.deserialize()`提供类似功能：

const v8 = require('v8');
const obj = { a: 1 };
obj.self = obj;
const serialized = v8.serialize(obj);
const clone = v8.deserialize(serialized);
console.log(clone.self === clone); // true

与浏览器实现的主要区别：