【JS】使用MessageChannel实现深度克隆

前言

通常使用简便快捷的JSON 序列化与反序列化实现深克隆，也可以递归实现或者直接使用lodash。

但 JSON 序列化与反序列化 无法处理如下的循环引用：

实现

MessageChannel 内部使用了浏览器内置的结构化克隆算法，该算法可以在不同的浏览器上下文之间传递数据。它能够在传递数据时自动处理对象的深度克隆，包括处理嵌套对象、数组、Map、Set、Date 对象等，同时还可以解决循环引用的问题。

const obj = { a: 1, b: 2 }
obj.c = obj
const { port1, port2 } = new MessageChannel()
port1.postMessage(obj)
port2.onmessage = (msg) => {
  const obj2 = msg.data
  console.log(obj2, obj2 === obj)
}

封装为函数

function deepClone(obj) {
  return new Promise((resolve) => {
    const { port1, port2 } = new MessageChannel()
    port1.postMessage(obj)
    port2.onmessage = (msg) => {
      resolve(msg.data)
    }
  })
}