JS中对象深拷贝：structuredClone()

俊刚

已于 2022-06-20 16:17:52 修改

阅读量7.3k

点赞数 6

文章标签：前端 javascript ecmascript

于 2022-06-20 15:30:36 首次发布

本文链接：https://blog.csdn.net/songjungang/article/details/125373543

版权

structuredClone()是JavaScript中的一个新功能，用于创建对象的深拷贝，区别于展开操作符的浅拷贝。它已被大多数浏览器和运行时环境支持。文章详细探讨了structuredClone()的使用场景、复制的值类型限制以及如何处理自定义类实例和对象特性属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

《星球大战》中克隆人军队

展开操作符（Spreading）是JavaScript中复制对象的常用手段：

展开数组字面量复制一个数组
展开对象字面量复制一个对象

展开有个明显的缺点，复制的结果是浅拷贝，顶层被复制，但属性值是引用数据。

structuredClone() 是一个新功能，现在已经被大多数浏览器、Node.js 和 Deno 支持。它可以创建对象的深拷贝。下面是对它的研究分享，阅读时间约为 5 分钟。

1. 在哪里可以使用structuredClone()？

2. 通过展开复制对象的浅拷贝

3. 使用structuredClone()深度复制对象

4. 哪些值可以structuredClone()复制？

1. 在哪里可以使用structuredClone()？

尽管structuredClone()是 ECMAScript 的一部分，但它已被添加到许多平台中（并且会更快更广泛的普及）：

提示：

structuredClone()在 WebWorkers 中支持并不完全，具体可以查看MDN 浏览器兼容性表。
在不支持的平台上structuredClone，可以使用polyfill代替。

2. 通过展开复制对象的浅拷贝

在 JavaScript 中复制数组和普通对象的一种常见方法是通过展开。比如展开对象代码：

const obj = {id: 'abcd1234', values: ['a', 'b']};
const clone1 = {...obj};

唉，这是使用频率非常高的浅拷贝方式。一方面，因为clone1.id是一个复制，因此更改它不会更改obj：

clone1.id = 'yes';
assert.equal(obj.id, 'abcd1234');

另一方面，数组 inclone1.values与共享obj。如果我们改变它，同时也会改变obj：

clone1.values.push('x');
assert.deepEqual(
  clone1, {id: 'yes', values: ['a', 'b', 'x']}
);
assert.deepEqual(
  obj, {id: 'abcd1234', values: ['a', 'b', 'x']}
);

3. 使用structuredClone()深度复制对象

structuredClone(value: any): any

（这个函数有第二个参数 transferables，这个参数很少有用，超出了本文的范围。详细信息，请参考MDN 页面structuredClone()）

structuredClone()深度复制对象：

const obj = {id: 'abcd1234', values: ['a', 'b']};
const clone2 = structuredClone(obj);


clone2.values.push('x');
assert.deepEqual(
  clone2, {id: 'abcd1234', values: ['a', 'b', 'x']}
);
assert.deepEqual(
  obj, {id: 'abcd1234', values: ['a', 'b']}
);

4. 哪些值可以structuredClone()复制？

4.1 大多数内置值都可以复制

可以复制原始值：

> typeof structuredClone(true)
'boolean'
> typeof structuredClone(123)
'number'
> typeof structuredClone('abc')
'string'

大多数内置对象都可以复制——即使它们有内部插槽：

> Array.isArray(structuredClone([]))
true
> structuredClone(/^a+$/) instanceof RegExp
true

但是，在复制正则表达式时，属性.lastIndex始终重置为零。

4.2 某些内置值无法复制

一些内置对象不能被复制，structuredClone()会抛出一个：DOMException

Functions (ordinary functions, arrow functions, classes, methods)
DOM 节点DOM nodes

Functions示例：

assert.throws(
  () => structuredClone(function () {}), // ordinary function
  DOMException
);
assert.throws(
  () => structuredClone(() => {}), // arrow function
  DOMException
);
assert.throws(
  () => structuredClone(class {}),
  DOMException
);


const objWithMethod = {
  myMethod() {},
};
assert.throws(
  () => structuredClone(objWithMethod.myMethod), // method
  DOMException
);
assert.throws(
  () => structuredClone(objWithMethod), // object with method
  DOMException
);

structuredClone()抛出的异常是什么样的？

try {
  structuredCljone(() => {});
} catch (err) {
  assert.equal(
    err instanceof DOMException, true
  );
  assert.equal(
    err.name, 'DataCloneError'
  );
  assert.equal(
    err.code, DOMException.DATA_CLONE_ERR
  );
}

4.3 自定义类的实例变成普通对象

在下面的示例中，我们复制了 class C的一个实例。结果不是实例而是普通对象。

class C {}
const clone = structuredClone(new C());


assert.equal(clone instanceof C, false);
assert.equal(
  Object.getPrototypeOf(clone),
  Object.prototype
);

总结一下——structuredClone()不会复制对象的原型链：

内置对象的副本具有与原始对象相同的原型。
自定义类的实例副本始终具有原型Object.prototype（如普通对象）。

4.4 复制对象的特性属性

structuredClone()并不能复制DOM节点特性属性：

访问器变成了数据属性。
在副本中，特性属性始终具有默认值。

4.4.1 访问器成为数据属性

访问器成为数据属性：

const obj = Object.defineProperties(
  {},
  {
    accessor: {
      get: function () {
        return 123;
      },
      set: undefined,
      enumerable: true,
      configurable: true,
    },
  }
);
const copy = structuredClone(obj);
assert.deepEqual(
  Object.getOwnPropertyDescriptors(copy),
  {
    accessor: {
      value: 123,
      writable: true,
      enumerable: true,
      configurable: true,
    },
  }
);

4.4.2 属性的副本具有默认属性值

副本的数据属性始终具有以下属性：

writable: true,
enumerable: true,
configurable: true,

const obj = Object.defineProperties(
  {},
  {
    accessor: {
      get: function () {
        return 123;
      },
      set: undefined,
      enumerable: true,
      configurable: true,
    },
    readOnlyProp: {
      value: 'abc',
      writable: false,
      enumerable: true,
      configurable: true,
    },
  }
);
const copy = structuredClone(obj);
assert.deepEqual(
  Object.getOwnPropertyDescriptors(copy),
  {
    accessor: {
      value: 123,
      writable: true,
      enumerable: true,
      configurable: true,
    },
    readOnlyProp: {
      value: 'abc',
      writable: true,
      enumerable: true,
      configurable: true,
    }
  }
);