MessageChannel

最新推荐文章于 2025-05-14 16:17:24 发布

black sheldon

最新推荐文章于 2025-05-14 16:17:24 发布

阅读量204

点赞数 1

CC 4.0 BY-SA版权

文章标签： html5 前端 html

原文链接：https://zhuanlan.zhihu.com/p/432726048

MessageChannel创建的port1和port2可用于组件间的通信，信息传递过程中进行了深度拷贝。当发送包含自引用的对象时，接收到的对象并不等同于原对象，证明了数据的独立性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

应用

MessageChannel实例化后可以生成两个端点port1, port2

const { port1, port2 } = new MessageChannel();

在项目中可以通过这两个端点收发信息来达到组件之间通信的功能

const { port1, port2 } = new MessageChannel();
port1.onmessage = function (event) {
  console.log('port2的消息：', event.data); 
};
port2.onmessage = function (event) {
  console.log('port1的消息：', event.data);
  port2.postMessage('你好,我是port2');
};
port1.postMessage('你好,我是port1');

数据拷贝

实际在收发信息时MessageChannel实例也对信息做了一个深度拷贝,可做以下验证:

const obj = {kkk: 5555}
// 自调用
obj.self = obj;
const { port1, port2 } = new MessageChannel();
let obj2 = null;
port2.onmessage = function (event) {
   console.log('接收:', event.data)
  console.log('结果:', event.data === obj)  //  false
};
port1.postMessage(obj);

执行结果: