JavaScript深拷贝：structuredClone API详解与实践

1. 深拷贝的痛点与常见方案

在JavaScript开发中，对象拷贝是一个高频操作。当我们需要修改对象但又不想影响原始数据时，深拷贝就显得尤为重要。传统的JSON.parse(JSON.stringify(obj))方法虽然简单，但存在明显的局限性。

1.1 JSON方法的缺陷

const obj = { date: new Date(), regex: /pattern/, function: () => console.log('hello') }; const cloned = JSON.parse(JSON.stringify(obj)); console.log(cloned); // 输出: { date: "2023-07-20T08:00:00.000Z", regex: {} }

这种方法的主要问题包括：

• 会丢失函数属性
• 日期对象会被转换为字符串
• 正则表达式会被转换为空对象
• 无法处理循环引用
• 忽略Symbol类型的属性
• 性能开销较大（需要序列化和反序列化）

1.2 其他传统方案的不足

除了JSON方法，开发者常用的方案还有：

1. 手动递归拷贝：实现复杂，容易出错，性能一般
2. 第三方库（如lodash的_.cloneDeep）：增加项目体积
3. Object.assign和扩展运算符：只能实现浅拷贝

2. structuredClone API详解

HTML5规范引入了structuredClone()方法，专门用于深拷贝操作。它解决了传统方法的各种痛点，提供了更完整、更高效的深拷贝能力。

2.1 基本用法

const original = { name: "John", profile: { age: 30, hobbies: ["reading", "hiking"] } }; const cloned = structuredClone(original);

2.2 支持的数据类型

structuredClone()支持以下JavaScript内置类型：

• 基本类型（string, number, boolean等）
• Date对象
• RegExp对象
• ArrayBuffer, TypedArray
• Map, Set
• Array, Object
• 原始包装对象（String, Number, Boolean）
• Error类型（部分实现）

2.3 特殊情况的处理

2.3.1 循环引用

const obj = {}; obj.self = obj; const cloned = structuredClone(obj); console.log(cloned.self === cloned); // true

2.3.2 函数和DOM节点

需要注意的是，structuredClone()仍然不能拷贝：

• 函数
• DOM节点
• 某些特定对象的属性（如对象的prototype）

3. 性能对比与实践建议

3.1 性能基准测试

我们通过一个包含多层嵌套的对象来比较不同方法的性能：

const bigObj = { // 构造一个复杂的嵌套对象 }; // JSON方法 console.time('JSON'); const jsonClone = JSON.parse(JSON.stringify(bigObj)); console.timeEnd('JSON'); // structuredClone console.time('structuredClone'); const nativeClone = structuredClone(bigObj); console.timeEnd('structuredClone');

典型测试结果：

• JSON方法：约15ms
• structuredClone：约8ms
• lodash.cloneDeep：约20ms

3.2 最佳实践建议

1. 现代浏览器环境：优先使用structuredClone()
2. Node.js环境：18.x及以上版本原生支持
3. 兼容性考虑：对于旧环境，可以结合特性检测实现降级方案

function deepClone(obj) { if (typeof structuredClone === 'function') { return structuredClone(obj); } // 降级实现 try { return JSON.parse(JSON.stringify(obj)); } catch (e) { // 更复杂的降级方案 } }

4. 常见问题与解决方案

4.1 浏览器兼容性

虽然主流现代浏览器都已支持，但需要注意：

• Safari 15.4+才完全支持
• Node.js 17+实验性支持，18+稳定支持

4.2 特殊场景处理

4.2.1 克隆Error对象

try { throw new Error('test'); } catch (err) { const clonedErr = structuredClone(err); console.log(clonedErr.message); // 'test' }

4.2.2 处理不可克隆类型

对于无法克隆的类型，可以预先转换：

function cloneWithFunctions(obj) { const funcs = {}; Object.entries(obj).forEach(([key, value]) => { if (typeof value === 'function') { funcs[key] = value.toString(); delete obj[key]; } }); const cloned = structuredClone(obj); Object.entries(funcs).forEach(([key, value]) => { cloned[key] = eval(`(${value})`); }); return cloned; }

4.3 内存与性能优化

对于超大对象的克隆：

1. 考虑分块克隆
2. 使用转移（transfer）特性处理ArrayBuffer

const buffer = new ArrayBuffer(1024); const cloned = structuredClone(buffer, { transfer: [buffer] // 转移而不是拷贝 });

5. 实际应用案例

5.1 状态管理

在前端框架中，我们经常需要克隆状态对象：

// Vue/React中的状态克隆 const currentState = reactive({ user: { /* ... */ }, settings: { /* ... */ } }); // 修改前克隆 const backup = structuredClone(currentState); // 出错时回滚 function rollback() { Object.assign(currentState, backup); }

5.2 Web Worker通信

// 主线程 const complexData = { /* ... */ }; worker.postMessage(structuredClone(complexData)); // Worker线程 onmessage = (e) => { const data = e.data; // 使用克隆后的数据 };

5.3 撤销/重做功能实现

class History { constructor(initialState) { this.history = [structuredClone(initialState)]; this.index = 0; } commit(state) { this.history = this.history.slice(0, this.index + 1); this.history.push(structuredClone(state)); this.index++; } undo() { this.index = Math.max(0, this.index - 1); return structuredClone(this.history[this.index]); } redo() { this.index = Math.min(this.history.length - 1, this.index + 1); return structuredClone(this.history[this.index]); } }

6. 高级技巧与限制

6.1 克隆原型链

默认情况下，structuredClone不会保留原型链：

class Person { constructor(name) { this.name = name; } } const john = new Person('John'); const cloned = structuredClone(john); console.log(cloned instanceof Person); // false

解决方案：

function cloneWithPrototype(obj) { const cloned = structuredClone(obj); Object.setPrototypeOf(cloned, Object.getPrototypeOf(obj)); return cloned; }

6.2 处理特殊对象

对于浏览器特有的对象如Blob、File等，不同浏览器的支持程度可能不同。建议：

function safeClone(obj) { if (obj instanceof Blob) { return new Blob([obj], { type: obj.type }); } // 其他特殊类型处理 return structuredClone(obj); }

6.3 性能敏感场景

在游戏或动画等性能敏感场景中，可以考虑：

1. 使用不可变数据结构
2. 手动实现针对特定对象结构的克隆
3. 使用对象池避免频繁克隆

7. 替代方案比较

7.1 与Immutable.js对比

7.2 与lodash.cloneDeep对比

// 在简单对象上性能相当 const simpleObj = { /* ... */ }; _.cloneDeep(simpleObj); // ≈ structuredClone(simpleObj) // 在复杂对象上lodash可能更慢 const complexObj = { /* 深度嵌套 */ }; _.cloneDeep(complexObj); // 比structuredClone慢20-30%

8. 未来展望

随着Web开发复杂度的提升，structuredCloneAPI可能会进一步扩展：

1. 支持函数克隆
2. 更好的DOM节点处理
3. 更细粒度的克隆控制
4. 并行克隆优化

目前，TC39正在讨论将类似功能纳入ECMAScript标准，未来可能在语言层面提供更强大的克隆能力。