对象深拷贝与浅拷贝-JavaScript面向对象系列

2023-10-17 03:07:33

1. 对象回顾

对象是JavaScript中一种复杂的数据类型，它允许将相关的数据和行为组织在一起。对象由键值对组成，每个键都对应一个值。对象可以存储任何类型的数据，包括其他对象。

2. 对象的创建

可以使用两种方法来创建对象：

使用字面量语法：

const person = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

使用new和构造函数：

function Person(name, age, city) {
  this.name = name;
  this.age = age;
  this.city = city;
}

const person = new Person("John Doe", 30, "New York");

3. 基本数据类型与引用数据类型

在JavaScript中，数据类型分为基本数据类型和引用数据类型。基本数据类型包括：字符串、数字、布尔值、undefined和null。引用数据类型包括：对象、数组和函数。

基本数据类型是按值传递的，这意味着当将基本数据类型赋值给另一个变量时，两个变量都指向相同的值。引用数据类型是按引用传递的，这意味着当将引用数据类型赋值给另一个变量时，两个变量都指向同一个对象。

4. 对象的浅拷贝

对象的浅拷贝是指只拷贝对象的第一层属性，而不拷贝嵌套的对象。可以使用Object.assign()方法或扩展运算符(...)来实现对象的浅拷贝。

const person = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

const personCopy = Object.assign({}, person);

console.log(personCopy === person); // false
console.log(personCopy.name === person.name); // true
console.log(personCopy.age === person.age); // true
console.log(personCopy.city === person.city); // true

从上面的例子中可以看出，personCopy和person是不同的对象，但它们具有相同的属性值。这是因为Object.assign()方法只拷贝了person对象的第一层属性，并没有拷贝嵌套的对象。

5. 对象的深拷贝

对象的深拷贝是指拷贝对象的所有属性，包括嵌套的对象。可以使用递归算法或JSON.parse(JSON.stringify())方法来实现对象的深拷贝。

const person = {
  name: "John Doe",
  age: 30,
  city: "New York",
  address: {
    street: "123 Main Street",
    city: "New York",
    state: "NY"
  }
};

const personCopy = JSON.parse(JSON.stringify(person));

console.log(personCopy === person); // false
console.log(personCopy.name === person.name); // true
console.log(personCopy.age === person.age); // true
console.log(personCopy.city === person.city); // true
console.log(personCopy.address === person.address); // false
console.log(personCopy.address.street === person.address.street); // true
console.log(personCopy.address.city === person.address.city); // true
console.log(personCopy.address.state === person.address.state); // true