Javascript 简明教程
JavaScript - Call Stack
JavaScript 引擎使用调用堆栈来管理执行上下文。这是一个重要的机制，通过它，JavaScript 运行引擎可以跟踪 JavaScript 代码中的函数调用。但是，JavaScript 调用堆栈的工作在内部执行，但理解 JavaScript 如何执行函数非常重要。
JavaScript 调用堆栈跟踪哪些函数或代码块需要当前运行。它按 LIFO（后进先出）方式工作。因此，在调用堆栈中添加到顶部的任何函数都会首先执行。
How JavaScript Call Stack Works?
每当您执行任何 JavaScript 代码时，它都会将全局执行上下文添加到脚本中。
当您调用任何函数时，JavaScript 引擎会将函数添加到调用堆栈中。之后，当您从外部函数中调用任何嵌套函数时，它会在调用堆栈中添加一个嵌套函数。
当内部函数的执行完成后，它会从调用堆栈中弹出该函数。接下来，它执行外部函数并将其从调用堆栈中弹出。然后，它开始执行全局上下文中的代码。
当调用堆栈变为空时，脚本停止运行。
让我们通过示例了解 JavaScript 调用堆栈。
function two() {
console.log("this is function two");
}
function one() {
two();
console.log("This is function one");
}
one();以上的代码会像这样执行。
-
当代码的执行开始时，调用堆栈保持为空，直到执行到达 one() 函数。
-
在调用堆栈中添加函数 one()。现在，调用堆栈是 [one()]。
-
执行函数 one() 的第一行，它调用函数 two()。
-
在调用堆栈中添加函数 two()。现在，调用堆栈是 [two(), one()]。
-
执行函数 two() 的所有行。
-
返回执行函数 one() 的其余代码行。
-
从调用堆栈中删除函数 two()。现在，调用堆栈是 [one()]。
-
一、当执行完某个函数的剩余代码后，JavaScript引擎将开始执行剩余代码。
-
二、从调用堆栈中删除某个函数。此时，调用堆栈为空。
-
Execute the remaining code.
Example
三、每当我们执行以下代码时，它会将全局执行上下文添加到调用堆栈中。每当它从全局执行竞赛中调用任何函数时，它会将该函数添加到调用堆栈，并首先开始执行该函数。
四、当从特定函数调用另一个函数时，它会添加到调用堆栈中并获得执行优先权。
五、当特定函数执行完成后，解释器会从调用堆栈中删除它。
六、每当堆栈占用空间超过其大小时，它会抛出“堆栈溢出”错误。
<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>