克隆的秘密：浅克隆与深克隆的本质区别

2024-01-21 16:58:31

理解对象复制

在JavaScript中，对象是一种非基本类型的数据结构。对象可以包含各种类型的数据，包括字符串、数字、布尔值、数组和函数等。对象通过键值对的形式存储数据，键是一个字符串，值可以是任何类型的数据。

对象复制是指创建新对象并将其值从另一个对象复制到新对象的过程。对象复制可以分为浅克隆和深克隆两种方式。

浅克隆

浅克隆是一种简单的对象复制方式。浅克隆只会复制对象本身的属性，而不会复制对象引用的其他对象。

例如，假设我们有一个对象user，如下所示：

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

如果我们使用浅克隆的方式创建一个新对象user2，代码如下：

const user2 = Object.assign({}, user);

那么user2将包含与user相同的属性和值，如下所示：

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

但是，user2的address属性引用的是与user相同的对象。这意味着如果我们修改user2的address属性，也会同时修改user的address属性。

深克隆

深克隆是一种更彻底的对象复制方式。深克隆会复制对象本身的属性和对象引用的所有对象。

例如，如果我们使用深克隆的方式创建一个新对象user3，代码如下：

const user3 = JSON.parse(JSON.stringify(user));

那么user3将包含与user相同的数据，包括所有引用的对象，如下所示：

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