【JavaScript】将执行上下文、作用域、闭包串联起来

在理清执行上下文 、作用域 、闭包这三个关系之前，我们需要先理解一些概念。

我们知道所学的高级语言分为两类：1、编译型 2、解释型

编译型（compilation）：将整个代码立刻转化为机器代码，然后写下机器代码转换为可在任何计算机上执行的可移植文件，然后在进行执行。

解释：解释器贯穿整个源代码进行一行一行的读取执行，但是还是会转为机器代码，但是发生在执行前，而不是提前到和编译一样，整体进行转换为机器代码。

对于Javascript，我们了解到的是它是一个解释型语言，但是随着后续的发展，常用于web或者服务端的开发，性能难以跟上。因此现代JavaScript是实时编译（JIT），将汇编和解释混合在一起，对整个源文件代码进行转化为机器代码，然后立刻执行，这样速度就更快些，省去了可移植文件，节省了时间。

现代JavaScript在V8引擎的工作原理：

因此JavaScript代码的整个执行过程，分为两个阶段：

编译阶段：由编译器完成，将代码翻译成可执行代码，这个阶段作用域规则会确定。
执行阶段：执行阶段由引擎完成，主要任务是执行可执行代码，执行上下文在这个阶段创建。

明白这些之后，我们继续说执行上下文和作用域。

执行上下文

1、执行上下文一句话解释

执行上下文是一段JavaScript代码执行的环境，包含了所有必要的信息以供其执行。

2、执行上下文的出现时机

上面画过一张V8引擎运行图，当时所讲的词法环境是在 编译阶段 产生，现在讲的执行上下文是在引擎执行阶段进行。

当一段js代码出现的时候，js引擎对整体代码进行编译完成转为机器代码后便可进行执行，此时会为顶级代码立刻创建一个全局上下文（顶级代码一定不在任何函数内，只有函数外的代码会被首先执行，函数内的只会在调用的时候执行），创建完成后将其推入js引擎的堆栈当中。接着进入执行阶段，执行可执行代码，该赋值赋值，遇到函数，就创建一个函数执行上下文，并往调用栈中压入该函数的执行上下文；反复循环，到最后调用栈中只剩一个全局执行上下文，除非你关闭浏览器，不然全局执行上下文不会弹出。

3、执行上下文的生命周期

根据第二点，执行上下文被分为两个阶段：

创建阶段：
- this 值的确定，即我们所熟知的 this 绑定。
- 创建词法环境组件（LexicalEnvironment component ）
- 创建变量环境组件（VariableEnvironment component ）
执行阶段：就是将执行上下文不断的压栈出栈进行执行

如果看视频或者上下文的文章，我们了解到执行上下文在创建阶段所含的内容不同，如下图所示，目前的ES6执行上下文也又发生了变化。但本质还是一样的

那词法环境组件和变量环境组件是什么呢？

词法环境组件：包括环境记录器和 outer，词法环境的环境记录器收集 let、const、class 等变量
变量环境组件：包括环境记录器和 outer，变量环境的环境记录器收集 var、function 等变量

词法环境组件、变量环境组件和词法环境的区别是什么呢？

我的理解：本质上这两个是一个东西 ，只是由于执行上下文它是一个JavaScript代码的环境，记录一些执行所需要的信息，因此创建一个变量来存储前面已经有的词法环境（作用域），这样来保持运行。相当于在执行上下文创建的时候 ，除了 this，像变量环境、词法环境在编译阶段就已经确定了，其中变量环境的变量 var、function 会进行变量、函数提升，并初始化，而词法环境中的变量虽然提升了，但不会被初始化；而两者的 outer 则相同，它们都指向父作用域。这个时候就会确定我们的作用域链，变量提升也在编译的时候完成了。

作用域与作用域链

1、作用域到底是什么

作用域是表示在哪里可以访问到变量，其本质是一套规则，而这个规则的底层遵循 的就是词法作用域模型 ，即在词法分析时生成的作用域，词法分析阶段，也可以理解为代码书写阶段，当你把函数（块级作用域同理）书写到某个位置，不用执行，它的作用域就已经确定了。简单来说，"词法作用域"就是作用域的成因。

从语言的层面来说，作用域模型分两种：

词法作用域：也称静态作用域，是最为普遍的一种作用域模型
动态作用域：相对"冷门"，bash脚本、Perl等语言采纳的是动态作用域

总结一下。词法作用域和动态作用域最根本区别在于生成作用域的时机：

词法作用域：在代码书写时完成划分 ，作用域沿着它定义的位置往外延伸
动态作用域：在代码运行时完成划分 ，作用域链沿着他的调用栈往外延伸

JavaScript拥有词法作用域，因此可以访问到变量的规则是基于代码中函数和块被写在哪里，也就是它是在编译阶段就确定了。

2、作用域分类

在JS中分为作用域分三种：

全局作用域
函数作用域
块作用域

3、作用域链

作用域链是把作用域层层嵌套，当查找一个变量在内部作用域中未找到，向上父作用域去查找，找不到接着找，一直找到全局作用域这样的一个关系叫做作用域链。

变量提升的出现

