栈结构

栈结构是一种 "后进先出" 的结构：最后入栈的执行上下文，最先出栈

栈示意图

调用栈

在 JavaScript 执行过程中，可能会存在多个执行上下文。此时就需要 JavaScript 引擎对上下文进行统一管理调用，而栈结构恰好符合要求

为什么需要调用栈

因为 JavaScript 在同一线程上执行，同一时刻只能运行一个执行上下文。调用栈用于确定 "当前正在执行谁"，以及 "执行结束后应该回到谁"

JavaScript 引擎正是利用栈结构这种后进先出的结构来 管理执行上下文的。不同的执行上下文创建好后，JS 引擎便将其压入栈中，等待执行完毕后，JS 引擎便将其从栈中弹出。因此这种用来管理执行上下文的栈就被称为调用栈

调用栈解析

1. 示例代码

   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)

2. 创建并压入全局执行上下文

   创建全局执行上下文，并将其压入栈底。此时变量 a、函数 add 以及 addAll 全部都会在变量环境中保存一个与之同名的对象名称

   图示

   

   全局执行上下文压栈

3. 执行全局代码

   全局执行上下文执行压栈后，执行全局代码。执行 a = 2

   图示

   

   赋值操作改变执行上下文中的值

4. 调用全局函数 addAll

   JavaScrip 引擎从变量环境中取出函数代码，进行编译，创建执行上下文压入栈中。同样的函数执行上下文同样会创建变量环境和词法环境，然后收集函数内的变量声明和函数声明

   图示

   

   执行 addAll 函数前一刻的调用栈

5. 执行 addAll

   函数执行上下文压入栈后，执行函数代码。将 d 由 undefined 赋值为 10，当执行到函数内部的函数 add 时，同样会为其创建执行上下文，并将其压入调用栈

   add 函数执行上下文会执行与之前函数上下文同样的操作

   图示

   

   add 函数执行前一刻时的调用栈

6. add 执行完毕

   内层 add 函数执行完毕，该函数的执行上下文就会从栈顶弹出，若存在返回值则将返回值返回。返回结果后，控制权回到 addAll

   详情

   

   add 函数执行结束时的调用栈

7. addAll 执行完毕

   紧接着外层函数 addAll 执行完毕并返回，外层函数的执行上下文也会从栈顶弹出，最终只剩全局执行上下文

   详情

   

   addAll 函数执行结束时的调用栈

查看调用栈

在 DevTools 的 Sources 面板打断点，运行到断点时，右侧 Call Stack 会显示当前调用链

查看函数调用关系

一般会看到：

1. 栈底是全局入口（anonymous / script）
2. 中间是外层调用函数
3. 栈顶是当前正在执行的函数

贡献者: zhaojisen, ZhaoJiSen

上一页变量提升与执行上下文

下一页作用域和作用域链