MessageChannel

为什么80%的码农都做不了架构师？>>>   

Channel Messaging API的Channel Messaging接口允许我们创建一个新的消息通道，并通过它的两个MessagePort 属性发送数据。

简单来说，MessageChannel创建了一个通信的管道，这个管道有两个端口，每个端口都可以通过postMessage发送数据，而一个端口只要绑定了onmessage回调方法，就可以接收从另一个端口传过来的数据. 此特性在 Web Worker 中可用。

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发送的数据

 

可用于深拷贝

    // 有undefined + 循环引用
    let obj = {
      a: 1,
      b: {
        c: 2,
        d: 3,
      },
      f: undefined
    }
    obj.c = obj.b;
    obj.e = obj.a
    obj.b.c = obj.c
    obj.b.d = obj.b
    obj.b.e = obj.b.c

    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)
    });

 

转载于:https://my.oschina.net/mdu/blog/3055470