MessageChannel

最新推荐文章于 2025-09-11 06:00:51 发布

原创最新推荐文章于 2025-09-11 06:00:51 发布 · 575 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍MessageChannel API在前端开发中的应用，包括如何利用它实现数据的双向通信及进行对象的深拷贝操作。通过示例代码展示了port1与port2之间的消息传递过程，并给出了一种基于MessageChannel实现的异步深拷贝方法。

MessageChannel是前端的api,可以让我们创建一个消息通道,以此发送数据.

示例

const { port1, port2 } = new MessageChannel();
port1.onmessage = function(event) {
  console.log("port1收到的数据：", event.data);
}
port2.onmessage = function(event) {
  console.log("port2收到的数据：", event.data);
}
 
port1.postMessage("port1发送的数据");
port2.postMessage("port2发送的数据");
 
 
// port2收到的数据： port1发送的数据
// port1收到的数据： port2发送的数据

可用来深拷贝

function deepCopy(obj) {
      return new Promise((resolve) => {
        const {port1, port2} = new MessageChannel();
        port2.onmessage = ev => resolve(ev.data);
        port1.postMessage(obj);
      });
    }
 
 deepCopy(obj).then((copy) => {  // 请记住`MessageChannel`是异步的这个前提！
     let copyObj = copy;
     console.log(copyObj, obj)
     console.log(copyObj == obj)
 });