变量提升的表象：使某些类型的变量在实际声明之前就可以在代码中访问。"变量被提升到其作用域的顶部"。

其深层的原因：在执行之前，扫描代码以查找变量声明，并在变量环境对象中为每个变量创建一个新属性。这都是发生在执行上下文的创建阶段。

	是否变量提升	初始值	作用域
函数声明	✔是	实际函数	严格模式下：块级作用域；非严格模式：函数作用域
var声明的变量	✔是	undefined	函数作用域
let、const声明的变量	❌否	<uninitialized>（未初始化）、TDZ（暂时性死区）	块级作用域
函数表达式、箭头函数	取决于使用var、const、let哪一个关键字

理论上let和const关键字也会变量提升，但是它的初始值为未初始化，因此没有任何用处，可以说是这些声明的变量被置于暂时性死区（TDZ），这样使得我们在作用域范围最初到声明变量的位置之间是无法访问变量的，因此在声明之前访问会进行报错，但在之后就可以正常访问了。

为什么会有暂时性死区？

更加容易去避免bug和捕捉bug
让const关键字能够正常使用：由于常量不能够改变，因此不能进行初始化之后再来重新赋值，因此只在执行时分配值

为什么会存在变量提升？

在实际声明之前可以调用函数，好处有：相互函数递归等
var关键字的变量提升是个副产品

闭包内部

1、闭包是什么

在说闭包背后原理之前，我们先看看闭包是什么。

闭包是内层函数能够访问外层函数声明的变量，并且内层函数在全局环境下可访问。

这个解释其实仅仅对闭包的现象进行解释了一遍。

真正的实际闭包，它背后是可以访问附加到函数身上的变量环境，这样的一个关系被称之为闭包。

任何函数都可以访问到创建它的执行上下文当中的变量环境（词法环境组件和变量环境组件），所有函数都有个[[Environment]] 的隐藏属性，该属性保存了对创建该函数的词法环境的引用，[[Environment]] 引用在函数创建时被设置并永久保存。

许多大神对闭包的定义都是去描述上方这句话。

接下来我们看一下闭包的例子：

2、举例说明

javascript 复制代码

function foo() {
    var a = 1;
    var b = 2;
    return function bar() {
        console.log(a++);
    };
}
var baz = foo();
baz();

在任何代码执行之前，先创建全局执行上下文，并往调用栈中压栈
接着创建词法环境，登记函数声明 foo 和变量声明 baz
由于全局词法环境没有外部引用，所以箭头指向了 null
代码开始执行，执行 foo()，创建 foo() 的函数执行上下文，并往调用栈中压栈
在开始执行 foo 函数内代码前，创建 foo 的词法环境，登记函数声明 bar 和变量声明 a、b。它的 outer 指向父作用域------全局作用域
代码执行至 function bar 时，创建 bar 的词法环境，它没有变量，outer 指向父作用域 foo
- 所有函数在"诞生"时都会记住创建它们的词法环境
- 所有函数都有个[[Environment]] 的隐藏属性，该属性保存了对创建该函数的词法环境的引用
- 我们说过作用域与它创建于哪里相关，与在哪儿调用无
调用完函数 foo()，弹出调用栈，foo 中的函数 bar、变量 b 随着 foo 出栈而被释放
由于函数 bar 的结果赋值给了全局变量 baz，baz 相当于多个了隐藏属性 [[Environment]]，它指向父作用域 foo，而 bar 又引用了 foo 作用域下的变量 a，所以变量 a 无法被释放
- 因此，baz.[[Environment]] 有对 {a: 0} 词法环境的引用
- [[Environment]] 引用在函数创建时被设置并永久保存
调用函数 baz()，创建 baz() 执行上下文，并将其压入调用栈中
并在执行代码前，创建一个新的词法环境，并且它的 outer 指向 baz.[[Environment]] ，即父作用域 foo
当它查找变量 a 时，先在自己的词法环境中找，找不到，沿着 outer 往它的父作用域找，在 foo 词法环境中找到了变量 a，并在变量所在的词法环境中更新变量

如此，调用完 baz，因为 baz 一直存在全局词法环境中，它的隐藏属性[[Environment]] 一直引用着 foo 函数中的 a 变量（即使 foo 函数已经被销毁了）

当再次调用 baz 时，就会再往调用栈中压入baz()，并生成一个新的 bar 的词法环境，它的 outer 还是引用 baz.[[Environment]]，即上图中的 foo 词法环境。

这里我们可以通过运行这段闭包代码，打印baz函数，可以看见它含有的内部属性[[scope]]里含有闭包（closures），保存引用。查看闭包的一个优先级大于作用域链

总结

到此，执行上下文 、作用域 、闭包三者的联系串联起来给大家讲清楚，也分别介绍了三者是什么。

最后用简短的一句话分别描述一下这三个是什么：

执行上下文：执行一段JavaScript代码的环境
作用域：在哪里可以访问到变量
闭包：内层函数能访问外层函数变量环境

这是我根据自行阅读文章和视频总结出来的个人理解，如有不正确的地方欢迎大家进行指正。

参考资料

深入理解JavaScript------闭包 - 个人文章 - SegmentFault 思否

Closures / JavaScript完整课程2023：从零到专家！