JavaScript执行上下文1

每当js解析器到达一段可执行js代码时，就会创建一个执行上下文。执行上下文以栈这种数据结构进行存储，先进后出。

执行上下文有3种：全局执行上下文、函数执行上下文、eval执行上下文。

全局执行上下文
全局执行上下文在程序开始时创建，只有一个且一直处于栈底，在程序完成后退栈。this指向全局变量，在浏览器中为window，nodejs中指向该文件的module对象。
函数执行上下文
在调用函数时创建压栈，函数返回或抛出未捕获错误时退栈。this指向日后细说。
eval执行上下文
在调用eval方法时创建。调用eval方法的上下文称为“调用上下文”，调用eval方法执行的代码会影响调用上下文。例如：

    (function test(){

        eval('var t = 1');

        console.log(t); //1

        foo();

        console.log(a); //a is not define

        function foo(){

            var a = 2;

        }

    })();

ps.在严格模式下没有这种现象

执行上下文的创建

进行this绑定

词法环境创建
词法环境包括：

a. 环境记录，用于存储变量和函数声明。如果是函数上下文，则会包括arguments。
b. 外部环境引用，用于访问外部词法环境。全局执行上下文的外部环境引用是空的。

伪代码示例：

  test(1);
  function test(a){
    var b = 1;
  }

  执行test时创建的执行上下文如下：

  ExcutionContext = { //执行上下文
    LexicalEnviroment:{ //词法环境
        EnvironmentRecord:{ //环境记录
            Arguments : { 0 : 1, length : 1},
            a : 1,
            b : undefined,
            outer : <outer environment reference>
        }
    }
  }

变量环境创建
变量环境和词法环境的区别是，词法环境存储的是函数声明以及由const、let创建的变量。变量环境存储的是var创建的变量。

伪代码例子如下：

test(1);

function test(a){
    let b = 2;
    var c = 3;
    return a + b + c;
}

执行test时创建的函数上下文如：

FunctionEC = {
    LexicalEnv : {
        EnvRecord : {
            arguments : {
                0 : 1,
                length : 1
            },
            a : 1,
            b : <uninitialized> //未初始化
        },
        outer : <global env ref>
    },
    variableEnv : {
        EnvRecord : {
            c : undefined //未定义
        },
        outer : <global env ref>
    }
}

在创建上下文时，const和let定义的变量值时未初始化状态。而var定义的变量值为undefined。这就是变量提升的原因。

function test(){
    console.log(a);  //undefined
    console.log(b);  //ReferenceError: b is not defined
    var a = 1;
    let b = 2;
}

test();

参考

http://dmitrysoshnikov.com/ecmascript/chapter-1-execution-contexts/
https://github.com/yygmind/blog/issues/12

最后编辑于：2019.08.28 10:48:20