--- highlight: a11y-dark --- > 作者：小土豆 > 博客园：https://www.cnblogs.com/HouJiao/ > 掘金：https://juejin.im/user/2436173500265335 # 前言在正文开始前，先来看两个`JavaScript`代码片段。 #### 代码一 ```javascript console.log(a); var a = 10; ``` #### 代码二 ```javascript fn1(); fn2(); function fn1(){ console.log('fn1'); } var fn2 = function(){ console.log('fn2'); } ``` 如果你能正确的`回答`并`解释`以上代码的`输出结果`，那说明你对`JavaScript`的`执行上下文`已经有一定的了解；反之，阅读完这篇文章，相信你一定会得到答案。 # 什么是执行上下文 ```javascript var a = 10; function fn1(){ console.log(a); // 10 function test(){ console.log('test'); } } fn1(); test(); // Uncaught ReferenceError: test is not defined ``` 上面这段代码我们在`全局环境`中定义了变量`a`和函数`fn1`，在调用函数`fn1`时，`fn1`内部可以成功访问`全局环境`中定义的变量`a`；接着，我们在`全局环境`中调用了`fn1`内部定义的`test`函数，这行代码会导致`ReferenceError`，因为我们在`全局环境`中无法访问`fn1`内部的`test`函数。那这些`变量`或者`函数`能否正常被访问，就和`JavaScript`的`执行上下文`有着很大的关系。 `JavaScript`的`执行上下文`也叫`JavaScript`的`执行环境`，它是在`JavaScript`代码的执行过程中创建出来的，它规定了当前代码能访问到的`变量`和`函数`，同时也支持着整个`JavaScript`代码的运行。在一段代码的执行过程中，如果是执行`全局环境`中的代码，则会创建一个`全局执行上下文`，如果遇到`函数`，则会创建一个`函数执行上下文`。 ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a8ff9087f5374d51aaed4f81947265a9~tplv-k3u1fbpfcp-watermark.image) 如上图所示，代码在执行的过程中创建了三个`执行上下文`：一个`全局执行上下文`，两个`函数执行上下文`。因为`全局环境`只有一个，因此在代码的执行过程中只会创建一个`全局执行上下文`；而`函数`可以定义多个，所以根据代码有可能会创建多个`函数执行上下文`。同时`JavaScript`还会创建一个`执行上下文栈`用来管理代码执行过程中创建的多个`执行上下文`。 > `执行上下文栈`也可以叫做`环境栈`，在后续的描述中统一简称为`执行栈`。 `执行栈`和`数据结构`中的`栈`是同一种`数据类型`，有着`先进后出`的特性。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90a0347b1ce14a5faee1400d1b68b374~tplv-k3u1fbpfcp-watermark.image) # 执行上下文的创建前面我们简单理解了`执行上下文`的概念，同时知道了多个执行上下文是通过`执行栈`进行管理的。那`执行上下文`如何记录当前代码可访问的`变量`和`函数`将是我们接下来需要讨论的问题。首先我们需要明确`执行上下文`的`生命周期`包含两个阶段：`创建阶段`和`执行阶段`。 `创建阶段`对应到我们的代码，也就是代码刚进入`全局环境`或者`函数`刚被调用；而`执行阶段`则对应代码一行一行在被执行。 ## 创建阶段 `执行上下文`的`创建阶段`会做三件事： 1. 创建`变量对象（Variable Object，简称VO）` 2. 创建`作用域链（Scope Chain）` 3. 确定`this`指向 `this`想必大家都知道，那`变量对象`和`作用域链`又是什么呢，这里先给大家梳理出这两个的概念。 `变量对象`: 变量对象保存着当前环境可以访问的`变量`和`函数`，保存方式为`key：value`，其中`key`为变量名或者函数名，`value`为变量的值或者函数引用。 `作用域链`：`作用域链`是由`变量对象`组成的一个`列表`或者`链表`结构，`作用域链`的最前端是当前环境的`变量对象`，`作用域`的下一个元素是上一个`环境`的`变量对象`，再下一个元素是上上一个环境的`变量对象`，一直到全局的环境中的`变量对象`；`全局环境`的`变量对象`始终是`作用域链`的最后一个对象。当我们在一段代码中访问某个`变量`或者`函数`时，会在当前环境的执行上下文的变量对象中查找`变量`或者`函数`，如果没有找到，则会沿着`作用域链`一直向下查找`变量`和`函数`。 > 这里的描述的`环境`无非两种，一种是全局的环境，一种是函数所在的环境。 > 此处参考`《JavaScript高级程序设计》`第三版第4章2节。相信很多人此刻已经没有信心在往下看了，因为我已经抛出了好多的概念：`执行上下文`、`执行上下文栈`、`变量对象`、`作用域链`等等。不过没有关系，我们不用太过于纠结这些所谓的名词，以上的内容大致有个印象即可，继续往下看，疑惑会慢慢解开。 #### 全局执行上下文我们先以`全局环境`为例，分析一下`全局执行上下文`的`创建阶段`会有怎样的行为。前面我们说过`全局执行上下文`的`创建阶段`对应代码刚进入`全局环境`，这里为了模拟代码刚进入`全局环境`，我在`JavaScript`脚本最开始的地方打了`断点`。 ```javascript ``` > 这种调试方式可能不是很准确，但是可以很好的帮助我们理解抽象的概念。运行这段代码，代码执行到`断点`处会停下来。此时我们在`浏览器`的`console`工具中访问我们定义的`变量`和`函数`。 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e8755b9806004a9ebb872d83e614723d~tplv-k3u1fbpfcp-watermark.image) 可以看到，我们已经能访问到`var`定义的`变量`，这个叫`变量声明提升`，但是因为代码还未被执行，所以变量的值还是`undefined`；同时声明的`函数`也可以正常被调用，这个叫为`函数声明提升`。前面我们说`变量对象`保存着当前环境可以访问到的`变量`和`函数`，所以此时`变量对象`的内容大致如下： ```javascript // 变量对象 VO：{ a: undefined, b: undefined, fn1: , // 已经是函数本身可以调用 fn2: // 已经是函数本身可以调用 }, ``` 此时的`this`也已经指向`window`对象。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2dc93a15f1a1415cafbe6a07bf952338~tplv-k3u1fbpfcp-watermark.image) 所以`this`内容如下： ```javascript //this保存的是window对象的地址，即this指向window this: ``` 最后就是`作用域链`，在浏览器的断点调试工具中，我们可以看到`作用域链`的内容。 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/07d2ec195ab248fe953d2507d31bdc53~tplv-k3u1fbpfcp-watermark.image) 展开`Scope`项，可以看到当前的`作用域链`只有一个`GLobal`元素，`Global`右侧还有一个`window`标识，这个表示`Global`元素的指向是`window`对象。 ```javascript // 作用域链 scopeChain: [Global], // 当前作用域链只有一个元素 ``` 到这里，`全局执行上下文`在`创建阶段`中的`变量对象`、`作用域链`和`this指向`梳理如下： ```javascript // 全局执行上下文 GlobalExecutionContext = { VO：{ a: undefined, b: undefined, fn1: , // 已经是函数本身可以调用 fn2: // 已经是函数本身可以调用 }, scopeChain: [Global], // 全局环境中作用域链只有一个元素，就是Global，并且指向window对象 this: // this保存的是window对象的地址，即this指向window } ``` 前面我们说`作用域链`是由`变量对象`组成的，`作用域链`的最前端是当前环境的`变量对象`。那根据这个概念，我们应该能推理出来：`GlobalExecutionContext.VO == Global == window`的结果为`true`，因为`GlobalExecutionContext.VO`和`Global`都是我们伪代码中定义的`变量`，在实际的代码中并不存在，而且我们也访问不到真正的`变量对象`，所以还是来看看浏览器中的断点调试工具。我们展开`Global`选项。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/09953be14ad541fbb3ed775d3476fcfd~tplv-k3u1fbpfcp-watermark.image) ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e468fffa80341c6b2cc5a6f6930739c~tplv-k3u1fbpfcp-watermark.image) ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/85c9d4f029874b17a576ac0b256161c3~tplv-k3u1fbpfcp-watermark.image) 可以看到`Global`中是有我们定义的变量`a`、`b`和函数`fn1`、`fn2`。同时还有我们经常会用到的变量`document`函数`alert`、`conform`等，所以我们会说`Global是指向window`对象的，这里也就能跟浏览器的显示对上了。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/161feb0136fd490dba0df7f49e9c116e~tplv-k3u1fbpfcp-watermark.image) 最后就是对应的`执行栈`： ```javascript // 执行栈 ExecutionStack = [ GlobalExecutionContext // 全局执行上下文 ] ``` #### 函数执行上下文此处参考`全局上下文`，在`fn1`函数执行前打上`断点`。 ```javascript ``` 打开浏览器，代码执行到`断点`处暂停，继续在`console`工具中访问一些相关的`变量`和`函数`。 ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d6012f3cb93843058917ebc0dbdf1774~tplv-k3u1fbpfcp-watermark.image) 根据实际的调试结果，`函数执行上下文`的`变量对象`如下： > 其实在`函数执行山下文`中，`变量对象`不叫`变量对象`，而是被称之为`活动对象（Active Object，简称AO）`，它们其实也只是叫法上的区别，所以后面的伪代码中，我统一写成`VO`。 > 但是这里有必要给大家做一个说明，以免造成一些误解。 ```javascript // 变量对象 VO: { param1: 10, param2: 5, result: undefined, inner: , arguments:{ 0: 10, 1：5, length: 2, callee: } } ``` 对比`全局的执行上下文`，`函数执行上下文`的`变量对象`除了函数内部定义的`变量`和`函数`，还有函数的`参数`，同时还有一个`arguments`对象。 > `arguments`对象是`所有（非箭头）函数`中的`局部变量`，它和函数的参数有着一定的对应关系，可以使用从`arguments`中获得函数的参数。 `函数执行上下文`的`作用域链`如下： ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b734171beabe4d7ea1751223042659fe~tplv-k3u1fbpfcp-watermark.image) 用代码表示： ```javascript // 作用域链 scopeChain: [ Local, // fn1函数执行上下文的变量对象，即Fn1ExecutionContext.VO Global // 全局执行上下文的变量对象，即GlobalExecutionContext.VO ] ``` `作用域链`最前端的元素是`Local`，也就是`当前环境`（`当前环境`就是`fn1`函数）的`变量对象`。我们可以展开`Local`，其内容基本和前面我们总结的变量对象`VO`一致。 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/22437e3efdf44ac48971a8c04bfb285c~tplv-k3u1fbpfcp-watermark.image) > 这个`Local`展开的内容和前面总结的`活动对象AO`基本一致，这里只是`Chrome`浏览器的展示方式，不用过多纠结。 `this`对象同样指向了`window`。 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d0668a9f613d465fae8a8d481ae6ba3f~tplv-k3u1fbpfcp-watermark.image) > fn1函数内部的this指向window对象，源于`fn1`函数的调用方式。总结`函数执行上下文`在`创建阶段`的行为： ```javascript // 函数执行上下文 Fn1ExecutionContext = { VO: { param1: 10, param2: 5, result: undefined, inner: , arguments:{ 0: 10, 1：5, length: 2, callee: } }, scopeChain: [ Local, // fn1函数执行上下文的变量对象，即Fn1ExecutionContext.VO Global // 全局执行上下文的变量对象，即GlobalExecutionContext.VO ], this: } ``` 此时的`执行栈`如下： ```javascript // 执行栈 ExecutionStack = [ Fn1ExecutionContext, // fn1执行上下文 GlobalExecutionContext // 全局执行上下文 ] ``` ## 执行阶段 `执行上下文`的`执行阶段`，相对来说比较简单，基本上就是为变量赋值和执行每一行代码。这里以`全局执行上下文`为例，梳理执行上下文`执行阶段`的行为： ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b8a94b72389748bdbb76d50e47113dca~tplv-k3u1fbpfcp-watermark.image) ```javascript // 函数执行上下文 Fn1ExecutionContext = { VO: { param1: 10, param2: 5, result: 15, inner: , arguments:{ 0: 10, 1：5, length: 2, callee: } }, scopeChain: [ Local, // fn1函数执行上下文的变量对象，即Fn1ExecutionContext.VO Global // 全局执行上下文的变量对象，即GlobalExecutionContext.VO ], this: } ``` # 执行上下文的扩展坚持看到这里的同学，相信大家对`JavaScript`的执行上下文已经有了一点的认识。那前面为了让大家更好的理解`JavaScript`的执行上下文，我省略了一些特殊的情况，那接下来缓口气，我们在来看看有关`执行上下文`的更多内容。 ## let和const 对`ES6`特性熟悉的同学都知道`ES6`新增了两个定义变量的`关键字`：`let`和`const`，并且这两个关键字不存在`变量声明提升`。还是前面的一系列调试方法，我们分析一下`全局环境`中的`let`和`const`。首先我们运行下面这段`JavaScript`代码。 ```javascript ``` 断点处访问变量`a`和`b`，发现出现了错误。 ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0e0160cfe5b94c8b89378b29d803db0d~tplv-k3u1fbpfcp-watermark.image) 那这个说明在`执行上下文`的`执行阶段`，我们是无法访问`let`、`const`定义的变量，即进一步证实了`let`和`const`不存在`变量声明提升`。也说明了在`执行上下文`的`创建阶段`，`变量对象`中没有`let`、`const`定义的变量。 ## 函数函数一般有两种定义方式，第一种是`函数声明`，第二种是`函数表达式`。 ```javascript // 函数声明 function fn1(){ // do something } // 函数表达式 var fn2 = function(){ // do something } ``` 接着我们来运行下面的这段代码。 ```javascript ``` 代码运行到断点处暂停，手动调用函数：`fn1`和`fn2`。 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/38c52dec3df14553b5b94727c46bbd96~tplv-k3u1fbpfcp-watermark.image) 从结果可以看到，对于`函数声明`，因为存在`函数声明提升`，所以可以在函数定义前使用函数；而对于`函数表达式`，在函数定义前使用会导致错误，说明`函数表达式`不存在`函数声明提升`。这个例子补充了前面的内容：在`执行上下文`的`创建阶段`，`变量对象`的内容不包含`函数表达式`。 ## 词法环境在梳理这篇文章的过程中，看到很多文章提及到了`词法环境`和`变量环境`这个概念，那这个概念是`ES5`提出来的，是前面我们所描述的`变量对象`和`作用域链`的另一种设计和实现。基于`ES5`新提出来这个概念，对应的`执行上下文`表示也会发生变化。 ```javascript // 执行上下文 ExecutionContext = { // 词法环境 LexicalEnvironment: { // 环境记录 EnvironmentRecord: { }, // 外部环境引用 outer: }, // 变量环境 VariableEnvironment: { // 环境记录 EnvironmentRecord: { }, // 外部环境引用 outer: }, // this指向 this: } ``` `词法环境`由`环境记录`和`外部环境引用`组成，其中`环境记录`和`变量对象`类似，保存着当前`执行上下文`中的`变量`和`函数`；同时`环境记录`在全局执行上下文中称为`对象环境记录`，在函数执行上下文中称为`声明性环境记录`。 ```javascript // 全局执行上下文 GlobalExecutionContext = { // 词法环境 LexicalEnvironment: { // 环境记录之对象环境记录 EnvironmentRecord: { Type: "Object" // type标识，表明该环境记录是对象环境记录 }, // 外部环境引用 outer: } } // 函数执行上下文 FunctionExecutionContext = { // 词法环境 LexicalEnvironment: { // 环境记录之声明性环境记录 EnvironmentRecord: { Type: 'Declarative' // type标识，表明该环境记录是声明性环境记录 }, // 外部环境引用 outer: } } ``` 这点就类似`变量对象`也只存在于`全局上下文中`，而在`函数上下文中`称为`活动对象`。 `词法环境`中的`外部环境`保存着其他执行上下文的`词法环境`，这个就类似于`作用域链`。除了`词法环境`之外，还有一个`名词`叫`变量环境`，它实际也是`词法环境`，这两者的区别是`变量环境`只保存用`var`声明的变量，除此之外像`let`、`const`定义的`变量`、`函数声明`、函数中的`arguments`对象等，均保存在`词法环境中`。以这段代码为例： ```javascript var a = 10; var b = 5; let m = 10; function fn1(param1, param2){ var result = param1 + param2; function inner() { return 'inner go'; } inner(); return 'fn1 go' } fn1(a,b); ``` 如果以`ES5`中新提及的`词法环境`和`变量环境`概念来表示`执行上下文`，应该是下面这样： ```javascript // 执行栈 ExecutionStack = [ fn1ExecutionContext, // fn1执行上下文 GlobalExecutionContext, // 全局执行上下文 ] // fn1执行上下文 fn1ExecutionContext = { // 词法环境 LexicalEnvironment: { // 环境记录 EnvironmentRecord: { Type: 'Declarative', // 函数的环境记录称之为声明性环境记录 arguments: { 0: 10, 1: 5, length: 2 }, inner: }, // 外部环境引用 outer: }, // 变量环境 VariableEnvironment: { // 环境记录 EnvironmentRecord: { Type: 'Declarative', // 函数的环境记录称之为声明性环境记录 result: undefined, // 变量环境只保存var声明的变量 }, // 外部环境引用 outer: } } // 全局执行上下文 GlobalExecutionContext = { // 词法环境 LexicalEnvironment: { // 环境记录 EnvironmentRecord: { Type: 'Object', // 全局执行上下文的环境记录称为对象环境记录 m: < uninitialized >, fn1: , fn2: }, // 外部环境引用 outer: // 全局执行上下文的外部环境引用为null }, // 变量环境 VariableEnvironment: { // 环境记录 EnvironmentRecord: { Type: 'Object', // 全局执行上下文的环境记录称为对象环境记录 a: undefined, // 变量环境只保存var声明的变量 b: undefined, // 变量环境只保存var声明的变量 }, // 外部环境引用 outer: // 全局执行上下文的外部引用为null } } ``` 以上的内容基本上参考这篇文章：[【译】理解 Javascript 执行上下文和执行栈](https://juejin.cn/post/6844903704466833421)。关于`词法环境`相关的内容没有过多研究，所以本篇文章就不在多讲，后面的一些内容还是会以`变量对象`和`作用域链`为准。 # 调试方法说明关于本篇文章中的调试方法，仅仅是我自己实践的一种方式，比如在`断点`处代码暂停运行，然后我在`console`工具中访问`变量`或者`调用函数`，其实大可以将这些写入代码中。 ```javascript console.log(a); fn1(); fn2(); var a = 10; function fn1(){ return 'fn1 go'; } var fn2 = function (){ return 'fn2 go'; } ``` 在代码未执行到`变量声明`和`函数声明`处，都可以暂且认为处于`执行上下文`的`创建阶段`，当变量访问出错或者函数调用出错，也可以得出同样的结论，而且这种方式也非常的准确。反而是我这种调试方法的实践过程中，会出现很多和实际不符的现象，比如下面这个例子。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dc5cbf1cc1bc49f7815c0961e7faa4f5~tplv-k3u1fbpfcp-watermark.image) 前面我们其实给出过正确结论：`函数声明`，可以在函数定义前使用函数，而函数表达式不可以。而如果是我这种调试方式，会发现此时调用`inner`和`other`都会出错。其原因我个人猜测应该是浏览器`console`工具的上层实现的原因，如果你也遇到同样的问题，不必过分纠结，一定要将实际的代码运行结果和书中的理论概念结合起来，正确的理解`JavaScript`的`执行上下文`。 # 躬行实践台下十年功，终于到了台上的一分钟了。了解了`JavaScript`的`执行上下文`之后，对于网上流传的一些高频面试题和代码，都可以用`执行上下文`中的相关知识来分析。首先是本文开篇贴出的两段代码。 ## 代码一 ```javascript console.log(a); var a = 10; ``` 这段代码的运行结果相信大家已经了然于胸：`console.log`的结果是`undefined`。其原理也很简单，就是`变量声明提升`。 ## 代码二 ```javascript fn1(); fn2(); function fn1(){ console.log('fn1'); } var fn2 = function(){ console.log('fn2'); } ``` 这个示例应该也是小菜一碟，前面我们已经做过代码调试：`fn1`可以正常调用，调用`fn2`会导致`ReferenceError`。 ## 代码三 ```javascript var numberArr = []; for(var i = 0; i<5; i++){ numberArr[i] = function(){ return i; } } numberArr[0](); numberArr[1](); numberArr[2](); numberArr[3](); numberArr[4](); ``` 此段代码如果刷过面试题的同学一定知道答案，那这次我们用`执行上下文`的知识点对其进行分析。 #### step 1 代码进入`全局环境`，开始`全局执行上下文`的`创建阶段`： ```javascript // 执行栈 ExecutionStack = [ GlobalExecutionContext // 全局执行上下文 ] // 全局执行上下文 GlobalExecutionContext = { VO: { numberArr: undefined, i: undefined, }, scopeChain: [ Global // 全局执行上下文的变量对象，即GlobalExecutionContext.VO ], this: } ``` #### step 2 接着代码一行一行被执行，开始`全局执行上下文`的`执行阶段`。当代码开始进入第一个循环： ```javascript // 执行栈 ExecutionStack = [ GlobalExecutionContext // 全局执行上下文 ] // 全局执行上下文 GlobalExecutionContext = { VO: { // 这种写法代表number是一个Array类型，长度为1，第一个元素是一个Function numberArr: Array[1][f()], i: 0, }, scopeChain: [ Global // 全局执行上下文的变量对象，即GlobalExecutionContext.VO ], this: } ``` > 上面总结的`执行上下文`内容是代码已经进入到第一个循环，跳过了`numberArr`的`声明`和`赋值`，后面所有的代码只分析`关键部分`，不会一行一行的分析。 #### step 3 代码进入第五次循环（第五次循环因为不满足条件并不会真正执行，但是`i`值已经加`1`）： > 省略`i=2`、`i = 3`和`i = 4`的执行上下文内容。 ```javascript // 执行栈 ExecutionStack = [ GlobalExecutionContext // 全局执行上下文 ] // 全局执行上下文 GlobalExecutionContext = { VO: { // 这种写法代表number是一个Array类型，长度为5，元素均为Function numberArr: Array[5][f(), f(), f(), f(), f()], i: 5, }, scopeChain: [ Global // 全局执行上下文的变量对象，即GlobalExecutionContext.VO ], this: } ``` `循环`部分结束以后，我们发现`i`此时的值已经是`5`了。 #### step 4 接着我们访问`numberArr`中的`元素`（`numberArr`中的每一个元素都是一个`匿名函数`，函数返回`i`的值）并调用。首先是访问下标为`0`的元素，之后调用对应的`匿名函数`，既然是`函数调用`，说明还会生成一个`函数执行上下文`。 ```javascript // 执行栈 ExecutionStack = [ FunctionExecutionContext // 匿名函数执行上下文 GlobalExecutionContext // 全局执行上下文 ] // 匿名函数执行上下文 FunctionExecutionContext = { VO: {}, // 变量对象为空 scopeChain: [ LocaL, // 匿名函数执行上下文的变量对象，即FunctionExecutionContext.VO Global // 全局执行上下文的变量对象，即GlobalExecutionContext.VO ], this: // this指向numberArr this == numberArr 值为true } // 全局执行上下文 GlobalExecutionContext = { VO: { // 这种写法代表number是一个Array类型，长度为5，元素均为Function numberArr: Array[5][f(), f(), f(), f(), f()], i: 5, }, scopeChain: [ Global // 全局执行上下文的变量对象，即GlobalExecutionContext.VO ], this: } ``` 调用`匿名函数`时，`函数执行上下文`的`变量对象`的值为空，所以当该`匿名函数`返回`i`时，在自己的`变量对象`中没有找到对应的`i`值，就会沿着自己的`作用域链（scopeChain）`去全局执行上下文的变量对象`Global`中查找，于是返回了`5`。那后面访问`numberArr`变量的`第1个`、`第2个`、`...`、`第4个`元素也是同样的道理，均会返回`5`。 ## 代码四 ```javascript var numberArr = []; for(let i = 0; i<5; i++){ numberArr[i] = function(){ return i; } } console.log(numberArr[0]()); console.log(numberArr[1]()); console.log(numberArr[2]()); console.log(numberArr[3]()); console.log(numberArr[4]()); ``` 这段代码和上面一段代码基本一致，只是我们将循环中控制次数的变量`i`使用了`let`关键字声明，那接下来开始我们的分析。 #### step 1 首先是`全局执行上下文`的`创建阶段`： ```javascript // 执行栈 ExecutionStack = [ GlobalExecutionContext // 全局执行上下文 ] // 全局执行上下文 GlobalExecutionContext = { VO: { numberArr: undefined }, scopeChain: [ Global // 全局执行上下文的变量对象，即GlobalExecutionContext.VO ], this: } ``` 因为`let`关键字不存在`变量提升`，因此`全局执行上下文`的`变量对象`中并没有变量`i`。 #### step 2 当代码一行一行的执行，开始`全局执行上下文`的`执行阶段`。以下是代码执行进入第一次循环： ```javascript // 执行栈 ExecutionStack = [ GlobalExecutionContext // 全局执行上下文 ] // 全局执行上下文 GlobalExecutionContext = { VO: { // 这种写法代表number是一个Array类型，长度为1，第一个元素是一个Function numberArr: Array[1][f()], }, scopeChain: [ Block, // let定义的for循环形成了一个块级作用域 Global // 全局执行上下文的变量对象，即GlobalExecutionContext.VO ], this: } ``` 可以看到当循环开始执行时，因为遇到了`let`关键字，因此会创建一个`块级作用域`，里面包含了变量`i`的值。这个`块级作用域`非常的关键，正是因为这个`块级作用域`在循环的时候保存了变量的值，才使得这段代码的运行结果不同于上一段代码。 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1f2af3c442d45e682ec3859fb0fbefc~tplv-k3u1fbpfcp-watermark.image) #### step 3 `i`值为`5`时： > 省略`i=1`、`i = 3`和`i = 4`的执行上下文内容。 ```javascript GlobalExecutionContext = { VO: { // 这种写法代表number是一个Array类型，长度为2，元素均为Function numberArr: Array[5][f(), f(), f(), f(), f()], }, scopeChain: [ Block, Global ], this: } ``` 此时`块级作用域`中变量`i`的值也同步更新为`5`。 ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/824274ac74c0419eb2b83fbed2a9f64c~tplv-k3u1fbpfcp-watermark.image) #### step 4 接着就是访问数组中的第一个元素，调用`匿名函数`，`匿名函数`在执行的时候会创建一个`函数执行上下文`。 ```javascript // 执行栈 ExecutionStack = [ FunctionExecutionContext, // 匿名函数执行上下文 GlobalExecutionContext // 全局执行上下文 ] // 匿名函数执行上下文 FunctionExecutionContext = { VO: {}, // 变量对象为空 scopeChain: [ LocaL, // 匿名函数执行上下文的变量对象，即FunctionExecutionContext.VO Block, // 块级作用域 Global // 全局执行上下文的变量对象，即GlobalExecutionContext.VO ], this: // this指向numberArr this == numberArr 值为true } // 全局执行上下文 GlobalExecutionContext = { VO: { // 这种写法代表number是一个Array类型，长度为2，元素均为Function numberArr: Array[5][f(), f(), f(), f(), f()], }, scopeChain: [ Global ], this: } ``` 该`匿名函数`因为保存着`let`关键字定义的变量`i`，因此`作用域链`中会保存着`第一次循环`时创建的那个`块级作用域`，这个`块级作用域`前面我们说过也在浏览器的调试工具中看到过，它保存着当前循环的`i`值。所以当`return i`时，当前执行上下文的变量对象为空，就沿着作用域向下查找，在`Block`中找到对应的变量`i`，因此返回`0`；后面访问`numberArr[1]()`、`numberArr[2]()`、...、`numberArr[4]()`也是同样的道理。 ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/80690081494e4bf6aa4f691f9b202cc8~tplv-k3u1fbpfcp-watermark.image) ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/be06057dea964ce4a966e589b62a2631~tplv-k3u1fbpfcp-watermark.image) ## 代码五 ```jvascript var scope = "global scope"; function checkscope(){ var scope = "local scope"; function f(){ return scope; } return f(); } checkscope(); ``` 这段代码包括下面的都是在梳理这篇文章的过程中，看到的一个很有意思的示例，所以贴在这里和大家一起分析一下。 #### step 1 代码进入`全局环境`，开始`全局执行上下文`的`创建阶段`： ```javascript // 执行栈 ExecutionStack = [ GlobalExecutionContext // 全局执行上下文 ] // 全局执行上下文 GlobalExecutionContext = { VO: { scope: undefined, checkscope: , // 函数已经可以被调用 }, scopeChain: [ Global // 全局执行上下文的变量对象，即GlobalExecutionContext.VO ], this: } ``` #### step 2 `全局执行上下文`的`执行阶段`： ```javascript // 执行栈 ExecutionStack = [ GlobalExecutionContext // 全局执行上下文 ] // 全局执行上下文 GlobalExecutionContext = { VO: { scope: 'global scope', // 变量赋值 checkscope: , // 函数已经可以被调用 }, scopeChain: [ Global // 全局执行上下文的变量对象，即GlobalExecutionContext.VO ], this: } ``` #### step 3 当代码执行到最后一行：`checkscope()`，开始`checkscope函数执行上下文`的`创建阶段`。 ```javascript // 执行栈 ExecutionStack = [ CheckScopeExecutionContext, // checkscope函数执行上下文 GlobalExecutionContext // 全局执行上下文 ] // 函数执行上下文 CheckScopeExecutionContext = { VO: { scope: undefined, f: , // 函数已经可以被调用 }, scope: [ Local, // checkscope执行上下文的变量对象也就是CheckScopeExecutionContext.VO Global //全局执行上下文的变量对象也就是GlobalExecutionContext.VO ], this: } // 全局执行上下文 GlobalExecutionContext = { VO: { scope: 'global scope', checkscope: , // 函数已经可以被调用 }, scopeChain: [ Global // 全局执行上下文的变量对象，即GlobalExecutionContext.VO ], this: } ``` #### step 4 接着是`checkscope函数执行上下文`的`执行阶段`： ```javascript // 执行栈 ExecutionStack = [ CheckScopeExecutionContext, // 函数执行上下文 GlobalExecutionContext // 全局执行上下文 ] // 函数执行上下文 CheckScopeExecutionContext = { VO: { scope: 'local scope', // 变量赋值 f: , // 函数已经可以被调用 }, scope: [ Local, // checkscope执行上下文的变量对象也就是CheckScopeExecutionContext.VO Global //全局执行上下文的变量对象也就是GlobalExecutionContext.VO ], this: } // 全局执行上下文 GlobalExecutionContext = { VO: { scope: 'global scope', checkscope: , // 函数已经可以被调用 }, scopeChain: [ Global // 全局执行上下文的变量对象，即GlobalExecutionContext.VO ], this: } ``` #### step 5 执行到`return f()`时，进入`f函数执行上下文`的`创建阶段`： ```javascript // 函数执行上下文的创建阶段 FExecutionContext = { VO: {}, scope: [ Local, // f执行上下文的变量对象也就是FExecutionContext.VO Local, // checkscope执行上下文的变量对象也就是CheckScopeExecutionContext.VO Global //全局执行上下文的变量对象也就是GlobalExecutionContext.VO ], this: } // 函数执行上下文 CheckScopeExecutionContext = { VO: { scope: 'local scope', f: , // 函数已经可以被调用 }, scope: [ Local, // checkscope执行上下文的变量对象也就是CheckScopeExecutionContext.VO Global //全局执行上下文的变量对象也就是GlobalExecutionContext.VO ], this: } // 全局执行上下文 GlobalExecutionContext = { VO: { scope: 'global scope', checkscope: , // 函数已经可以被调用 }, scopeChain: [ Global // 全局执行上下文的变量对象，即GlobalExecutionContext.VO ], this: } ``` 当`f函数`返回`scope`变量时，当前`f执行上下文中`的`变量对象`中没有名为`scope`的变量，所以沿着`作用域链`向上查找，发现`checkscope`执行上下文的变量对象`Local`中包含`scope`变量，所以返回`local scope`。 ## 代码六 ``` var scope = "global scope"; function checkscope(){ var scope = "local scope"; function f(){ return scope; } return f; } checkscope()(); ``` 这段代码和上面的代码非常的相似，只不过`checkscope`函数的返回值没有直接调用`f`函数，而是将`f`函数返回，在`全局环境`中调用了`f`函数。 #### step 1 `全局执行上下文`的`创建阶段`： ```javascript // 执行栈 ExcutionStack = [ GlobalExcutionContext ]; // 全局执行上下文的创建阶段 GlobalExecutionContext = { VO: { scope: undefined, checkscope: , // 函数已经可以被调用 }, scopeChain: [ Global // 全局执行上下文的变量对象，即GlobalExecutionContext.VO ], this: } ``` #### step 2 `全局执行上下文`的`执行阶段`： ```javascript // 执行栈 ExcutionStack = [ GlobalExcutionContext // 全局执行上下文 ]; // 全局执行上下文 GlobalExecutionContext = { VO: { scope: 'global scope', // 变量赋值 checkscope: , // 函数已经可以被调用 }, scopeChain: [ Global // 全局执行上下文的变量对象，即GlobalExecutionContext.VO ], this: } ``` #### step 3 当代码执行到最后一行：`checkscope()()`，先执行`checkscope()`，也就是开始`checkscope函数执行上下文`的`创建阶段`。 ```javascript // 执行栈 ExcutionStack = [ CheckScopeExecutionContext, // checkscope函数执行上下文 GlobalExcutionContext // 全局执行上下文 ] // checkscope函数执行上下文的创建阶段 CheckScopeExecutionContext = { VO: { scope: undefined, f: , // 函数已经可以被调用 }, scopeChain: [ Local, // checkscope执行上下文的变量对象也就是CheckScopeExecutionContext.VO Global //全局执行上下文的变量对象也就是GlobalExecutionContext.VO ], this: } // 全局执行上下文 GlobalExecutionContext = { VO: { scope: 'global scope', checkscope: , // 函数已经可以被调用 }, scopeChain: [Global], this: } ``` #### step 4 接着是`checkscope函数执行上下文`的`执行阶段`： ```javascript // 执行栈 ExcutionStack = [ CheckScopeExecutionContext, // checkscope函数执行上下文 GlobalExcutionContext // 全局执行上下文 ] // checkscope函数执行上下文 CheckScopeExecutionContext = { VO: { scope: 'local scope', f: , // 函数已经可以被调用 }, scopeChain: [ Local, // checkscope执行上下文的变量对象也就是CheckScopeExecutionContext.VO Global //全局执行上下文的变量对象也就是GlobalExecutionContext.VO ], this: } // 全局执行上下文 GlobalExecutionContext = { VO: { scope: 'global scope', checkscope: , // 函数已经可以被调用 }, scopeChain: [ Global // 全局执行上下文的变量对象 ], this: } ``` #### step 5 执行到`return f`时，此处并不同上一段代码，并没有调用`f`函数，所以不会创建`f`函数的执行上下文，因此直接将`函数f`返回，此时`checkscope`函数执行完毕，会从`执行栈`中弹出`checkscope`的`执行山下文`。 ```javascript // 执行栈（此时CheckScopeExecutionContext已经从栈顶被弹出） ExcutionStack = [ GlobalExecutionContext // 全局执行上下文 ]; // 全局执行上下文 GlobalExecutionContext = { VO: { scope: 'global scope', checkscope: , // 函数已经可以被调用 }, scopeChain: [ Global // 全局执行上下文的变量对象 ], this: } ``` #### step 6 在`step3`中，`checkscope()()`代码的前半部分执行完毕，返回`f函数`；接着执行后半部分`()`，也就是调用`f函数`。那此时进入`f函数执行上下文`的`创建阶段`： ```javascript // 执行栈 ExcutionStack = [ fExecutionContext, // f函数执行上下文 GlobalExecutionContext // 全局执行上下文 ]; // f函数执行上下文 fExecutionContext = { VO: {}, // f函数的变量对象为空 scopeChain: [ Local, // f函数执行上下文的变量对象 Local, // checkscope函数执行上下文的变量对象 Global, // 全局执行上下文的变量对象 ], this: } // 全局执行上下文 GlobalExecutionContext = { VO: { scope: 'global scope', checkscope: , // 函数已经可以被调用 }, scopeChain: [Global], this: } ``` 我们看到在`f`函数执行上下文的`创建阶段`，其`变量对象`为空字典，而其`作用域链`中却保存这`checkscope执行上下文`的`变量对象`，所以当代码执行到`return scope`时，在`f`函数的`变量对象`中没找到`scope`变量，便沿着作用域链，在`chckscope`执行上下文的变量对象`Local`中找到了`scope`变量，所以返回`local scope`。 # 总结相信很多人和我一样，在刚开始学习和理解`执行山下文`的时候，会因为概念过于抽象在加上没有合适的实践方式，对`JavaScript`的执行上下文百思不解。作者也是花了很久的时间，阅读很多相关的书籍和文章，在加上一些实践才梳理出来这篇文章，希望能给大家一些帮助，如果文中描述有误，还希望不吝赐教，提出宝贵的意见和建议。 # 文末如果这篇文章有帮助到你，❤️关注+点赞+收藏+评论+转发❤️鼓励一下作者文章`公众号`首发，关注 [`不知名宝藏程序媛`](https://mmbiz.qpic.cn/mmbiz_gif/I4j8PCMjMMhl5J9MoqaIsAAeJVfMqYibiaJWpspxGicRiczx0xib35DLPlXvOd6amGPoLxLfnbERpC5TIPDgFBwc8gQ/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1) 第一时间获取最新的文章笔芯❤️~ ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/56fbe8abec3f4982a51fc293d2d66851~tplv-k3u1fbpfcp-watermark.image)