学习总结自:https://juejin.cn/post/6844904145372053511#heading-1
执行上下文(Execution Context)
- 全局执行上下文
- 函数执行上下文
- eval执行上下文
每个执行上下文会创建:词法环境
(LexicalEnvironment)和变量环境
(VariableEnvironment);
词法环境内重点关注的是:环境记录
(EnvironmentRecord)和外层引用
(outer);
执行栈
用来管理执行JS代码期间创建的所有执行上下文
的数据结构,一个LIFO(后进先出)的栈
示例
js代码:
let a = 10;
const b = 20;
var sum;
function add(e, f){
var d = 40;
return d + e + f
}
let utils = {
add
}
sum = utils.add(a, b)
对应的执行上下文伪代码:
GlobalExecutionContext = { // 全局执行上下文
LexicalEnvironment: { // 词法环境
EnvironmentRecord: { // 环境记录
type: 'object',
this: <globalObject>, // this指向全局对象
add: <function>,
a: <uninitialized>,
b: <uninitialized>,
utils: <uninitialized>
},
outer: null
},
VariableEnvironment: { // 变量环境
EnvironmentRecord: {
type: 'object',
this: <globalObject>
sum: undefined // var变量存在变量环境的环境记录里,与let、const不同(变量提升不报错的原因)
},
outer: null
},
}
// 当运行到函数add时才会创建函数执行上下文
FunctionExecutionContext = {
LexicalEnvironment: {
EnvironmentRecord: {
type: 'declarative',
this: <utils>, // this指向函数的引用utils对象
arguments: {0: 10, 1: 20, length: 2}, // 函数执行上下文的环境记录有arguments
[[NewTarget]]: undefined,
e: 10,
f: 20,
...
},
outer: <GlobalLexicalEnvironment> // 外层引用指向父级的执行上下文的词法环境,变量环境的outer也是一样
},
VariableEnvironment: {
EnvironmentRecord: {
type: 'declarative',
this: <utils>
d: undefined,
},
outer: <GlobalLexicalEnvironment>
},
}