javascript web worker 通过 postmessage() 发送数据，并通过监听 message 事件接收数据。主线程调用 worker 实例的 postmessage() 方法，worker 内部使用 self.postmessage()；反之亦然。这种通信机制基于消息队列，支持结构化克隆算法，可以安全地传递对象、数组等复杂数据类型。
Worker 如何向主线程发送数据
Worker 向主线程发送数据时，需要在 Worker 脚本中使用 self.postMessage() 或 postMessage()。主线程则通过为 Worker 实例添加 onmessage 事件处理器来接收这些数据。当 Worker 执行完任务后，它可以将结果打包成一个对象发送给主线程。
// worker.js
self.onmessage = function(e) {
const data = e.data;
// 处理数据...
const result = data * 2;
self.postMessage({ type: 'result', value: result });
};
// main.js
const worker = new Worker('worker.js');
worker.onmessage = function(e) {
console.log('Received from worker:', e.data);
};
worker.postMessage(5); // 发送数据给 worker上述代码展示了 Worker 接收主线程数据并返回处理结果的过程。主线程通过 worker.postMessage(5) 发送数字 5，Worker 接收到后将其乘以 2，然后通过 self.postMessage({ type: 'result', value: result }) 将结果对象发送回主线程。主线程在 worker.onmessage 中接收到该对象并打印出来。
立即学习“Java免费学习笔记（深入）”；
主线程如何向 Worker 发送数据
主线程向 Worker 发送数据时，直接调用 Worker 实例的 postMessage() 方法即可。Worker 内部通过 self.onmessage 事件处理器来捕获这些消息。这种方式允许主线程和 Worker 之间进行双向通信，且每次通信都是异步的。
// main.js
const worker = new Worker('worker.js');
worker.postMessage({ command: 'start', payload: [1, 2, 3] });
// worker.js
self.onmessage = function(e) {
const { command, payload } = e.data;
if (command === 'start') {
const sum = payload.reduce((a, b) => a + b, 0);
self.postMessage({ type: 'sum', value: sum });
}
};在这个例子中，主线程发送一个包含命令和负载的对象给 Worker。Worker 解析该对象，如果命令是 'start'，则计算负载数组的和，并将结果以 { type: 'sum', value: sum } 的形式发送回主线程。这展示了如何通过结构化数据实现复杂的交互逻辑。
Worker 收到空消息时会发生什么
当 Worker 收到空消息（即 e.data 为 null 或 undefined）时，onmessage 事件仍然会被触发，但 e.data 的值将是传入的空值。开发者需要在事件处理器中检查 e.data 是否为空，以避免因访问未定义属性而导致的错误。例如，如果尝试访问 e.data.property 而 e.data 为空，将会抛出 TypeError。
