【前端精进之路】JS篇：第3期 执行上下文_前端 执行上下文(ec)

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新大数据全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip204888 （备注大数据）

正文

outer: <Global or outer function environment reference>

}
}

  

##### 变量环境


同样是一个词法环境，其环境记录器持有**变量声明语句**在执行上下文中创建的绑定关系，因为也是一个词法环境，所以它有着上面定义的词法环境的所有属性。



> 
> 在 ES6 中，**词法环境**组件和**变量环境**的一个不同就是词法环境被用来存储函数声明和变量（`let` 和 `const`）绑定，而变量环境只用来存储 `var` 变量绑定。
> 
> 
> 


**一个demo**

let a = 20;
const b = 30;
var c;

function multiply(e, f) {
var g = 20;
return e * f * g;
}

c = multiply(20, 30);

执行上下文如下：

// 全局执行上下文
GlobalExectionContext = {

ThisBinding: ,//this绑定

LexicalEnvironment: { //词法环境
EnvironmentRecord: { //环境记录器
Type: “Object”,
// 在这里绑定标识符
a: < uninitialized >, // a,b是用let,const声明的，所以是在词法环境
b: < uninitialized >,
multiply: < func >
}
outer: //外部环境的引用
},

VariableEnvironment: { //变量环境
EnvironmentRecord: { //环境记录器
Type: “Object”,

  c: undefined, //c是用var声明的，所以在变量环境。并且，在创建阶段，JS引擎会检查代码找出变量和函数声明，虽然函数声明完全存储在环境中，但是变量最初设置为 undefined（var 情况下），或者未初始化（let 和 const 情况下）。

}
outer: <null> //外部环境的引用

}
}

// 函数执行上下文
FunctionExectionContext = {
ThisBinding: ,//this绑定

LexicalEnvironment: { //词法环境
EnvironmentRecord: { //环境记录器
Type: “Declarative”,
// 在这里绑定标识符
Arguments: {0: 20, 1: 30, length: 2},
},
outer: //因为是函数环境，环境记录器还包含了一个传递给函数的arguments对象
},

VariableEnvironment: { // 变量环境
EnvironmentRecord: {
Type: “Declarative”,
// 在这里绑定标识符
g: undefined
},
outer:
}
}

**注意**


* 只有遇到**调用**函数 `multiply` 时，函数执行上下文才会被创建（**即执行上下文是在JS引擎执行阶段创建的**）。
* `var` 定义的变量被设成了 `undefined`。这是因为在创建阶段时，引擎检查代码找出变量和函数声明，虽然函数声明完全存储在环境中，但是变量最初设置为 `undefined`（`var` 情况下），或者未初始化（`let` 和 `const` 情况下）。


这就是为什么你可以在声明之前访问 `var` 定义的变量（虽然是 `undefined`），但是在声明之前访问 `let` 和 `const` 的变量会得到一个引用错误。


这就是我们说的变量声明提升。


  

#### 执行阶段


在此阶段，完成对所有这些变量的分配，最后执行代码。


  

### 完整的demo


这里会将举出一个完整的demo，继续将上面的demo写完，包括创建阶段和执行阶段

let a = 20;
const b = 30;
var c;
function multiply(e, f) {
var g = 20;
return e * f * g;
}
c = multiply(20, 30);

当**执行上述代码**时(注意是在JS引擎的执行阶段)，JavaScript 引擎会创建一个全局执行上下文来执行全局代码。另外当遇到对函数 multiply(20, 30) 的调用时，会创建一个新的函数执行上下文来执行函数代码。因此，在创建阶段，全局执行上下文和函数执行上下文将如下所示：

GlobalExectionContext = {
LexicalEnvironment: {
EnvironmentRecord: {
Type: “Object”,
// Identifier bindings go here
a: < uninitialized >,
b: < uninitialized >,
multiply: < func >
}
outer: ,
ThisBinding:
},
VariableEnvironment: {
EnvironmentRecord: {
Type: “Object”,
// Identifier bindings go here
c: undefined,
}
outer: ,
ThisBinding:
}
}

FunctionExectionContext = {
LexicalEnvironment: {
EnvironmentRecord: {
Type: “Declarative”,
// Identifier bindings go here
Arguments: {0: 20, 1: 30, length: 2},
},
outer: ,
ThisBinding: ,
},
VariableEnvironment: {
EnvironmentRecord: {
Type: “Declarative”,
// Identifier bindings go here
g: undefined
},
outer: ,
ThisBinding:
}
}

在执行阶段，变量赋值完成。所以全局执行上下文在执行阶段看起来像这样。


另外，因为执行上下文进入执行阶段，这意味着对函数内部变量的赋值已经完成。所以函数执行上下文在执行阶段看起来像这样：

GlobalExectionContext = {
LexicalEnvironment: {
EnvironmentRecord: {
Type: “Object”,
// Identifier bindings go here
a: 20,
b: 30,
multiply: < func >
}
outer: ,
ThisBinding:
},
VariableEnvironment: {
EnvironmentRecord: {
Type: “Object”,
// Identifier bindings go here
c: undefined,
}
outer: ,
ThisBinding:
}
}

FunctionExectionContext = {
LexicalEnvironment: {
EnvironmentRecord: {
Type: “Declarative”,
// Identifier bindings go here
Arguments: {0: 20, 1: 30, length: 2},
},
outer: ,
ThisBinding: ,
},
VariableEnvironment: {
EnvironmentRecord: {
Type: “Declarative”,
// Identifier bindings go here
g: 20
},
outer: ,
ThisBinding:
}
}

函数完成后，返回值存储在 c 中。所以全局词法环境被更新了。之后，全局代码完成，程序结束。


  

### ES5 执行上下文总结


程序执行的整个过程：


