JS对象赋值详解

1. 介绍

在JavaScript中，对象是一种复合数据类型，用于存储和传递多个值的集合。在实际开发中，我们经常需要对对象进行赋值操作。本文将详细介绍JS中对象赋值的相关知识。

2. 对象的创建

在JS中，我们可以使用对象字面量或者构造函数的方式来创建对象。

2.1 使用对象字面量创建对象

对象字面量是一种简洁而常用的对象创建方式，通过使用花括号{}来定义对象，可以在花括号中添加属性和方法。

示例代码：

const person = {
  name: "Alice",
  age: 20,
  sayHi() {
    console.log("Hi, I'm " + this.name);
  }
};

2.2 使用构造函数创建对象

构造函数是一种特殊的函数，用于创建对象实例。通过使用new关键字配合构造函数可以创建对象。

示例代码：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHi = function() {
    console.log("Hi, I'm " + this.name);
  };
}

const person = new Person("Alice", 20);

3. 对象赋值的基本概念

在JS中，对象是引用类型，当我们进行对象赋值时，实际上是将对象的引用赋值给了目标变量。也就是说，目标变量和源对象引用同一个对象。这一点与基本数据类型的赋值不同。

示例代码：

const obj1 = { name: "Alice" };
const obj2 = obj1;

console.log(obj1.name);  // 输出："Alice"
console.log(obj2.name);  // 输出："Alice"

obj2.name = "Bob";

console.log(obj1.name);  // 输出："Bob"
console.log(obj2.name);  // 输出："Bob"

4. 浅拷贝与深拷贝

在JS中，对象赋值存在浅拷贝和深拷贝的概念。浅拷贝只拷贝对象的引用，而深拷贝会递归地复制对象及其所有子对象。

4.1 浅拷贝

浅拷贝只是复制了对象的引用，当源对象发生变化时，目标对象也会相应地发生变化。

示例代码：

const obj1 = { name: "Alice" };
const obj2 = obj1;

console.log(obj1.name);  // 输出："Alice"
console.log(obj2.name);  // 输出："Alice"

obj2.name = "Bob";

console.log(obj1.name);  // 输出："Bob"
console.log(obj2.name);  // 输出："Bob"

4.2 深拷贝

深拷贝创建了一个完全独立的对象副本，当源对象发生变化时，目标对象不会发生变化。

在JS中，实现深拷贝可以使用JSON的方式或者专门的深拷贝函数，比如lodash库中的cloneDeep函数。

示例代码：

const obj1 = { name: "Alice" };
const obj2 = JSON.parse(JSON.stringify(obj1));

console.log(obj1.name);  // 输出："Alice"
console.log(obj2.name);  // 输出："Alice"

obj2.name = "Bob";

console.log(obj1.name);  // 输出："Alice"
console.log(obj2.name);  // 输出："Bob"

5. 属性的赋值方式

除了整个对象的赋值外，我们还可以对对象的属性进行单独赋值。

5.1 使用`.`操作符

使用.操作符可以直接访问对象的属性，并进行赋值。

示例代码：

const person = {
  name: "Alice",
  age: 20
};

person.name = "Bob";
person.age = 25;

console.log(person.name);  // 输出："Bob"
console.log(person.age);   // 输出：25

5.2 使用`[]`操作符

使用[]操作符可以通过变量或者表达式来访问对象的属性，并进行赋值。

示例代码：

const person = {
  name: "Alice",
  age: 20
};

const prop = "name";
person[prop] = "Bob";
person["age"] = 25;

console.log(person.name);  // 输出："Bob"
console.log(person.age);   // 输出：25

5.3 使用`Object.defineProperty`方法

Object.defineProperty方法可以通过定义属性的特性来进行赋值。

示例代码：

const person = {
  name: "Alice",
  age: 20
};

Object.defineProperty(person, "name", {
  value: "Bob",
  writable: true
});

console.log(person.name);  // 输出："Bob"

6. 对象的解构赋值

JS提供了对象的解构赋值语法，可以方便地将对象的属性值解构到变量中。

示例代码：

const person = {
  name: "Alice",
  age: 20
};

const { name, age } = person;

console.log(name);  // 输出："Alice"
console.log(age);   // 输出：20

7. 对象方法的赋值

对象方法是指对象中的函数，在JS中，我们可以通过以下几种方式对对象方法进行赋值。

7.1 对象字面量中赋值

在对象字面量中，我们可以使用简洁的语法来定义对象方法。

示例代码：

const person = {
  name: "Alice",
  sayHi() {
    console.log("Hi, I'm " + this.name);
  }
};

person.sayHi();  // 输出："Hi, I'm Alice"

7.2 使用函数表达式赋值

我们可以使用函数表达式来创建函数，并将函数赋值给对象属性。

示例代码：

const person = {
  name: "Alice",
  sayHi: function() {
    console.log("Hi, I'm " + this.name);
  }
};

person.sayHi();  // 输出："Hi, I'm Alice"

7.3 使用构造函数赋值

我们可以使用构造函数的方式来创建对象，并将函数赋值给对象属性。

示例代码：

function Person(name) {
  this.name = name;
  this.sayHi = function() {
    console.log("Hi, I'm " + this.name);
  };
}

const person = new Person("Alice");
person.sayHi();  // 输出："Hi, I'm Alice"