Javascript 简明教程

JavaScript - Call Stack

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

JavaScript engine uses the call stacks to manage the execution context. It is an important mechanism by which a JavaScript run engine keeps track of the function calls in a JavaScript code. However, the working of the JavaScript call stack is performed internally, but it is important to understand how JavaScript executes the functions.

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

JavaScript call stack keeps track of what function or block of code needs to run currently. It works in the LIFO (Last In, First Out) manner. So, whatever function is added at the top in the call stack it gets executed first.

How JavaScript Call Stack Works?

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

Whenever you execute any JavaScript code, it adds the global execution context to the script.

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

When you call any function, the JavaScript engine adds the function to the call stack. After that, when you call any nested function from the outer function, it adds a nested function in the call stack.

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

When the execution of the inner function is complete, it pops the function from the call stack. Next, it executes the outer function and pops it from the call stack. Again, it starts executing the code in the global context.

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

When the call stack becomes empty, the script stops running.

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

Let’s understand the JavaScript call stack via example.

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

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

one();

以上的代码会像这样执行。

The above code would be executed like this.

When the execution of the code starts, the call stack remains empty until execution reaches the one() function.
Add function one() in the call stack. Now, the call stack is [one()].
Execute the first line of function one(), which calls the function two().
Add function two() in the call stack. Now, the call stack is [two(), one()].
Execute all lines of function two().
Move back to execute the remaining lines of code of function one().
Delete the function two() from the call stack. Now, the call stack is [one()].
Start executing the remaining code of the function one(). When the execution of function one() completes, the JavaScript engine starts executing the remaining code.
Delete function one() from the call stack. Now, the call stack is empty.
Execute the remaining code.

Example

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

Whenever we execute the below code, it will add the global execution context in the call stack. Whenever it calls any function from the global execution contest, it will add that function to the call stack, and start executing that function first.

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

When another function is called from the particular function, it gets added to the call stack and gets priority for the execution.

五、当特定函数执行完成后，解释器会从调用堆栈中删除它。

When the execution of the particular function is finished, the interpreter removes it from the call stack.

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

Whenever a stack takes more space than its size, it throws the 'stack overflow' error.

<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

七、每当调用堆栈的大小超过定义的大小时，就会发生调用堆栈溢出。通常，每当递归函数没有退出点调用时，就会发生堆栈溢出。

Whenever the size of the call stack exceeds the defined size, a call stack overflow occurs. Generally, whenever a recursive function doesn’t have an exit point call, a stack overflow occurs.

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

For example, in the code below, the fib() function doesn’t have an exit point. So, it throws a call stack overflow error.

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

九、JavaScript是一种单线程编程语言。因此，它按从上到下的顺序一行一行地运行代码。这意味着JavaScript程序只能有一个调用堆栈，并且一次只能执行一行。

Javascript is a single-thread programming language. So, it runs the code line-by-line from top to bottom. It means a JavaScript program can have only 1 call stack, and it can execute one line at a time.