深入浅出javascript （2）—— 调用栈（执行上下文栈）

有了上一篇文章的基础，今天我们接着来学习 javascript 调用栈。先来回顾下前面文章的内容：三种 JavaScript 的可执行代码(executable code)：

请记住这三种创建执行上下文的情况，接下来我们来看看调用栈。讲清楚调用栈之前需要先弄明白函数调用和栈结构。

函数调用

函数调用就是运行一个函数，我们结合下面的代码说明：

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

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

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

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

完整流程参考下图：

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

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

答案就是我们今天的主题 —— 通过调用栈管理

JavaScript 引擎利用栈的结构来管理执行上下文。在执行上下文创建好后，JavaScript 引擎会将执行上下文压入栈中，通常把这种用来管理执行上下文的栈称为执行上下文栈，又称调用栈。下面我们再来看段稍微复杂点的示例代码：

var a = 2 
function add(b,c){ 
    return b+c 
} 
function addAll(b,c){ 
    var d = 10 
    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 流程执行结束了。

这里强烈推荐一个国外小哥的网站，可以非常清楚的展示调用栈的入栈和出栈过程，还可以有闭包的过程哦（tylermcginnis.com/javascript-… ）

好了，今天关于 javascript 调用栈的内容就结束了，下一篇我们来讲解一下let和const