执行上下文
JS代码执行环境的抽象概念,也就是说只要有JS代码运行,就一定运行在执行上下文中
执行上下文可分为三类
- 全局执行上下文:只有一个,浏览器中的全局对象就是
window
对象,this
指向这个全局对象 - 函数执行上下文:无数个,只有在函数被调用时才会被创建,每次调用函数就会创建一个新的执行上下文,会创建一个私有作用域,函数内部声明的任何变量都不能在当前函数作用外部直接访问
- Eval函数执行上下文:指运行在
eval
函数中的代码,很少用并不建议使用
生命周期
执行上下文的生命周期包括三个阶段:创建阶段→执行阶段→回收阶段
创建阶段
创建阶段即当函数被调用,但未执行任何其内部代码之前
创建流程:
- 确定this的值,也被称为
this Binding
。所以this的值是在执行的时候才能确认,定义的时候不能确认 - 词法环境被创建(LexicalEnvironment)
- 变量环境被创建(VariableEnvironment)
ExecutionContext = {
ThisBinding = <this value>, // 确定this
LexicalEnvironment = { ... }, // 词法环境
VariableEnvironment = { ... }, // 变量环境
}
词法环境
- 全局环境:是一个没有外部环境的词法环境,其外部环境引用为null,有一个全局对象,
this
的值指向这个全局对象 - 函数环境:用户在函数中定义的变量被存储在环境记录中,包含了
arguments
对象,外部环境的引用可以是全局环境,也可以是包含内部函数的外部函数环境 - 变量环境:也是一个词法环境,词法环境和变量环境的区别在于前者存储函数声明和变量是由
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);
执行上下文如下:注意:let和const定义的变量a
和b
在创建阶段没有被赋值(uninitialized(未初始化状态)
),但var声明的变量从在创建阶段被赋值为undefined
,这就是变量提升
GlobalExectionContext = {
ThisBinding: <Global Object>,
LexicalEnvironment: { // 词法环境
EnvironmentRecord: {
Type: "Object",
// 标识符绑定在这里
a: < uninitialized >,
b: < uninitialized >,
multiply: < func >
}
outer: <null>
},
VariableEnvironment: { // 变量环境
EnvironmentRecord: {
Type: "Object",
// 标识符绑定在这里
c: undefined,
}
outer: <null>
}
}
FunctionExectionContext = {
ThisBinding: <Global Object>,
LexicalEnvironment: {
EnvironmentRecord: {
Type: "Declarative",
// 标识符绑定在这里
Arguments: {0: 20, 1: 30, length: 2},
},
outer: <GlobalLexicalEnvironment>
},
VariableEnvironment: {
EnvironmentRecord: {
Type: "Declarative",
// 标识符绑定在这里
g: undefined
},
outer: <GlobalLexicalEnvironment>
}
}
执行阶段
在执行阶段,执行变量赋值、代码执行,如果JS引擎在源代码声明的实际位置找不到变量的值,那么将为其分配·undefined·值
回收阶段
执行上下文出栈等待虚拟机回收执行上下文
执行栈
执行栈也叫调用栈,具有后进先出的结构,用于存储在代码执行期间创建的所有执行上下文。当JS引擎开始执行第一行脚本代码时,就会创建一个全局执行上下文然后压入执行栈中,每当引擎遇到一个函数时,就会创建一个函数执行上下文,然后将这个执行上下文压入到执行栈。引擎会执行位于执行栈栈顶的执行上下文(一般是函数执行上下文),当该函数执行结束后,对应的执行上下文就会被弹出,然后控制流程就会到达执行栈的下一个执行上下文
例子如下:
let a = 'Hello World!';
function first() {
console.log('Inside first function');
second();
console.log('Again inside first function');
}
function second() {
console.log('Inside second function');
}
first();
console.log('Inside Global Execution Context');
流程分析:
- 创建全局上下文请压入执行栈
- first函数被调用,创建函数执行上下文并压入栈
- 执行first函数过程遇到second函数,再创建一个函数执行上下文并压入栈
- second函数执行完毕,对应的函数执行上下文被推出执行栈,执行下一个执行上下文first函数
- first函数执行完毕,对应的函数执行上下文也被推出栈中,然后执行全局上下文
- 所有代码执行完毕,全局上下文也会被推出栈中,程序结束
参考文献
JS每日一题执行上下文和执行栈是什么