深拷贝的核心作用是切断引用链，避免跨作用域（如父子组件、iframe、web worker、事件回调）间意外修改同一份数据；它不是共享数据，而是安全传递副本。
深拷贝在跨作用域数据共享中，核心作用是切断引用链，避免不同作用域（如父子组件、iframe 通信、Web Worker 传参、事件回调等）间意外修改同一份数据。它不是“共享数据”，而是“安全地传递副本”。
为什么跨作用域必须用深拷贝
JavaScript 中对象默认按引用传递。若直接把一个对象从父作用域传给子作用域（比如 props、postMessage、回调参数），两者操作的是堆内存中同一个对象。一旦子作用域修改了嵌套属性，父作用域数据就同步变了——这常导致状态不可预测、视图异常或难以调试。
例如：
- React 中将 state 对象直接传给子组件并允许其修改，会破坏不可变性原则；
- 主线程通过
postMessage向 Web Worker 发送配置对象，Worker 修改后返回，主线程发现原始配置已变； - 事件监听器中缓存了某个 DOM 数据快照，后续页面更新后该快照被意外覆盖。
推荐的现代深拷贝方案
优先使用浏览器原生支持、语义明确且兼容主流类型的 API：
-
structuredClone()：ECMAScript 标准方法，支持 Map、Set、Date、RegExp、ArrayBuffer、TypedArray、Error、甚至循环引用，且不丢失原型链（部分环境）。适用于绝大多数跨作用域场景，如postMessage前预处理、状态快照保存。 -
Lodash 的
cloneDeep()：成熟稳定，兼容性极佳（包括旧版 Node.js 和 IE 项目），能处理函数（作为 undefined 处理）、特殊构造对象等边缘情况，适合对兼容性要求高的工程。
不建议在生产环境依赖 JSON.parse(JSON.stringify(obj))：它会丢弃 undefined、function、Symbol、Date（转为字符串）、RegExp（变为空对象）、NaN、Infinity，且无法处理循环引用。
关键使用时机与注意事项
深拷贝不是万能药，需结合上下文判断是否真正需要：
- 传参前拷贝：向子组件、工具函数、异步回调传入复杂对象时，先深拷贝再传入；
-
接收后立即拷贝：从
event.data、localStorage.getItem()或第三方 SDK 回调中拿到对象，不要直接赋值，先克隆再使用； -
避免过度拷贝：高频操作（如每帧渲染）中深拷贝大对象会显著影响性能，可考虑冻结对象（
Object.freeze()）+ 浅层校验，或改用不可变数据结构（如 Immutable.js 或 Immer）； -
注意类型边界：
structuredClone在某些环境（如某些 WebView 或旧版 Safari）可能未完全支持，上线前务必验证目标运行时。
简单示例：跨 iframe 安全传参
父页面向 iframe 发送配置时：
// 父页面
const config = { api: 'https://api.example.com', timeout: 5000, headers: { auth: 'token' } };
// ✅ 安全：发送副本，防止 iframe 修改影响主逻辑
iframe.contentWindow.postMessage(structuredClone(config), '*');
// iframe 内
window.addEventListener('message', (e) => {
const safeConfig = structuredClone(e.data); // ✅ 接收后也深拷贝，隔离来源
initAPI(safeConfig);
});Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
