文章导图:
一.执行上下文
执行上下文的类型分为三种：
- 全局执行上下文：只有一个，浏览器中的全局对象就是 window对象，this 指向这个全局对象
- 函数执行上下文：存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文
- Eval 函数执行上下文： 指的是运行在 eval 函数中的代码，很少用而且不建议使用
二.生命周期
执行上下文的生命周期包括三个阶段：
- 创建阶段
- 执行阶段
- 回收阶段
2.1 创建阶段
在创建阶段做了三件事:
- this的绑定
- LexicalEnvironment（词法环境） 组件被创建
- VariableEnvironment（变量环境） 组件被创建
伪代码如下:
ExecutionContext = {
ThisBinding = <this value>, // 绑定this
LexicalEnvironment = {
... }, // 词法环境
VariableEnvironment = {
... }, // 变量环境
}
2.1.1 this 的绑定
- 全局执行上下文中,this指向window对象(全局对象)
- 函数执行上下文中,取决函数如何调用.如果它被一个引用对象调用，那么 this 会被设置成那个对象，否则 this 的值被设置为全局对象或者 undefined
2.1.2 词法环境
词法环境是一种有标识符——变量映射的数据结构，标识符是指变量/函数名，变量是对实际对象或原始数据的引用。
词法环境的内部由两部分组成：
- 环境记录器: 用来储存变量个函数声明的实际位置
- 外部环境的引用：可以访问父级作用域
伪代码如下:
GlobalExectionContext = {
// 全局执行上下文
LexicalEnvironment: {
// 词法环境
EnvironmentRecord: {
// 环境记录
Type: "Object", // 全局环境
// 标识符绑定在这里
outer: <null> // 对外部环境的引用
}
}
FunctionExectionContext = {
// 函数执行上下文
LexicalEnvironment: {
// 词法环境
EnvironmentRecord: {
// 环境记录
Type: "Declarative", // 函数环境
// 标识符绑定在这里 // 对外部环境的引用
outer: <Global or outer function environment reference>
}
}
#
词法环境包括两种环境:
-
全局环境：是一个没有外部环境的词法环境，其外部环境引用为null，有一个全局对象，this 的值指向这个全局对象
-
函数环境：用户在函数中定义的变量被存储在环境记录中，包含了arguments 对象，外部环境的引用可以是全局环境，也可以是包含内部函数的外部函数环境
2.1.3 变量环境
变量环境也是一个词法环境，因此它具有上面定义的词法环境的所有属性,其环境记录器持有变量声明语句在执行上下文中创建的绑定关系。
在 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>,
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>
}
}
let和const定义的变量a和b在创建阶段没有被赋值，但var声明的变量从在创建阶段被赋值为undefined
2.2 执行阶段
在这阶段，执行变量赋值、代码执行
2.3 回收阶段
执行上下文出栈等待虚拟机回收执行上下文
三.执行栈
执行栈，也叫调用栈，具有 LIFO（后进先出）结构，用于存储在代码执行期间创建的所有执行上下文
当Javascript引擎开始执行你第一行脚本代码的时候，它就会创建一个全局执行上下文然后将它压到执行栈中
每当引擎碰到一个函数的时候，它就会创建一个函数执行上下文，然后将这个执行上下文压到执行栈中
引擎会执行位于执行栈栈顶的执行上下文(一般是函数执行上下文)，当该函数执行结束后，对应的执行上下文就会被弹出，然后控制流程到达执行栈的下一个执行上下文
参考文档: