执行上下文和执行上下文栈

执行上下文

运行环境

【Global Code】: JavaScript代码开始运行的默认环境
【Function Code】：代码进入一个JavaScript函数
【Eval Code】：使用eval()执行代码
为了表示不同的运行环境，js中也有执行上下文的概念，即当js代码在执行的时候会进入不同的执行上下文。而这些执行上下文就构成了一个执行上下文栈

全局执行上下文

1. 发生在在执行全局代码前，将window作为全局执行上下文
2. 对全局变量进行预处理
   2.1.将var定义的变量赋值给window，并且值为underfined
   2.2.将function声明全局函数赋值给window(值为fun)
   2.3.将this指向window
3. 开始执行全局代码

函数执行上下文

1. 发生在调用函数并且准备执行函数之前，此时创建对应的函数执行上下文对象
2. 对局部变进行预处理
   2.1.形参和实参相统一;arguments列表进行赋值
   2.2 .var定义的局部变量赋值为underfined
   2.3.将function定义的函数赋值为fun
   2.4…this赋值为调用函数的对象
3. 开始执行函数体代码

执行上下文栈

1.在全局代码之前，js引擎会创建一个栈来存储管理当前所有执行上下文的对象
2.当全局执行上下文(window)确定后，会将其添加到栈中（压栈）
3.当函数执行上下文创建后，将其添加到栈中（压栈）
4.在当前的函数执行完之后，会将其创建的上下文对象移除栈
5.当所有的代码执行完之后，栈中将只剩下window

练习

<script>
    var c = 1;
    function c(c){
        var c = 2;
        console.log(c);
    }
    c(3);
</script>

运行结果： c is not a function
上面的代码相当于如下所示：

<script>
    //变量提升
    var c; 
    //函数提升
    function c(c){
        var c = 2;
        console.log(c);
    }
    c = 1;
    c(3);
</script>

运行下面的代码，会依次输出什么，创建了几个执行上下文

<script>
    console.log('gb begin:'+i);
    var i = 1;
    foo(1);
    function foo(i){
        if(i == 3){
            return;
        }
        console.log('foo() begin:'+i);
        foo(i+1);
        console.log('foo() end:'+i);
    }
    console.log('gb end:'+i);
</script>

执行结果：

gb begin:undefined
demon.html:38 foo() begin:1
demon.html:38 foo() begin:2
demon.html:40 foo() end:2
demon.html:40 foo() end:1
demon.html:42 gb end:1