当前位置：首页 > news >正文

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

news 2025/8/18 11:10:29

前言

通常使用简便快捷的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.dataconsole.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)}})
}