JavaScript structuredClone 深拷贝实现详解

structuredClone

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

文档

MDN structuredClone

structuredClone 的使用

const obj = {
  a: 1,
  b: {
    c: 1,
  },
};
const res = structuredClone(obj);
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}}

另外一种实现

import structuredClone from '@ungap/structured-clone';

看到了一个用 MessageChannel 实现的深拷贝，简直就是秀儿啊

class StructuredCloner {
  constructor() {
    this.pendingClones_ = new Map();
    this.nextKey_ = 0;

    const channel = new MessageChannel();
    this.inPort_ = channel.port1;
    this.outPort_ = channel.port2;

    this.outPort_.onmessage = ({ data: { key, value } }) => {
      const resolve = this.pendingClones_.get(key);
      resolve(value);
      this.pendingClones_.delete(key);
    };
    this.outPort_.start();
  }

  cloneAsync(value) {
    return new Promise((resolve) => {
      const key = this.nextKey_++;
      this.pendingClones_.set(key, resolve);
      this.inPort_.postMessage({ key, value });
    });
  }
}

const structuredCloneAsync = (window.structuredCloneAsync =
  StructuredCloner.prototype.cloneAsync.bind(new StructuredCloner()));

测试

const main = async () => {
  const original = { date: new Date(), number: Math.random() };
  original.self = original;

  const clone = await structuredCloneAsync(original);

  // They're different objects:
  console.assert(original !== clone);
  console.assert(original.date !== clone.date);

  // They're cyclical:
  console.assert(original.self === original);
  console.assert(clone.self === clone);

  // They contain equivalent values:
  console.assert(original.number === clone.number);
  console.assert(Number(original.date) === Number(clone.date));

  console.log("Assertions complete.");
};

main();

参考文章

• https://www.samanthaming.com/tidbits/70-3-ways-to-clone-objects/
• https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript
• https://stackoverflow.com/questions/728360/how-do-i-correctly-clone-a-javascript-object