深入理解JavaScript——执行上下文与调用栈

前言

在说一个概念前，我们需要确定它的前提，此文以 ECMAScript5 为基础撰写

一句话解释

执行上下文就是一段代码执行时所带的所有信息

执行上下文是什么

《重学前端》的作者 winter 曾经对什么是执行上下文做过这样的解释：

JavaScript 标准把一段代码（包括函数），执行所需的所有信息定义为：“执行上下文

并且他整理出在不同 ECMAScript 版本中执行上下文所代表的含义：

执行上下文在 ES3 中，包含三个部分。

• scope：作用域，也常常被叫做作用域链
• variable object：变量对象，用来存储变量的对象
• this value： this 值

在 ES5 中，我们改进了命名方式，把执行上下文最初的三个部分改成下面这个样子

• lexical environment：词法环境，当获取变量时使用
• variable environment：变量环境，当声明变量时使用
• this value： this 值

在 ES2018 中，执行上下文又变成了这个样子，this 值被归入 lexical environment，但是增加了不少内容

• lexical environment：词法环境，当获取变量或者 this 值时使用
• variable environment：变量环境，当声明变量时使用
• code evaluation state: 用于恢复代码执行位置
• Function：执行的任务是函数时使用，表示正在被执行的函数
• ScriptOrModule：执行的任务是脚本或者模块时使用，表示正在被执行的代码
• Realm：使用的基础库和内置对象实力
• Generator：仅生成器上下文有这个属性，表示当前生成器

总结的很完整，按照 选新不选旧 原则，本文应该以 ES2022 为切入点展开，最次也要 ES2018，但主流的解释执行上下文都以 ES3/ES5 为例，权衡之后，笔者将以 ES5 为基础撰写执行上下文，并在后续补充说明 ES3 中的执行上下文

执行生命周期

我们在讲 词法环境 时，曾经画过一张执行生命周期图，当时所讲的词法环境是在**（预）编译阶段产生，现在讲的执行上下文是在引擎执行阶段**进行

一段代码如果要执行，首先会往调用栈（call stack）中压入全局执行上下文；再创建词法环境，此时变量该提升提升，函数该提升提升，并将这些变量登记到词法环境中（编译阶段）；接着进入执行阶段，执行可执行代码，该赋值赋值，遇到函数，就创建一个函数执行上下文，并往调用栈中压入该函数的执行上下文；而后创建该函数的词法环境，当该函数执行完后，从调用栈中弹出；反复循环，到最后调用栈中只剩一个全局执行上下文，除非你关闭浏览器，不然全局执行上下文不会弹出

我们要往调用栈中压入执行上下文，调用栈的数据结构为 栈 。特点为先进后出

如果我们的代码是这样的