JavaScript - 调用栈

JavaScript 引擎使用调用栈来管理执行上下文。它是 JavaScript 运行引擎跟踪 JavaScript 代码中函数调用的重要机制。然而，JavaScript 调用栈的工作是在内部执行的，但理解 JavaScript 如何执行函数非常重要。

JavaScript 调用栈跟踪当前需要运行的函数或代码块。它以 LIFO（后进先出）的方式工作。因此，任何添加到调用栈顶部的函数都会首先被执行。

JavaScript 调用栈如何工作？

每当你执行任何 JavaScript 代码时，它都会将全局执行上下文添加到脚本中。

当你调用任何函数时，JavaScript 引擎会将该函数添加到调用栈中。之后，当从外部函数调用任何嵌套函数时，它会将嵌套函数添加到调用栈中。

当内部函数的执行完成后，它会将该函数从调用栈中弹出。接下来，它执行外部函数并将其从调用栈中弹出。再次，它开始执行全局上下文中的代码。

当调用栈为空时，脚本停止运行。

让我们通过示例来了解 JavaScript 调用栈。

function two() {
  console.log("this is function two");
}

function one() {
  two();
  console.log("This is function one");
}

one();

上述代码将按如下方式执行。

1. 当代码执行开始时，调用栈为空，直到执行到达 one() 函数。

2. 将函数 one() 添加到调用栈中。现在，调用栈为 [one()]。

3. 执行函数 one() 的第一行，该行调用函数 two()。

4. 将函数 two() 添加到调用栈中。现在，调用栈为 [two(), one()]。

5. 执行函数 two() 的所有行。

6. 返回执行函数 one() 的其余代码行。

7. 从调用栈中删除函数 two()。现在，调用栈为 [one()]。

8. 开始执行函数 one() 的其余代码。当函数 one() 的执行完成后，JavaScript 引擎开始执行其余代码。

9. 从调用栈中删除函数 one()。现在，调用栈为空。

10. 执行其余代码。

示例

每当我们执行以下代码时，它都会在调用栈中添加全局执行上下文。每当它从全局执行上下文中调用任何函数时，它都会将该函数添加到调用栈中，并首先开始执行该函数。

当从特定函数调用另一个函数时，它会被添加到调用栈中，并获得执行优先级。

当特定函数的执行完成时，解释器会将其从调用栈中删除。

每当堆栈占用的空间超过其大小限制时，它都会抛出“堆栈溢出”错误。

<html>
<body>
   <h2> JavaScript - Call stack </h2>
   <div id = "output"></div>
   <script>

    const output = document.getElementById("output");
    function two() {
        output.innerHTML += "two <br>";
    }

    function one() {
        two();
        output.innerHTML += "one <br>";
    }

    one();
</script>
</body>
</html>

JavaScript 调用栈溢出

当调用栈的大小超过定义的大小限制时，就会发生调用栈溢出 (call stack overflow)。通常情况下，当递归函数没有退出点时，就会发生栈溢出。

例如，在下面的代码中，fib() 函数没有退出点，因此它会抛出调用栈溢出错误。

function fib() {
   fib();
}
fib();

JavaScript 是一种单线程编程语言。因此，它从上到下逐行执行代码。这意味着 JavaScript 程序只能拥有一个调用栈，并且一次只能执行一行代码。

打印页面