MessageChannel

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是为了好传数据 -->
posted @ 2020-07-30 09:54  春风自是人间客  阅读(239)  评论(0编辑  收藏  举报