欢迎关注我的公号《人生代码》

什么是 JavaScript 调用栈，为什么它是必要的？

JavaScript 引擎是一个单线程解析器，而单线程解析器由堆和单一调用栈组成。浏览器提供 Web APIs，比如：DOM，AJAX 和 定时器。

本文旨在说明什么是调用堆栈以及为什么需要调用栈？对调用栈的理解有助于我们更加清晰的知道 函数的的层次结构和执行顺序 在 JavaScript 的引擎中工作方式。

调用堆栈主要用于函数调用，由于 调用堆栈是单个的，因此函数的执行从上到下一次性完成。这意味着调用栈是同步的。

对调用栈的理解对于异步编程至关重要，后面我们会介绍。

在异步 JavaScript 中，我们有一个回调函数，一个事件循环队列和一个任务执行队列。在事件循环将回调函数 推到堆栈之后，回调函数将在执行期间由调用堆栈执行。

在此之前，让我们尝试着回答什么是调用张？

在最基本的级别上，调用栈是一种数据结构，它使用后进先出（LIFO）原理临时存储 和管理函数调用。

让我们打破之前的定义：

LIFO：当我们说调用堆栈是按照后进先出的数据结构原理进行操作时，这意味着当函数返回时，被压入堆栈的最后一个函数是第一个弹出的函数。

让我们通过堆栈跟踪错误打印到控制台来掩饰 LIFO 的代码示例：

function firstFunction(){
  throw new Error('Stack Trace Error');
}

function secondFunction(){
  firstFunction();
}

function thirdFunction(){
  secondFunction();
}

thirdFunction();

在浏览器控制台运行代码，我们会打印出此下错误信息，会打印出一个堆栈跟踪，说明如何将功能堆叠在一起，看一下改图：

你会注意到，函数作为堆栈的排序开始于 firstFunction() 这是进入堆栈的最后一个函数，并且以抛出错误弹出，然后就是 secondFunction()，然后就是 thirdFunction() 这是第一个函数在执行代码的时候将其压入堆栈。

临时存储

调用一个函数时，该函数，其参数和变量将被推入调用堆栈以形成堆栈框架，该堆栈是堆栈中的内存位置。当函数返回时（从栈弹出），将清除内存。

管理功能调用

调用堆栈回鹘每一个堆栈帧位置的记录。它知道下一个要执行的功能，并在执行后将其删除，这就是使得 JavaScript 中的代码执行顺序同步的原因。

调用堆栈如何处理函数调用？

我们将通过查看调用另一个函数的函数的示例代码来回答这个问题：

function firstFunction(){
  console.log("Hello from firstFunction");
}

function secondFunction(){
  firstFunction();
  console.log("The end from secondFunction");
}

secondFunction();

这是运行代码时发生的情况：

1. secondFunction() 执行之后，将创建一个空的堆栈框架，它是程序的主要入口点
2. secondFunction() 调用将 firstFunction() 推入堆栈
3. firstFunction() 返回并在控制台输出 “Hello from firstFunction”
4. firstFunction() 从堆栈弹出
5. 然后将执行顺序移至 secondFunction()
6. secondFunction() 返回并将 “secondFunction” 的信息打印至控制台
7. secondFunction() 从堆栈弹出，清除内存。

是什么导致堆栈溢出？

当存在没有出口点的递归函数（调用自身的函数）时，将发生堆栈溢出。

看一个例子：

function callMyself() {
  callMyself()
}

callMyself()

在浏览器执行之后，会爆出以下错误：

综上所诉

调用堆栈的主要收获是：

1. 它是单线程的，每次只能做一件事情。
2. 代码执行是同步的
3. 函数调用会创建一个占用临时内存的堆栈
4. 它的作用是 LIFO，先进后出