使用MessageChannel(消息通道)进行深拷贝

深拷贝一般用JSON.parse(JSON.stringify(object))就可以解决了,

也知道这种方法的局限性:

  • 会忽略 undefined
  • 不能序列化函数
  • 不能解决循环引用的对象

因为MessageChannelpostMessage传递的数据也是深拷贝的,这和web workerpostMessage一样。而且还可以拷贝undefined和循环引用的对象。

示例如下

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

只是拷贝函数还是有问题,会报错。

原文来源于

MessageChannel是什么,怎么使用?

 

posted @ 2021-01-18 18:35  LeoX的爬坑笔记  阅读(327)  评论(0编辑  收藏  举报