共计 1777 个字符，预计需要花费 5 分钟才能阅读完成。
有了上一篇文章的基础，今天我们接着来学习 javascript 调用栈。
先来回顾下前面文章的内容：
三种 JavaScript 的可执行代码 (executable code)：
- 当 JavaScript 执行全局代码的时候，会编译全局代码并创建全局执行上下文，而且在整个页面的生存周期内，全局执行上下文只有一份。
- 当调用一个函数的时候，函数体内的代码会被编译，并创建函数执行上下文，一般情况下，函数执行结束之后，创建的函数执行上下文会被销毁。
- 当使用 eval 函数的时候，eval 的代码也会被编译，并创建执行上下文。
请记住这三种创建执行上下文的情况，接下来我们来看看调用栈。讲清楚调用栈之前需要先弄明白函数调用和栈结构。
函数调用
函数调用就是运行一个函数，我们结合下面的代码说明：
var a = 2
function add(){
var b = 10
return a+b
}
add() 在执行到函数 add() 之前，JavaScript 引擎会为上面这段代码创建全局执行上下文（全局代码产生执行上下文），包含了声明的函数和变量，你可以参考下图：
从图中可以看出，代码中全局变量和函数都保存在全局上下文的变量环境中。
执行上下文准备好之后，便开始执行全局代码，当执行到 add 这里，JavaScript 判断这是一个函数调用（调用函数产生执行上下文），那么将执行以下操作：
- 首先，从全局执行上下文中，取出 add 函数代码。
- 其次，对 add 函数的这段代码进行编译，并创建该函数的执行上下文和可执行代码。
- 最后，执行代码，输出结果。
完整流程参考下图：
就这样，当执行到 add 函数的时候，我们就有了两个执行上下文了——全局执行上下文和 add 函数的执行上下文。
也就是说在执行 JavaScript 时，可能会存在多个执行上下文，那么 JavaScript 引擎是如何管理这些执行上下文的呢？
答案就是我们今天的主题 —— 通过调用栈管理
JavaScript 的调用栈
JavaScript 引擎利用栈的结构来管理执行上下文。在执行上下文创建好后，JavaScript 引擎会将执行上下文压入栈中，通常把这种用来管理执行上下文的栈称为执行上下文栈，又称调用栈。
下面我们再来看段稍微复杂点的示例代码：
var a = 2
function add(b,c){return b+c}
function addAll(b,c){
var d = 10
var result = add(b,c)
return a+result+d
}
addAll(3,6)在上面这段代码中，你可以看到它是在 addAll 函数中调用了 add 函数，那在整个代码的执行过程中，调用栈是怎么变化的呢？
下面我们就一步步地分析在代码的执行过程中，调用栈的状态变化情况。
第一步，创建全局上下文，并将其压入栈底。如下图所示：
从图中我们可以看出（编译阶段），变量 a、函数 add 和 addAll 都保存到了全局上下文的变量环境对象中。
全局执行上下文压入到调用栈后，JavaScript 引擎开始执行全局代码。首先会执行 a=2 的赋值操作，执行该语句会将全局上下文变量环境中 a 的值设置为 2。设置后的全局上下文的状态如下图所示：
接下来，第二步是调用 addAll 函数。当调用该函数时，JavaScript 引擎会编译该函数，并为其创建一个执行上下文，最后还将该函数的执行上下文压入栈中，如下图所示：
addAll 函数的执行上下文创建好之后，便进入了函数代码的执行阶段了，这里先执行的是 d=10 的赋值操作，执行语句会将 addAll 函数执行上下文中的 d 由 undefined 变成了 10。
然后接着往下执行，第三步，当执行到 add 函数调用语句时，同样会为其创建执行上下文，并将其压入调用栈，如下图所示：
当 add 函数返回时，该函数的执行上下文就会从栈顶弹出，并将 result 的值设置为 add 函数的返回值，也就是 9。如下图所示：
紧接着 addAll 执行最后一个相加操作后并返回，addAll 的执行上下文也会从栈顶部弹出，此时调用栈中就只剩下全局上下文了。最终如下图所示：
至此，整个 JavaScript 流程执行结束了。
这里强烈推荐一个国外小哥的网站，可以非常清楚的展示调用栈的入栈和出栈过程，还可以有闭包的过程哦（https://tylermcginnis.com/jav…）
好了，今天关于 javascript 调用栈的内容就结束了，下一篇文章我们来讲解一下 let 和 const
