理解执行上下文

执行上下文是当前JavaScript代码被解析和执行时所在环境的抽象概念

执行上下文的类型

执行上下文总共有三种类型

全局执行上下文：只有一个，浏览器中的全局对象就是 window 对象，this 指向这个全局对象。
函数执行上下文：存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文。
Eval 函数执行上下文：指的是运行在 eval 函数中的代码，很少用而且不建议使用

执行栈

执行栈，也叫调用栈，具有LIFO（后进先出）结构，用于存储在代码执行期间创建的所有执行上下文。
首次运行JS代码时，会创建一个全局执行上下文并Push到当前的执行栈中。每当发生函数调用，引擎都会为该函数创建一个新的函数执行上下文并Push到当前执行栈的栈顶。
根据执行栈LIFO规则，当栈顶函数运行完成后，其对应的函数执行上下文将会从执行栈中Pop出，上下文控制权将移到当前执行栈的下一个执行上下文。

执行上下文的创建

执行上下文的创建分两个阶段:创建阶段、执行阶段

创建阶段

确定 this 的值，也被称为 This Binding。
- 全局执行上下文中，this 的值指向全局对象，在浏览器中this 的值指向 window对象，而在nodejs中指向这个文件的module对象。
- 函数执行上下文中，this 的值取决于函数的调用方式。具体有：默认绑定、隐式绑定、显式绑定（硬绑定）、new绑定、箭头函数
LexicalEnvironment（词法环境） 组件被创建。
- 环境记录：存储变量和函数声明的实际位置
- 对外部环境的引用：可以访问其外部词法环境,全局环境外部环境引用为null
VariableEnvironment（变量环境） 组件被创建。
变量环境也是一个词法环境，因此它具有上面定义的词法环境的所有属性。
在 ES6 中，词法环境和变量环境的区别在于前者用于存储函数声明和变量 let 和 const 绑定，而后者仅用于存储变量var绑定。
1
2
3
4
5
6
//伪代码
ExecutionContext = {
ThisBinding = <this value>, // 确定this
LexicalEnvironment = { ... }, // 词法环境
VariableEnvironment = { ... }, // 变量环境
}

加餐:变量提升的原因：在创建阶段，函数声明存储在环境中，而变量会被设置为 undefined（在 var 的情况下）或保持未初始化（在 let 和 const 的情况下）。所以这就是为什么可以在声明之前访问 var 定义的变量（尽管是 undefined ），但如果在声明之前访问 let 和 const 定义的变量就会提示引用错误的原因。这就是所谓的变量提升。函数提升>变量提升

执行阶段

此阶段，完成对所有变量的分配，最后执行代码。
如果 Javascript 引擎在源代码中声明的实际位置找不到 let 变量的值，那么将为其分配 undefined 值

深入之执行上下文栈和变量对象

JS是单线程的语言，执行顺序肯定是顺序执行，但是JS 引擎并不是一行一行地分析和执行程序，而是一段一段地分析执行，会先进行编译阶段然后才是执行阶段。

执行上下文栈

因为JS引擎创建了很多的执行上下文，所以JS引擎创建了执行上下文栈（Execution context stack，ECS）来管理执行上下文。
当 JavaScript 初始化的时候会向执行上下文栈压入一个全局执行上下文，并且只有当整个应用程序结束的时候，执行栈才会被清空，所以程序结束之前，执行栈最底部永远有个全局执行上下文。