JS 浅拷贝与深拷贝

2024-02-04 20:56:09

揭秘JS赋值与堆栈内存

浅拷贝

在JavaScript中，对象之间的赋值是通过引用拷贝来完成的。这意味着当我们给一个对象变量赋值时，实际拷贝的只是该对象在内存中的引用地址，而不是对象本身。换言之，两个变量指向同一个对象实体。

这种赋值方式被称为浅拷贝。浅拷贝只拷贝对象本身的属性，而不拷贝对象的嵌套对象或数组。例如：

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

const obj2 = obj1;

现在，如果我们修改obj2的属性，obj1也会受到影响，因为它们指向同一个对象实体。例如：

obj2.name = 'Jane Doe';

console.log(obj1.name); // 输出: 'Jane Doe'

深拷贝

深拷贝与浅拷贝不同，它会复制对象及其所有嵌套对象或数组。这意味着两个变量指向完全不同的对象实体，即使它们具有相同的值。

要实现深拷贝，我们可以使用JSON.parse()和JSON.stringify()方法。例如：

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

const obj2 = JSON.parse(JSON.stringify(obj1));

现在，如果我们修改obj2的属性，obj1不会受到影响，因为它们指向不同的对象实体。例如：

obj2.name = 'Jane Doe';

console.log(obj1.name); // 输出: 'John Doe'

浅拷贝和深拷贝的应用场景

浅拷贝和深拷贝都有各自的应用场景。浅拷贝通常用于对象之间的数据共享，而深拷贝则用于对象之间的数据隔离。

例如，如果我们想创建一个新对象，但又不想修改原始对象，则可以使用深拷贝。例如：

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

const obj2 = JSON.parse(JSON.stringify(obj1));

obj2.address.street = '456 Elm Street';

console.log(obj1.address.street); // 输出: '123 Main Street'