前面的话
理解执行上下文的类型与创建过程,对于理解js运行机制有极大的帮助。这篇文章将介绍执行上下文。
什么是执行上下文?
执行上下文是当前JavaScript代码被解析和执行时所在环境的抽象概念。
执行上下文的类型
执行上下文的类型有三种类型:
- 全局执行上下文: 只有一个,浏览器中的全局对象就是window对象,this指向这个全局对象。
- 函数执行上下文: 可以有无数个,只有在函数被调用的时候才会创建,每次调用函数都会创建 一个新的执行上下文。
- Eval函数执行上下文: 指的是运行在eval函数中的代码,用的很少且不建议使用
什么是执行栈?
执行栈,也叫调用栈,具有LIFO(后进先出)结构,用于存储在代码执行期间创建的所有执行上下文。
- 首次运行js代码时,会创建一个全局执行上下文并push到当前的执行栈中。
- 每当发生函数调用,引擎都会为该函数创建一个新的函数执行上下文并push到当前执行栈的栈顶。
- 当栈顶函数运行完成后,其对应的函数执行上下文将会从执行栈中pop出,上下文控制权将移到下一个执行上下文。
一张图清楚的展示执行过程:
执行上下文的创建
执行上下文分为两个阶段创建:
1: 创建阶段
2: 执行阶段
创建阶段
- 1、确定this的值,也称为This Binding
- 2、LexicalEnvironment(词法环境)
- 3、VariableEnvironment(变量环境)
利用伪代码表示:
ExecutionContext = {
ThisBinding = <this value> ,// 确定this
LexicalEnvironment = {...},// 词法环境
VariableEnvironment = {...} // 变量环境
}
这里的ExecutionContext可以是全局执行上下文(GlobalExectionContext),也可以是函数执行上下文(FunctionExectionContext), 或者是Eval函数执行上下文。不管是哪一种执行上下文的创建都要经过上面三个步骤。
解释创建三个步骤
This Binding
- 在全局执行上下文中,this的值指向全局对象,在浏览器中的this指向window对象,而在node.js中指向这个文件的module对象。
- 在函数执行上下文中,this的值取决于函数的调用方式。具体有默认绑定、隐式绑定、显示绑定、new绑定、 箭头函数
词法环境(LexicalEnvironment)
词法环境有两个组成部分:
- 环境记录: 存储变量和函数声明的实际位置
- 对外部环境的引用: 可以访问其外部词法环境
环境记录中的Type标识环境类型,分两种环境类型:
- 全局环境: 一般是在全局执行上下文中的词法环境的环境类型。是一个没有外部环境的词法环境,其外部词法环境引用为null。
- 函数环境: 一般是在函数执行上下文中的词法环境的环境类型。用户在函数中定义的变量存在环境记录中,包换arguments对象。对外部环境的引用可以是 全局环境,也可以是包含内部函数的外部函数环境。
解释这些名词之后,用伪代码来看看:
GlobalExectionContext = { // 全局执行上下文
LexicalEnvironment: { // 词法环境
EnvironmentRecord: { // 环境记录
Type: 'Object', // 全局环境
// 标识符绑定在这里
// ...
},
outer: <null> // 对外部环境的引用
}
}
FunctionExectionContext = { // 函数执行上下文
LexicalEnvironment: { // 词法环境
EnvironmentRecord: { // 环境记录
Type: "Declarative", // 函数环境
// 标识符绑定在这里
// ...
},
outer: <Global or outer function environment reference> // 对外部环境的引用
}
变量环境(VariableEnvironment)
变量环境也是一个词法环境,它具有上面的定义的词法环境的所有属性。
区别: 在ES6中,词法环境 存储函数声明和变量(let和const)绑定,变量环境仅用于存储变量(var)绑定。
利用一个例子进行区别:
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: <Global Object>,// 确定this
LexicalEnvironment : {// 词法环境
EnvironmentRecord: { // 环境记录
Tpye: 'Object', // 全局环境
// 标识符绑定在这里
a: <uninitialized>,
b: <uninitialized>,
multiply: <func>
},
outer: <null>
},
VariableEnvironment: { // 变量环境
EnvironmentRecord: { // 环境记录
Type: 'Object',
// 标识符绑定在这里
c: undefined
},
outer: <null>
}
}
接着一个函数执行上下文:
FunctionExectionContext = {
thisBinding: <Global Object>,// 确定this
LexicalEnvironment: {// 词法环境
EnvironmentRecord: {
Type: 'Declarative' ,// 函数环境
// 标识符绑定在这里
Arguments: {0: 20, 1: 30, length: 2}
},
outer: <GlobalLexicalEnvironment>
},
VariableEnvironment: {// 变量环境
EnvironmentRecord: { // 环境记录
Type: ''Declarative,
// 标识符绑定在这里
g: undefined
},
outer: <GlobalLexicalEnvironment>
}
}
执行阶段
此阶段,完成对所有变量的分配,最后执行代码。
参考文章:
理解 Javascript 执行上下文和执行栈