浅拷贝&深拷贝

2024-02-02 01:01:24

浅拷贝和深拷贝的原理

在JavaScript中，对象是一种引用类型，这意味着对象本身在内存中存储的是一个地址，指向实际存储对象数据的位置。当我们对对象进行赋值时，实际上是复制了这个地址，而不是复制对象本身。因此，如果我们修改了对象的属性，那么所有指向该对象的变量都会受到影响。

浅拷贝和深拷贝都是为了解决这个问题而产生的。浅拷贝只复制对象的属性，而深拷贝则复制对象的所有属性及其嵌套对象。

浅拷贝可以通过Object.assign()方法实现，如下所示：

const obj1 = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main Street",
    city: "Anytown",
    state: "CA",
  },
};

const obj2 = Object.assign({}, obj1);

obj2.name = "Jane Doe";

console.log(obj1); // { name: "John Doe", age: 30, address: { street: "123 Main Street", city: "Anytown", state: "CA" } }
console.log(obj2); // { name: "Jane Doe", age: 30, address: { street: "123 Main Street", city: "Anytown", state: "CA" } }

在上面的示例中，我们首先创建了一个对象obj1，然后使用Object.assign()方法创建了一个新对象obj2，并将obj1作为参数传递给该方法。Object.assign()方法将obj1的所有属性复制到obj2中，包括嵌套对象address。

因此，当我们修改obj2的name属性时，obj1的name属性不会受到影响。这是因为Object.assign()方法只复制了对象的属性，而不是复制对象本身。

深拷贝可以通过递归实现，如下所示：

function deepCopy(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }

  const newObj = {};

  for (const key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }

  return newObj;
}

const obj1 = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main Street",
    city: "Anytown",
    state: "CA",
  },
};

const obj2 = deepCopy(obj1);

obj2.name = "Jane Doe";

console.log(obj1); // { name: "John Doe", age: 30, address: { street: "123 Main Street", city: "Anytown", state: "CA" } }
console.log(obj2); // { name: "Jane Doe", age: 30, address: { street: "123 Main Street", city: "Anytown", state: "CA" } }

在上面的示例中，我们首先创建了一个名为deepCopy()的函数，用于对对象进行深拷贝。该函数首先检查obj是否是对象，如果不是，则直接返回obj。如果obj是对象，则创建一个新的对象newObj。然后，该函数遍历obj的所有属性，并使用deepCopy()函数对每个属性进行深拷贝。最后，该函数将newObj返回。

因此，当我们修改obj2的name属性时，obj1的name属性不会受到影响。这是因为deepCopy()函数复制了对象的所有属性及其嵌套对象。