调用栈：为什么JavaScript代码会出现栈溢出|浏览器篇

在上篇文章中，我们讲到了，当一段代码被执行时，JavaScript引擎先会对其进行编译，并创建执行上下文。但是并没有明确说明到底什么样的代码才算符合规范

那么接下来我们就来明确下，哪些情况下代码才算是“一段”代码，才会在执行之前就进行编译并创建执行上下文。一般说来，有这么三种情况

• 当JavaScript执行全局代码的时候，会编译全局代码并创建全局执行上下文，而且在整个页面的生存周期内，全局执行上下文只有一份。
• 当调用一个函数的时候，函数体内的代码会被编译，并创建函数执行上下文，一般情况下，函数执行结束之后，创建的函数执行上下文会被销毁。
• 当使用eval函数的时候，eval的代码也会被编译，并创建执行上下文。

好了，又进一步理解了执行上下文，那本节我们就在这基础之上继续深入，一起聊聊调用栈。学习调用栈至少有以下三点好处：

• 可以帮助你了解JavaScript引擎背后的工作原理；
• 让你有调试JavaScript代码的能力；
• 帮助你搞定面试，因为面试过程中，调用栈也是出境率非常高的题目

比如你在写JavaScript代码的时候，有时候可能会遇到栈溢出的错误，如下图所示：

那为什么会出现这种错误呢？这就涉及到了调用栈的内容。你应该知道JavaScript中有很多函数，经常会出现在一个函数中调用另外一个函数的情况，调用栈就是用来管理函数调用关系的一种数据结构。因此要讲清楚调用栈，你还要先弄明白函数调用和栈结构

原理拆解： 执行经典脚本时，引擎先建立全局执行上下文；每次普通函数调用又会创建对应的函数执行上下文，并把代表该次调用的栈帧压入调用栈。函数返回后，栈帧按后进先出的顺序弹出，调用者才继续执行。eval 执行的字符串也要被解析、编译并在相应执行环境中运行。调用栈管理的是尚未完成的同步调用关系，不是所有已经调用过的函数历史。

最小验证： 输入以下代码，要验证正常嵌套调用的入栈与出栈顺序，以及无终止条件的递归会持续累积栈帧。

function third() {
  console.trace("stack in third");
  return 3;
}

function second() {
  return third() + 2;
}

function first() {
  return second() + 1;
}

console.log(first());

function recurse(depth) {
  return recurse(depth + 1);
}

try {
  recurse(0);
} catch (error) {
  console.log(error.name);
  console.log(error instanceof RangeError);
}

console.trace 展示的调用路径应包含 third、second、first，随后 console.log 输出 6，说明返回值沿相反方向逐层传回。recurse 没有基线条件，每次调用都必须等待下一层返回，栈帧无法弹出；达到当前引擎允许的深度后，通常会捕获到 RangeError，第二项输出 true。

边界与排查： 最大栈深度属于引擎和运行环境的实现限制，不能依赖某个固定数字；不同浏览器版本、启动参数和函数体复杂度都可能改变触发位置。异步回调通常会在后续任务中重新进入调用栈，不会像同步递归一样保留整条调用链。工程排查可结合错误堆栈寻找重复帧，并检查递归终止条件是否可达；数据规模不受控时，可改用显式数组模拟栈或用循环完成遍历。

函数调用就是运行一个函数，具体使用方式是使用函数名称跟着一对小括号。下面我们看个简单的示例代码

var a = 2
function add(){
var b = 10
return  a+b
}
add()

这段代码很简单，先是创建了一个add函数，接着在代码的最下面又调用了该函数。

那么下面我们就利用这段简单的代码来解释下函数调用的过程。

在执行到函数add()之前，JavaScript引擎会为上面这段代码创建全局执行上下文，包含了声明的函数和变量，你可以参考下图：

从图中可以看出，代码中全局变量和函数都保存在全局上下文的变量环境中。

执行上下文准备好之后，便开始执行全局代码，当执行到add这儿时，JavaScript判断这是一个函数调用，那么将执行以下操作：

• 首先，从全局执行上下文中，取出add函数代码。
• 其次，对add函数的这段代码进行编译，并创建该函数的执行上下文和可执行代码。
• 最后，执行代码，输出结果。

完整流程你可以参考下图：

就这样，当执行到add函数的时候，我们就有了两个执行上下文了——全局执行上下文和add函数的执行上下文。

也就是说在执行JavaScript时，可能会存在多个执行上下文，那么JavaScript引擎是如何管理这些执行上下文的呢？

答案是通过一种叫栈的数据结构来管理的。那什么是栈呢？它又是如何管理这些执行上下文呢？