JavaScript 深拷贝与浅拷贝：深入解析底层机制

2023-12-16 00:08:05

在 JavaScript 的领域里，拷贝对象是一个至关重要的操作，它决定着程序中数据的流通方式。JavaScript 提供了两种拷贝对象的方法：浅拷贝和深拷贝。理解这两种复制机制之间的细微差别对于开发者至关重要，因为它们在不同的编程场景中有着各自的优势和缺陷。

浅拷贝是一种快速且内存效率高的操作，它仅复制对象本身而不复制其嵌套对象。浅拷贝的对象与原始对象指向同一块内存，因此对浅拷贝对象所做的任何更改都会反映在原始对象中。

举个例子，假设我们有一个包含嵌套对象的 JavaScript 对象：

const original = {
  name: 'John Doe',
  address: {
    street: '123 Main Street',
    city: 'Anytown',
  },
};

如果我们对 original 对象进行浅拷贝：

const shallowCopy = Object.assign({}, original);

shallowCopy 将指向与 original 相同的嵌套对象 address：

console.log(shallowCopy.address === original.address); // true

这意味着对 shallowCopy 的 address 属性进行任何更改，都会反映在 original 对象中：

shallowCopy.address.street = '456 Elm Street';
console.log(original.address.street); // 456 Elm Street

与浅拷贝不同，深拷贝会递归地复制对象及其所有嵌套对象。这意味着深拷贝的对象与原始对象独立存在，对深拷贝对象所做的任何更改都不会影响原始对象。

在 JavaScript 中，实现深拷贝的一种方法是使用 JSON.stringify() 和 JSON.parse() 函数：

const deepCopy = JSON.parse(JSON.stringify(original));

使用深拷贝，deepCopy 将获得自己的 address 对象，与 original 对象的 address 对象不同：

console.log(deepCopy.address === original.address); // false

对 deepCopy 的 address 属性进行更改不会影响 original 对象：

deepCopy.address.street = '789 Oak Street';
console.log(original.address.street); // 123 Main Street