MessageChannel

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

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

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)
 });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值