JavaScript引用赋值与传值赋值实例分析

在JavaScript中，理解引用赋值和传值赋值是掌握变量赋值和函数参数传递的关键。这两种赋值方式在处理基本类型和引用类型时表现出不同的行为。本文将通过实例分析，详细探讨这两种赋值方式的区别及其应用场景。

1. 基本类型与引用类型

在JavaScript中，数据类型可以分为两大类：基本类型（Primitive Types）和引用类型（Reference Types）。

• 基本类型：包括number、string、boolean、null、undefined、symbol（ES6新增）和bigint（ES2020新增）。基本类型的值是不可变的，存储在栈内存中。

• 引用类型：包括object、array、function等。引用类型的值是可变的，存储在堆内存中，变量存储的是指向堆内存中对象的引用（即内存地址）。

2. 传值赋值（Pass by Value）

传值赋值是指将变量的值复制一份，然后将复制的值赋给另一个变量。对于基本类型，JavaScript采用传值赋值的方式。

实例分析

let a = 10;
let b = a;  // 传值赋值，b 是 a 的副本

console.log(a); // 输出: 10
console.log(b); // 输出: 10

a = 20;  // 修改 a 的值

console.log(a); // 输出: 20
console.log(b); // 输出: 10

在这个例子中，a和b是两个独立的变量，b是a的副本。修改a的值不会影响b的值，因为它们是两个不同的内存地址。

3. 引用赋值（Pass by Reference）

引用赋值是指将变量的引用（即内存地址）复制一份，然后将复制的引用赋给另一个变量。对于引用类型，JavaScript采用引用赋值的方式。

实例分析

let obj1 = { name: 'Alice' };
let obj2 = obj1;  // 引用赋值，obj2 和 obj1 指向同一个对象

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

obj1.name = 'Bob';  // 修改 obj1 的属性

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

在这个例子中，obj1和obj2指向同一个对象。修改obj1的属性会影响obj2的属性，因为它们共享同一个内存地址。

4. 函数参数传递

在JavaScript中，函数参数的传递方式与变量赋值方式一致：基本类型采用传值赋值，引用类型采用引用赋值。

实例分析

function changeValue(primitive, reference) {
    primitive = 100;  // 修改基本类型参数
    reference.name = 'Charlie';  // 修改引用类型参数的属性
}

let num = 10;
let person = { name: 'Alice' };

changeValue(num, person);

console.log(num); // 输出: 10
console.log(person.name); // 输出: Charlie

在这个例子中，num是基本类型，函数内部修改primitive不会影响外部的num。而person是引用类型，函数内部修改reference的属性会影响外部的person。

5. 总结

• 传值赋值：适用于基本类型，变量的值被复制，修改一个变量不会影响另一个变量。
• 引用赋值：适用于引用类型，变量的引用被复制，修改一个变量会影响另一个变量。

理解这两种赋值方式有助于避免在编程中遇到意外的行为，特别是在处理复杂对象和函数参数传递时。掌握这些概念，可以更好地编写高效、可维护的JavaScript代码。