在JavaScript开发中，深拷贝是一个常见且重要的操作。当我们需要完全复制一个对象，包括其所有嵌套属性和引用时，简单的浅拷贝（如使用Object.assign或展开运算符）往往无法满足需求。特别是当对象中存在循环引用（即对象属性间接或直接引用了自身）时，普通的深拷贝实现可能会导致栈溢出或无限循环。本文将详细探讨如何在JavaScript中实现一个能够处理循环引用的深拷贝函数，并分析其背后的原理和实现细节。
一、深拷贝的基本概念
深拷贝是指创建一个新对象，该对象与原对象完全独立，包括其所有嵌套对象和数组。修改新对象不会影响原对象，反之亦然。这与浅拷贝形成对比，浅拷贝仅复制对象的顶层属性，对于嵌套对象或数组，浅拷贝会复制引用而非值。
// 浅拷贝示例
const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };
shallowCopy.b.c = 3;
console.log(original.b.c); // 输出 3，原对象被修改
在需要完全隔离对象修改的场景下，深拷贝是必要的。例如，在状态管理、不可变数据结构或复杂对象传递时，深拷贝可以避免意外的副作用。
二、循环引用的挑战
循环引用是指对象中的某个属性直接或间接引用了对象自身。例如：
const obj = { a: 1 };
obj.self = obj; // 循环引用
当尝试对这样的对象进行深拷贝时，普通的递归实现会陷入无限循环，最终导致栈溢出或内存泄漏。例如，以下实现无法处理循环引用：
function deepCopyNaive(obj) {
if (typeof obj !== 'object' || obj === null) {
return obj;
}
const copy = Array.isArray(obj) ? [] : {};
for (const key in obj) {
copy[key] = deepCopyNaive(obj[key]); // 无限递归
}
return copy;
}
const circularObj = { a: 1 };
circularObj.self = circularObj;
const copy = deepCopyNaive(circularObj); // 栈溢出
因此，实现深拷贝函数时，必须解决循环引用的问题。
三、处理循环引用的解决方案
解决循环引用的核心思想是记录已拷贝的对象，并在遇到相同引用时直接返回已拷贝的副本。这可以通过WeakMap或普通Map来实现。以下是具体实现步骤：
1. 使用WeakMap记录已拷贝对象
WeakMap的键必须是对象，且不会阻止垃圾回收。这使得它非常适合用于跟踪已拷贝的对象，而不会导致内存泄漏。
function deepCopyWithWeakMap(obj) {
const map = new WeakMap();
function copy(value) {
if (typeof value !== 'object' || value === null) {
return value;
}
// 检查是否已拷贝过
if (map.has(value)) {
return map.get(value);
}
const newObj = Array.isArray(value) ? [] : {};
map.set(value, newObj); // 记录已拷贝的对象
for (const key in value) {
if (value.hasOwnProperty(key)) {
newObj[key] = copy(value[key]);
}
}
return newObj;
}
return copy(obj);
}
此实现可以正确处理循环引用，但存在一些限制：
- WeakMap的键必须是对象，因此无法处理原始值（如数字、字符串）的循环引用（尽管原始值本身不会形成循环引用）。
- 对于跨执行环境（如iframe）的对象，WeakMap可能无法正常工作。
2. 使用普通Map处理更多场景
如果需要支持更多场景（如处理跨环境对象），可以使用普通Map。但需要注意手动清理Map以避免内存泄漏。
function deepCopyWithMap(obj) {
const map = new Map();
function copy(value) {
if (typeof value !== 'object' || value === null) {
return value;
}
if (map.has(value)) {
return map.get(value);
}
const newObj = Array.isArray(value) ? [] : {};
map.set(value, newObj);
for (const key in value) {
if (value.hasOwnProperty(key)) {
newObj[key] = copy(value[key]);
}
}
return newObj;
}
const result = copy(obj);
// 可选：清理Map（根据需求）
// map.clear();
return result;
}
3. 处理特殊对象（Date、RegExp等）
上述实现无法正确处理Date、RegExp、Set、Map等特殊对象。需要扩展实现以支持这些类型：
function deepCopyAdvanced(obj) {
const map = new WeakMap();
function copy(value) {
if (typeof value !== 'object' || value === null) {
return value;
}
if (map.has(value)) {
return map.get(value);
}
// 处理特殊对象
if (value instanceof Date) {
return new Date(value);
}
if (value instanceof RegExp) {
return new RegExp(value);
}
if (value instanceof Set) {
const newSet = new Set();
map.set(value, newSet);
value.forEach(v => newSet.add(copy(v)));
return newSet;
}
if (value instanceof Map) {
const newMap = new Map();
map.set(value, newMap);
value.forEach((v, k) => newMap.set(copy(k), copy(v)));
return newMap;
}
const newObj = Array.isArray(value) ? [] : {};
map.set(value, newObj);
for (const key in value) {
if (value.hasOwnProperty(key)) {
newObj[key] = copy(value[key]);
}
}
return newObj;
}
return copy(obj);
}
四、性能优化与边界情况
实现深拷贝函数时，还需要考虑性能和边界情况：
1. 性能优化
递归实现可能导致栈溢出（对于极深的对象结构）。可以通过以下方式优化：
- 使用迭代代替递归（如使用栈或队列）。
- 对大型对象进行分块处理。
以下是使用栈的迭代实现示例：
function deepCopyIterative(obj) {
const map = new WeakMap();
const stack = [{ source: obj, target: null }];
let rootTarget;
while (stack.length > 0) {
const { source, target: parentTarget, key } = stack.pop();
if (typeof source !== 'object' || source === null) {
if (parentTarget && key !== undefined) {
parentTarget[key] = source;
}
continue;
}
if (map.has(source)) {
if (parentTarget && key !== undefined) {
parentTarget[key] = map.get(source);
}
continue;
}
const isArray = Array.isArray(source);
const target = isArray ? [] : {};
if (!parentTarget && !key) {
rootTarget = target;
} else if (parentTarget) {
parentTarget[key] = target;
}
map.set(source, target);
const entries = isArray ?
source.map((v, i) => ({ source: v, target, key: i })) :
Object.keys(source).map(k => ({
source: source[k],
target,
key: k
}));
stack.push(...entries.reverse()); // 反向压栈以保持顺序
}
return rootTarget;
}
2. 边界情况
- 函数对象：函数通常无法被深拷贝（因为可能依赖闭包）。
- 原型链：默认实现不会复制原型链，仅复制自身属性。
- Symbol属性：需要使用Object.getOwnPropertySymbols获取。
以下是支持Symbol属性的实现：
function deepCopyWithSymbols(obj) {
const map = new WeakMap();
function copy(value) {
if (typeof value !== 'object' || value === null) {
return value;
}
if (map.has(value)) {
return map.get(value);
}
const newObj = Array.isArray(value) ? [] : {};
map.set(value, newObj);
// 复制普通属性
for (const key in value) {
if (value.hasOwnProperty(key)) {
newObj[key] = copy(value[key]);
}
}
// 复制Symbol属性
const symbolKeys = Object.getOwnPropertySymbols(value);
for (const symKey of symbolKeys) {
newObj[symKey] = copy(value[symKey]);
}
return newObj;
}
return copy(obj);
}
五、完整实现与测试
综合以上内容，以下是支持循环引用、特殊对象和Symbol属性的完整深拷贝实现：
function deepClone(obj) {
const map = new WeakMap();
function clone(value) {
// 处理原始值
if (typeof value !== 'object' || value === null) {
return value;
}
// 检查循环引用
if (map.has(value)) {
return map.get(value);
}
// 处理Date
if (value instanceof Date) {
return new Date(value);
}
// 处理RegExp
if (value instanceof RegExp) {
return new RegExp(value.source, value.flags);
}
// 处理Set
if (value instanceof Set) {
const newSet = new Set();
map.set(value, newSet);
value.forEach(v => newSet.add(clone(v)));
return newSet;
}
// 处理Map
if (value instanceof Map) {
const newMap = new Map();
map.set(value, newMap);
value.forEach((v, k) => newMap.set(clone(k), clone(v)));
return newMap;
}
// 处理数组和普通对象
const newObj = Array.isArray(value) ? [] : {};
map.set(value, newObj);
// 复制普通属性
for (const key in value) {
if (value.hasOwnProperty(key)) {
newObj[key] = clone(value[key]);
}
}
// 复制Symbol属性
const symbolKeys = Object.getOwnPropertySymbols(value);
for (const symKey of symbolKeys) {
newObj[symKey] = clone(value[symKey]);
}
return newObj;
}
return clone(obj);
}
测试用例：
// 测试循环引用
const obj = { a: 1 };
obj.self = obj;
const clonedObj = deepClone(obj);
console.log(clonedObj !== obj); // true
console.log(clonedObj.self === clonedObj); // true
// 测试特殊对象
const date = new Date();
const clonedDate = deepClone(date);
console.log(clonedDate instanceof Date); // true
console.log(clonedDate.getTime() === date.getTime()); // true
// 测试Symbol属性
const sym = Symbol('test');
const symObj = { [sym]: 'value' };
const clonedSymObj = deepClone(symObj);
console.log(clonedSymObj[sym] === 'value'); // true
六、替代方案与库推荐
如果不想手动实现深拷贝，可以使用以下库：
- Lodash的_.cloneDeep
- structuredClone（浏览器原生API，支持循环引用但无法处理函数）
示例：
// 使用Lodash
const _ = require('lodash');
const obj = { a: 1 };
obj.self = obj;
const cloned = _.cloneDeep(obj);
// 使用structuredClone
const obj = { a: 1 };
obj.self = obj;
try {
const cloned = structuredClone(obj);
} catch (e) {
console.log('不支持函数或DOM节点');
}
七、总结
实现能够处理循环引用的深拷贝函数需要解决以下关键问题：
- 使用WeakMap或Map记录已拷贝对象以避免无限递归。
- 正确处理Date、RegExp、Set、Map等特殊对象。
- 支持Symbol属性和不可枚举属性（根据需求）。
- 考虑性能优化（如迭代实现）。
完整的深拷贝实现应兼顾功能完整性和性能，并根据实际需求选择合适的实现方式。对于大多数项目，使用Lodash的_.cloneDeep或structuredClone是更简单的选择。
关键词：JavaScript、深拷贝、循环引用、WeakMap、递归、迭代、Lodash、structuredClone、Date对象、RegExp对象、Set对象、Map对象、Symbol属性
简介：本文详细探讨了JavaScript中实现深拷贝函数的方法，重点解决了循环引用导致的无限递归问题。通过WeakMap或Map记录已拷贝对象，并扩展支持Date、RegExp、Set、Map等特殊对象和Symbol属性。提供了递归和迭代的实现方案，并对比了Lodash和structuredClone等替代方案，适用于需要完全隔离对象修改的复杂场景。
《JavaScript中如何实现深拷贝函数以处理循环引用？.doc》
将本文以doc文档格式下载到电脑，方便收藏和打印
推荐度：
点击下载文档
