美文网首页
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