程序启动，全局上下文被创建


1. 创建全局上下文的词法环境


	* 创建 **对象环境记录器** ，它用来定义出现在 **全局上下文** 中的变量和函数的关系（负责处理 `let` 和 `const` 定义的变量）
	* 创建 **外部环境引用**，值为 **`null`**
2. 创建全局上下文的变量环境


	* 创建 **对象环境记录器**，它持有 **变量声明语句** 在执行上下文中创建的绑定关系（负责处理 `var` 定义的变量，初始值为 `undefined` 造成声明提升）
	* 创建 **外部环境引用**，值为 **`null`**
3. 确定 `this` 值为全局对象（以浏览器为例，就是 `window` ）


函数被调用，函数上下文被创建


1. 创建函数上下文的 词法环境


	* 创建 **声明式环境记录器** ，存储变量、函数和参数，它包含了一个传递给函数的 **`arguments`** 对象（此对象存储索引和参数的映射）和传递给函数的参数的 **length**。（负责处理 `let` 和 `const` 定义的变量）
	* 创建 **外部环境引用**，值为全局对象，或者为父级词法环境（作用域）
2. 创建函数上下文的变量环境


	* 创建 **声明式环境记录器** ，存储变量、函数和参数，它包含了一个传递给函数的 **`arguments`** 对象（此对象存储索引和参数的映射）和传递给函数的参数的 **length**。（负责处理 `var` 定义的变量，初始值为 `undefined` 造成声明提升）
	* 创建 **外部环境引用**，值为全局对象，或者为父级词法环境（作用域）
3. 确定 `this` 值


进入函数执行上下文的执行阶段：


1. 在上下文中运行/解释函数代码，并在代码逐行执行时分配变量值。


  

### ES3的执行上下文


上面介绍的是ES5的执行上下文。


很多文章在介绍执行上下文时都会说执行上下文包括this绑定、变量对象(VO)和作用域链这三个属性。


**scopeChain(作用域链)、variableObject(变量对象，简写VO)、活动对象来表示（activation object，简写AO）的这种说法是ES3规范中的内容，ES5之后就不再用了，上文介绍的是ES5中的执行上下文**



> 
> `ES5` 规范又对 `ES3` 中执行上下文的部分概念做了调整，最主要的调整，就是去除了 `ES3` 中变量对象和活动对象，以 **词法环境组件（** **`LexicalEnvironment component`）** 和 **变量环境组件（** **`VariableEnvironment component`）** 替代。
> 
> 
> 


  

#### ES3执行上下文的内容


ES3中，一个执行上下文里包括以下内容：


1. 变量对象
2. 活动对象
3. 作用域链
4. this指向



> 
> 变量对象VO和活动对象AO 在ES5中指的就是**环境记录器**
> 
> 
> 作用域链在ES5中指的就是**外部环境的引用**
> 
> 
> 


  

##### 变量对象(VO)


变量对象是与执行上下文相关的数据作用域，存储了在上下文中定义的变量和函数声明。


全局执行环境的变量对象VO始终存在，


而对于函数局部环境的变量，只会在函数执行的过程中存在。在函数被创建声明时，且在具体的函数代码运行之前，JS 引擎会用当前函数的**参数列表**（`arguments`）初始化一个 “变量对象” 并将当前执行上下文与之关联 ，函数代码块中声明的 **变量** 和 **函数** 将作为属性添加到这个变量对象VO上。


  

##### 活动对象(AO)


函数进入执行阶段时，原本访问变量对象的值为undefined，此时被激活成为一个活动对象，自此，我们可以访问到其中的各种属性，并且对它们进行赋值。


**其实变量对象和活动对象是一个东西，只不过处于不同的状态和阶段而已**。


  

##### 作用域链


函数的作用域在函数创建时就已经确定了。


当函数创建时，会有一个名为 `[[scope]]` 的内部属性保存所有父变量对象到其中。


当函数执行时，会创建一个执行环境，然后通过复制函数的 `[[scope]]` 属性中的对象构建起执行环境的作用域链，然后，变量对象 `VO` 被激活生成 `AO` 并添加到作用域链的前端，完整作用域链创建完成：

Scope = [AO].concat([[Scope]]);

  

#### ES3执行上下文伪代码

// ES3的执行上下文
executionContext：{
[variable object | activation object]：{ // VO 或 AO，当函数执行时，VO 被激活成 AO
arguments,
variables: […],
funcions: […]
},
scope chain: variable object + all parents scopes //作用域链
thisValue: context object //this指向
}

  

ES3 执行上下文的生命周期有三个阶段，分别是：


* 创建阶段
* 执行阶段
* 销毁阶段


  

#### ES3上下文创建阶段


* 用当前函数的**参数列表**（`arguments`）初始化一个 “变量对象VO” 并将当前执行上下文与之关联 ，函数代码块中声明的 **变量** 和 **函数** 将作为属性添加到这个变量对象上。**在这一阶段，会进行变量和函数的初始化声明，变量统一定义为 `undefined` 需要等到赋值时才会有确值，而函数则会直接定义**。
* 构建作用域链



**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注大数据）**
![img](https://img-blog.csdnimg.cn/img_convert/afb1250c145b01bd60e9d76055514db0.png)

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

阶段


* 用当前函数的**参数列表**（`arguments`）初始化一个 “变量对象VO” 并将当前执行上下文与之关联 ，函数代码块中声明的 **变量** 和 **函数** 将作为属性添加到这个变量对象上。**在这一阶段，会进行变量和函数的初始化声明，变量统一定义为 `undefined` 需要等到赋值时才会有确值，而函数则会直接定义**。
* 构建作用域链



**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注大数据）**
[外链图片转存中...(img-zZoASTQ4-1713356557817)]

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**