前端进阶（第一期）——调用堆栈笔记：值传递与引用传递

在前端开发中，值传递和引用传递是两个至关重要的概念，它们决定了不同数据类型在程序中的行为方式。本文将深入探讨这两个概念，通过调用堆栈笔记，带你理解值类型数据和引用类型数据的本质差异，掌握 JavaScript 中的内存管理机制，提升代码编写水平。

值传递 vs. 引用传递

在 JavaScript 中，值传递和引用传递涉及两个关键因素：

• 值复制： 值传递中，变量保存的是数据的原始值，复制一份新的值存储在新的内存空间中。
• 地址复制： 引用传递中，变量保存的是数据的地址（指针），复制一份新的地址存储在新的内存空间中，指向堆中相同的值。

值类型数据

值类型数据是值的复制，在进行赋值操作时，系统会为新变量开辟新的存储空间，并将原变量的值复制到新变量中。举个例子：

let a = 10;
let b = a;

a = 20;

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

可以看到，当我们修改变量 a 的值时，变量 b 的值保持不变，因为 b 存储的是 a 原始值的副本。

引用类型数据

引用类型数据仅仅是地址的复制，在进行赋值操作时，系统会为新变量开辟新的存储空间，并将原变量的地址（指针）复制到新变量中。例如：

let obj1 = { name: "John Doe" };
let obj2 = obj1;

obj1.name = "Jane Doe";

console.log(obj1); // 输出：{ name: "Jane Doe" }
console.log(obj2); // 输出：{ name: "Jane Doe" }

在这个例子中，当我们修改 obj1 对象的属性时，obj2 对象的属性值也随之改变，因为 obj1 和 obj2 指向同一个对象。

调用堆栈笔记

调用堆栈是一个数据结构，它跟踪函数调用和返回的过程。当函数被调用时，它会被推入堆栈中，当函数返回时，它会被从堆栈中弹出。通过调用堆栈，我们可以了解函数调用的顺序和嵌套情况。

在下图中，我们展示了调用堆栈的结构：

[调用堆栈示意图]

值传递和引用传递与调用堆栈

调用堆栈有助于我们理解值传递和引用传递在函数调用中的表现。当一个值类型数据作为函数参数传递时，它的值会被复制到函数中，而当一个引用类型数据作为函数参数传递时，它的地址（指针）会被复制到函数中。

这意味着，对值类型数据的修改仅限于函数内部，不会影响函数外部的变量。而对引用类型数据的修改，既会影响函数内部的变量，也会影响函数外部的变量。

总结

值传递和引用传递是 JavaScript 中内存管理的重要概念，它们决定了不同数据类型在程序中的行为方式。理解这两个概念对于编写高质量、可维护的代码至关重要。

通过结合调用堆栈笔记，我们深入探索了值类型数据和引用类型数据的本质差异，掌握了 JavaScript 中的内存管理机制。这些知识将帮助开发者提升代码编写水平，编写更加健壮、高效的应用程序。