美文网首页
MessageChannel

MessageChannel

作者: 春风本是人间客 | 来源:发表于2020-08-05 10:57 被阅读0次

    MessageChannel的基本使用

    const {port1, port2} = new MessageChannel();
    port1.onmessage = function(d) {
        console.log(`port1接收的消息是:${d.data}`);
    }
    port2.onmessage = function(d) {
        console.log(`port2接收的消息是:${d.data}`);
    }
    port1.postMessage('port1发送的消息');
    port2.postMessage('port2发送的消息');
    

    port1发送的由port2接收,port2发送的由port1接收。

    也就是说,传过去的对象,接收到的时候已经不是原来的引用和指针了,这个时候再return出来,就是一个新的对象,所以肯定能实现深拷贝。

    使用MessageChannel实现深拷贝

    var obj = {id:1,name:{a:'xx'}};
    
    function structuralClone(obj) {
        return new Promise((resolve) => {
            const {port1, port2} = new MessageChannel();
            port2.onmessage = ev => resolve(ev.data);
            port1.postMessage(obj);
        })
    }
    structuralClone(obj).then(res=>{
        console.log(res);
        var obj3 = res;
        obj3.name.a = 'obj3';
        console.log(obj,obj3);
    })
    
    <!-- 用promise是为了好传数据 -->
    

    相关文章

      网友评论

          本文标题:MessageChannel

          本文链接:https://www.haomeiwen.com/subject/nxfrrktx.html