Web Worker无法传递引用是因为主线程与Worker无共享内存，所有通信基于结构化克隆（深拷贝），传入的对象、数组等均为独立副本，函数、DOM节点、循环引用等不可克隆类型会触发DataCloneError；应仅传plain object、ArrayBuffer等可序列化数据，复杂关系需用ID映射或transfer机制处理。
Web Worker 无法安全传递“带有引用的数据”，因为主线程与 Worker 之间根本不存在共享内存，所有通信都基于拷贝。所谓“引用”在跨线程场景下天然失效——你传的不是地址，而是结构化克隆后的独立副本。
为什么不能传引用
JavaScript 的引用只在线程内有效。当你把一个对象赋值给变量、传入函数或放入数组，操作的仍是同一块内存地址。但 postMessage 会触发浏览器底层的结构化克隆算法（Structured Clone Algorithm），它自动对数据做深拷贝，并切断所有原始引用链：
- 传 { user: { id: 1 }, list: [1,2] } → Worker 收到的是全新对象和全新数组，修改 list.push(3) 不会影响主线程的原数组
- 传含 this.parent 指针的树节点 → 克隆时 parent 引用被断开，Worker 中得到的是孤立节点
- 传函数、DOM 节点、Error 实例等 → 直接被过滤或抛 DataCloneError，根本过不去
怎么处理本想“传引用”的需求
实际业务中所谓“带引用”，往往指对象间存在关联（如父子关系、图结构、循环依赖）。这不是靠传引用解决的，而是要显式建模关系：
- 用 ID 映射替代指针：主线程只传 { nodes: [{id:1,name:'A'},{id:2,name:'B'}], edges: [{from:1,to:2}] }；Worker 用 Map 构建 id → node 映射，再按 edges 连接
- 提前解构循环引用：若数据含 self/parent 字段，发消息前删掉它们，或转为 id 字段（如 parent: 123），Worker 再重建逻辑关系
- 避免传整个上下文对象：不要传 this 或 Vue 组件实例；只提取 Worker 真正需要的字段，例如 worker.postMessage({ width, height, pixels })
大对象怎么传才不卡又不失真
ArrayBuffer、TypedArray 等二进制数据支持“转移”（transfer），不是拷贝，能真正避免内存压力：
- 主线程创建 let buffer = new ArrayBuffer(10 * 1024 * 1024);
- 调用 worker.postMessage(buffer, [buffer]); —— 第二个参数是 transfer list
- 传输后 buffer.byteLength 变为 0，主线程不能再访问；Worker 内可直接 new Uint8Array(buffer) 操作
- 注意：只能 transfer ArrayBuffer、MessagePort、OffscreenCanvas 等明确支持的类型；普通对象加 transfer list 会报错
哪些操作看似传引用，实则危险
以下写法常见但必须避免：
- worker.postMessage(obj) 后还在主线程继续修改 obj 属性 → 误以为 Worker 会同步看到变化（不会，它拿到的是快照）
- 在 Worker 里手动 structuredClone(e.data) → 多余且低效，e.data 已是克隆结果
- 试图用 JSON.stringify + parse 代替 postMessage → 丢失 Date、Map、Blob、RegExp 类型，且无法处理循环引用
- 把函数作为配置项传入 Worker → 函数无法克隆，会被静默丢弃，Worker 收到的对象缺字段
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
