在JavaScript中复制一个对象，看似只是一个小动作，实际却隐藏着不少坑。最经典的场景是这样的：你把一个配置对象赋值给新变量，修改新对象的某个嵌套属性后，原始对象也跟着变了。原因很简单，JavaScript的对象是引用类型，赋值只是复制了内存地址的引用，两个变量指向的是同一份数据。要彻底切断这种关联，就需要深度克隆。
一、先弄清楚浅拷贝与深拷贝的本质区别
浅拷贝只复制对象的第一层，如果属性值是基本类型（number、string、boolean等），就复制值本身；如果属性值是引用类型（对象、数组、函数等），复制的仍然是引用。常见的浅拷贝手段包括Object.assign、扩展运算符{...obj}以及Array.prototype.slice。这些方法用起来很方便，但只要对象嵌套超过一层，深层的修改就会互相影响。
深拷贝则要求递归地复制所有层级，生成一份完全独立的数据。判断一个拷贝是否是深拷贝，有个简单的测试方法：修改新对象的深层嵌套属性，观察原对象是否变化。例如const a = {info: {name: 'test'}};，如果执行拷贝后修改b.info.name，而a.info.name不受影响，那才是真正的深拷贝。
从内存角度看，浅拷贝只是栈中多了一个指针指向同一块堆内存，深拷贝则是在堆中开辟了全新的空间。理解这一点，后续分析各种实现方案的边界情况时就会轻松很多。
二、三种主流实现方案的对比与陷阱
1. JSON序列化方案：简单但有致命缺陷
最广为流传的深拷贝写法是JSON.parse(JSON.stringify(obj))。它的优点是实现简单、无需额外代码，而且对于纯数据的JSON兼容对象，性能还不错。但它的缺陷非常多，几乎不能用在生产环境的复杂对象上。
const obj = {
date: new Date(),
reg: /abc/g,
fn: function () { console.log('hello'); },
undef: undefined,
sym: Symbol('id'),
nan: NaN,
map: new Map([['a', 1]])
};
const copy = JSON.parse(JSON.stringify(obj));
console.log(copy.date); // 字符串，不再是Date对象
console.log(copy.reg); // 空对象，正则信息丢失
console.log(copy.fn); // undefined，函数直接被丢弃
console.log(copy.undef); // 属性整个消失
console.log(copy.nan); // null，NaN被转成null
console.log(copy.map); // 空对象，Map结构丢失除了类型丢失，这个方案还有两个更隐蔽的问题：一是无法处理循环引用，直接抛出TypeError: Converting circular structure to JSON；二是Symbol键的属性会被静默忽略。所以说，它只适合处理简单的、由JSON类型组成的数据，比如从接口拿到的纯配置数据。
2. MessageChannel方案：浏览器环境的取巧做法
利用MessageChannel的postMessage做结构化克隆，也是一种常见方案。它能正确处理Date、RegExp、Map、Set、循环引用等，但无法克隆函数，且是异步的，在需要同步拿到结果的场景下不方便。
function cloneByChannel(obj) {
return new Promise((resolve) => {
const { port1, port2 } = new MessageChannel();
port1.onmessage = (e) => resolve(e.data);
port2.postMessage(obj);
});
}3. structuredClone：原生的现代方案
随着浏览器和Node.js的支持普及，全局函数structuredClone成了官方推荐的做法。它支持循环引用、Date、RegExp、Map、Set、ArrayBuffer、TypedArray等丰富类型，性能也不错。但它同样不能克隆函数和DOM节点，遇到函数会直接抛出DataCloneError。如果业务数据里可能包含函数或类实例，就需要手写实现作为补充。
三、手写一个健壮的通用深拷贝
手写深拷贝的核心是递归遍历，但要做到健壮，必须处理好几个边界：类型判断要准确、循环引用要能断开、特殊对象要逐一覆盖。下面这份实现使用WeakMap缓存已克隆的对象来解决循环引用，同时覆盖了常见的特殊类型。
function deepClone(source, hash = new WeakMap()) {
// 基本类型和函数直接返回
if (source === null || typeof source !== 'object') {
return source;
}
// 循环引用检查：已克隆过则直接返回缓存结果
if (hash.has(source)) {
return hash.get(source);
}
// 处理Date和RegExp
if (source instanceof Date) return new Date(source);
if (source instanceof RegExp) return new RegExp(source.source, source.flags);
// 处理Map
if (source instanceof Map) {
const result = new Map();
hash.set(source, result);
source.forEach((val, key) => {
result.set(deepClone(key, hash), deepClone(val, hash));
});
return result;
}
// 处理Set
if (source instanceof Set) {
const result = new Set();
hash.set(source, result);
source.forEach((val) => {
result.add(deepClone(val, hash));
});
return result;
}
// 保留原型链，区分数组和普通对象
const result = Array.isArray(source) ? [] : Object.create(Object.getPrototypeOf(source));
hash.set(source, result);
// 同时遍历字符串键和Symbol键
Reflect.ownKeys(source).forEach((key) => {
result[key] = deepClone(source[key], hash);
});
return result;
}这份实现里有几个细节值得展开说明。第一，WeakMap的键是弱引用，不会阻止原对象被垃圾回收，比用普通Map或Array记录路径更安全。第二，使用Object.create(Object.getPrototypeOf(source))而不是简单的{}，可以保留类实例的原型链，克隆出来的对象仍能访问类上的方法。第三，Reflect.ownKeys能同时拿到字符串键和Symbol键，避免了属性遗漏。
如果担心超深嵌套导致栈溢出，可以把递归改成显式栈的迭代写法，或者用try...catch配合分批处理。不过在绝大多数业务场景中，对象嵌套深度有限，递归写法已经够用。
四、性能考量与方案选型建议
从性能角度对比，JSON方案在纯数据场景下往往最快，因为它直接走了引擎的原生序列化路径；structuredClone紧随其后；手写递归版本因为有多层类型判断和函数调用开销，通常会慢一些，但差距在常规数据量下并不明显。真正拉开差距的是大数据量场景，比如克隆一个包含上万条记录的数组，此时应该优先考虑是否真的需要深拷贝。
实际开发中，比选型更重要的问题是避免不必要的深拷贝。很多组件间传对象时无脑深拷贝，导致页面明显卡顿。更合理的做法是：如果只是读取数据，直接传引用；如果需要局部修改，只拷贝受影响的路径，例如{...state, user: {...state.user, name: 'new'}};，这也是Redux等状态管理库推荐的不变式更新写法。
总结一下选型思路：纯JSON数据用structuredClone或JSON方案；包含函数、类实例、循环引用的复杂对象用手写实现；需要极致性能时优先做结构优化，减少拷贝本身。掌握这些方案背后的原理，无论面试还是实际工程问题，都能从容应对。
JavaScript深度克隆structuredClone对象复制修改时间：2026-09-03 10:05:06