js深拷贝的另类实现

November 21, 2024

结构化克隆

Window 接口上的 structuredClone() 方法根据结构化克隆算法，为指定值创建深拷贝。

这个函数可以说是深拷贝的模版，core-js 对之有一个遵循规范的 polyfill 实现。

根据 HTML 规范，structuredClone(value, options) 的操作步骤很简单：

Let serialized be ? StructuredSerializeWithTransfer(value, options["transfer"]).
Let deserializeRecord be ? StructuredDeserializeWithTransfer(serialized, this's relevant realm).
Return deserializeRecord.[[Deserialized]].

本文不打算探讨 Transfer 对象，那么简单来说，忽略 options 参数，structuredClone 所做操作无非：先序列化 value，再将结果反序列化，最后返回。

注1：通过 StructuredSerializeInternal(value, forStorage [,memory]) 抽象操作
注2：下文都不考虑 SharedArrayBuffer

在浏览器环境中，注意到 history.replaceState 函数的第一个参数实际上会被序列化。而 history.state 则返回反序列化的结果。

根据 HTML 规范，其序列化使用 StructuredSerializeForStorage(value) 抽象操作。

观察其步骤可以发现，在忽略 Transfer 对象的情况下，StructuredSerializeForStorage 等价于 StructuredSerializeWithTransfer。

这就给我们一个实现 polyfill 的思路，即通过 StructuredSerializeForStorage 来把浏览器实现的结构化克隆算法暴露出来。

function structuredClone(x: unknown) {
    const UNUSED = "";
    const saved = history.state;
    history.replaceState(x, UNUSED); // 序列化
    const cloned = history.state; // 反序列化
    history.replaceState(saved, UNUSED);
    return cloned;
}

此外

在 ECMA262 中，实现深拷贝实际上需要做一些取舍，即区分哪些对象无法拷贝和对象的那些部分无法拷贝。

结构化克隆算法所做取舍如下：

无法克隆 Function 对象（规范角度来说叫可调用对象，因为函数可以是闭包）
无法克隆 Symbol 值
无法克隆 DOM 对象（是无法序列化的 platform对象）
只克隆对象的可枚举键（Object.keys），且不克隆属性描述符
不克隆对象的原型
不克隆类私有属性
特殊处理的对象为：原始值对应对象 Boolean/Number/BigInt/String 内置对象 Date/RegExp/SharedArrayBuffer/GrowableSharedArrayBuffer/ArrayBuffer/ResizableArrayBuffer/ArrayBufferView/ Map/Set/Array/Error
无法克隆包含除 [[Prototype]] [[Extensible]] [[PrivateElements]] 外内部槽的对象（Promise/WeakMap）
无法克隆原型不属于当前 realm 的 exotic 对象（Proxy）

←Back to home

This work is licensed under CC BY-NC-SA 4.0