JavaScript - 调用栈

你好，未来的JavaScript魔法师们！今天，我们将深入探讨JavaScript中最基本的概念之一：调用栈（Call Stack）。如果你之前从未听说过它——别担心，到这个教程结束时，你将成为调用栈的专家！所以，拿起你最喜欢的饮料，坐舒适些，让我们一起踏上这段激动人心的旅程。

JavaScript - Call Stack

什么是调用栈？

在我们深入细节之前，让我们从一个简单的类比开始。想象你在阅读一本“选择你自己的冒险”书籍。当你阅读时，你会在每个决策点保留一个书签。当你到达一个路径的尽头时，你会回到上一个书签，尝试一条不同的路线。JavaScript中的调用栈与此类似——它跟踪程序在执行完一个函数后应该返回的位置。

从技术术语来说，调用栈是一个使用后进先出（LIFO）原则来临时存储和管理JavaScript中函数调用（调用）的数据结构。

JavaScript调用栈是如何工作的？

现在，让我们看看JavaScript中的调用栈实际是如何工作的。我们将从一个简单的例子开始，然后逐渐增加复杂度。

示例 1：一个简单的函数调用

function greet(name) {
console.log("Hello, " + name + "!");
}

greet("Alice");

当这段代码运行时，调用栈中发生以下情况：

greet 函数被推入栈中。
函数执行，将问候语输出到控制台。
函数完成，并从栈中弹出。

很简单，对吧？现在，让我们看一个稍微复杂一点的例子。

示例 2：嵌套函数调用

function multiply(a, b) {
return a * b;
}

function square(n) {
return multiply(n, n);
}

function printSquare(n) {
var squared = square(n);
console.log(n + " squared is " + squared);
}

printSquare(4);

当我们运行 printSquare(4) 时，调用栈的操作如下：

printSquare(4) 被推入栈中。
在 printSquare 内部，square(4) 被调用并推入栈中。
在 square 内部，multiply(4, 4) 被调用并推入栈中。
multiply 完成并从栈中弹出。
square 完成并从栈中弹出。
printSquare 输出结果并完成，然后从栈中弹出。

你能看到函数被调用和完成时，栈是如何增长和收缩的吗？就像一个乐高积木塔被搭建起来然后拆掉！

示例 3：递归函数

递归函数是展示调用栈如何增长的完美方式。让我们来看一个经典例子：计算阶乘。

function factorial(n) {
if (n === 1) {
return 1;
} else {
return n * factorial(n - 1);
}
}

console.log(factorial(5));

当我们调用 factorial(5) 时，调用栈将如下所示：

factorial(5) 被推入
factorial(4) 被推入
factorial(3) 被推入
factorial(2) 被推入
factorial(1) 被推入
factorial(1) 返回 1 并弹出
factorial(2) 计算 2 * 1，返回 2 并弹出
factorial(3) 计算 3 * 2，返回 6 并弹出
factorial(4) 计算 4 * 6，返回 24 并弹出
factorial(5) 计算 5 * 24，返回 120 并弹出

哇！这可是很多推入和弹出，不是吗？但这就是JavaScript如何跟踪所有那些嵌套函数调用的方式。

JavaScript调用栈溢出

现在我们理解了调用栈是如何工作的，让我们来谈谈当事情出错时会发生什么。你有没有听说过“栈溢出”这个术语？它不仅仅是一个绝望的程序员的网站（尽管它也是那样）——它是一个实际可能会在你的代码中出现的错误。

栈溢出发生在函数调用过多，调用栈超出了其大小限制时。最常见的原因？无限递归！

示例 4：栈溢出

function causeStackOverflow() {
causeStackOverflow();
}

causeStackOverflow();

如果你运行这段代码，你会得到一个错误消息，比如“Maximum call stack size exceeded”。这就像试图建造一个到达月球的乐高积木塔——最终，你会用完积木（或者在这个例子中，内存）！

为了避免栈溢出，请始终确保你的递归函数有一个正确的基例来终止递归。

调用栈方法

JavaScript没有提供直接操作调用栈的方法，但有一些相关的函数对于调试和理解调用栈非常有用：

方法	描述
`console.trace()`	输出调用栈的堆栈跟踪到控制台
`Error.stack`	一个非标准属性，返回调用栈的堆栈跟踪

以下是一个使用 console.trace() 的快速示例：

function func1() {
func2();
}

function func2() {
func3();
}

function func3() {
console.trace();
}

func1();

这将输出一个调用序列的堆栈跟踪：func3 -> func2 -> func1。

结论

好了，各位！我们已经穿越了JavaScript调用栈的迷人世界。从简单的函数调用到复杂的递归，你现在理解了JavaScript是如何在代码中跟踪其位置的。

记住，调用栈就像一个乐于助人的助手，总是保持在JavaScript故事书中的位置。但就像任何好助手一样，它也有自己的限制——所以请善待它，避免那些讨厌的栈溢出！

在你继续JavaScript冒险的旅程中，请记住调用栈。理解它不仅会帮助你写出更好的代码，也会让调试变得容易得多。快乐编码，愿你的栈总是完美平衡！

Credits: Image by storyset