JS MessageChannel 实现深拷贝

MessageChannel

MessageChannel 是 HTML5 中新增的一个 API，它可以用来创建一个 MessagePort 的通道，可以用来实现 Web Worker 之间的通信。

创建 MessageChannel

const { port1, port2 } = new MessageChannel();

MessageChannel 的使用

port1.onmessage = (e) => {
  console.log(e.data);
};
port2.postMessage("hello");

MessageChannel 实现深拷贝

因为 postMessage 方法是异步的，所以要用 Promise 来实现数据的返回

function cloneByMessageChannel(params) {
  return new Promise((resolve) => {
    const { port1, port2 } = new MessageChannel();
    port2.onmessage = (ev) => resolve(ev.data);
    port1.postMessage(params);
  });
}

测试

const obj = {
  a: 1,
  b: {
    c: 1,
  },
};
cloneByMessageChannel(obj).then((res) => {
  console.log(res); // {a: 1, b: {c: 1}}
  obj.a = 2;
  console.log(obj); // {a: 2, b: {c: 1}}
  console.log(res); // {a: 1, b: {c: 1}}
  obj.b.c = 2;
  console.log(obj); // {a: 2, b: {c: 2}}
  console.log(res); // {a: 1, b: {c: 1}}
});

后记

• https://juejin.cn/post/6995449206085255175