关于执行上下文的学习总结

学习总结自：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>
    },
}