Javascript 赋值机制详解

Javascript 是一门动态的编程语言，它的赋值机制相比一些静态编程语言来说要复杂得多。本文将详细讲解 Javascript 赋值机制的原理、规则和示例。

变量的赋值

基本类型

在 Javascript 中，变量分为基本类型和引用类型。基本类型包括 Number、String、Boolean、null、undefined 和 Symbol。

对于基本类型的变量，将一个变量的值赋给另外一个变量时，会将该变量的值复制一份，赋给新的变量。这种赋值方式称为值传递（pass by value）。

示例代码：

let a = 10;
let b = a;
b = 20;
console.log(a); // 10
console.log(b); // 20

在上面的代码中，变量 a 的值是 10，将其赋值给变量 b 后，修改 b 的值不会影响 a 的值。

引用类型

引用类型包括对象（Object）、数组（Array）、函数（Function）等。

对于引用类型的变量，将一个变量的值赋给另外一个变量时，会将该变量的引用复制一份，赋给新的变量。这种赋值方式称为引用传递（pass by reference）。

示例代码：

let arr1 = [1, 2, 3];
let arr2 = arr1;
arr2.push(4);
console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3, 4]

在上面的代码中，变量 arr1 和 arr2 都引用了同一个数组，对 arr2 的修改也会影响到 arr1。

对象的赋值

浅拷贝和深拷贝

在对对象进行赋值时，也是将对象的引用赋值给新的变量。但是，如果对对象的属性进行修改，因为是同一个对象，所有引用该对象的变量都会受到影响。

示例代码：

let obj1 = { name: 'Tom', age: 18 };
let obj2 = obj1;
obj2.age = 20;
console.log(obj1); // { name: 'Tom', age: 20 }
console.log(obj2); // { name: 'Tom', age: 20 }

以上代码执行后，变量 obj1 和 obj2 都引用了同一个对象，对 obj2 的修改也会影响到 obj1。

因此，在对对象进行赋值时，要注意浅拷贝和深拷贝的问题。浅拷贝只复制对象的一层属性，深拷贝会将所有的属性都复制一份，如果是嵌套的对象也会进行递归复制。

浅拷贝示例

示例代码：

let obj1 = { name: 'Tom', age: 18 };
let obj2 = Object.assign({}, obj1);
obj2.age = 20;
console.log(obj1); // { name: 'Tom', age: 18 }
console.log(obj2); // { name: 'Tom', age: 20 }

以上代码使用了 Object.assign() 方法进行浅拷贝，新创建一个空对象 {}，将属性复制到该对象上。对 obj2 的修改不会影响到原对象 obj1。

深拷贝示例

示例代码：

let obj1 = { name: 'Tom', age: 18, skill: { language: 'Javascript' } };
let obj2 = JSON.parse(JSON.stringify(obj1));
obj2.skill.language = 'Java';
console.log(obj1); // { name: 'Tom', age: 18, skill: { language: 'Javascript' } }
console.log(obj2); // { name: 'Tom', age: 18, skill: { language: 'Java' } }

以上代码使用了 JSON.stringify() 方法将对象转为 JSON 字符串，再用 JSON.parse() 方法将字符串转回对象，实现深拷贝。对 obj2 的修改不会影响到原对象 obj1。

简单赋值

在 Javascript 中，使用等号 = 进行赋值时，根据该操作符的结合性和优先级，会先对等号右边的表达式进行求值，然后将该值赋给左边的变量。

示例代码：

let a = 1 + 2 + 3;
let b;
b = a = 4;
console.log(a); // 4
console.log(b); // 4

在以上代码中，由于 = 操作符的优先级比 + 低，所以先对右侧表达式 1 + 2 + 3 进行求值，得到 6，再将 6 赋值给变量 a。第二行代码中，先将 4 赋值给 a，再将 a 赋值给 b。

总结

本文介绍了 Javascript 基本类型和引用类型的赋值机制，以及对象的浅拷贝和深拷贝的问题。同时介绍了简单赋值的规则和示例，希望能够帮助各位理解 Javascript 的赋值机制。