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

一、变量提升和函数提升

首先回顾一下什么是变量提升。

var a=3;
console.log(a);//3
--------------------------------------
console.log(a);//undefined
var a=3;
--------------------------------------
var a;
console.log(a);//undefined
a=3;

变量声明提升，通过var定义（声明）的变量，在定义语句之前就可以访问到。

再回顾一下什么是函数提升。

function fn(){
    console.log("这里是fn函数");
}
fn();//这里是fn函数
---------------------------------------
fn();//这里是fn函数
function fn(){
    console.log("这里是fn函数");
}
---------------------------------------
function fn(){
    console.log("这里是fn函数");
}
fn();//这里是fn函数

函数声明提升，通过function声明的函数，在声明之前就可以直接调用（只有函数声明的形式才存在函数提升）。

var fn2=function(){
     console.log("这里是fn2函数");
}
fn2();//这里是fn2函数
---------------------------------------
fn2();//fn2 is not a function
var fn2=function(){
     console.log("这里是fn2函数");
}
---------------------------------------
var fn2;
fn2();//fn2 is not a function
fn2=function(){
     console.log("这里是fn2函数");
}

函数提升优先级高于变量提升，且不会被同名变量声明时覆盖，但是会被变量赋值后覆盖

function a(){
    console.log("这里是a函数");
}
var a;
typeof(a)//"function"
---------------------------------------
function a(){
    console.log("这里是a函数");
}
var a=3;
typeof(a)//"number"

二、执行上下文

首先根据代码的位置，代码可以分为全局代码和函数（局部）代码。

全局执行上下文

console.log(a1,window.a1,this.a1);
var a1=3;
console.log(this);
fn();
function fn(){
    console.log("xx");
}

（1）在执行全局代码前将window确定为全局执行上下文

（2）对全局数据进行预处理

a.var定义的全局变量==>undefined,添加为window的属性

b.function声明的全局函数==>创建好函数对象，添加为window的方法

c.this==>赋值（window）

（3）开始执行全局的代码

函数执行上下文

function fn(a1){
    console.log(a1);//2
    console.log(a2);//undefined
    a3();// a3()
    console.log(this);//window
    var a2=3;
    function a3(){
        console.log("a3()");
    }
}
fn(2)
//fn(2)

（1）在调用函数，准备执行函数体之前，创建对应的函数执行上下文对象（虚拟的）

（2）对局部数据进行预处理

a.形参变量==>赋值（实参）==>添加为执行上下文的属性

b.var定义的局部变量==>undefined,添加为执行上下文的属性

c.function声明的函数==>创建好函数对象，添加为执行上下文的方法

d.arguments==>赋值(实参列表),添加为执行上下文的属性

e.this==>赋值（调用函数的对象）

（3）开始执行函数体代码

小结：变量提升就是因为存在预处理这个操作。

三、执行上下文栈

(1)在全局代码执行前，JS引擎就会创建一个栈来存储管理所有的执行上下文对象

(2)在全局执行上下文（window）确定后，将其添加到栈中（入栈）

(3)在函数执行上下文创建后，将其添加到栈中（入栈）

(4)在当前函数执行完后，将栈顶的对象移除（出栈）

(5)当所有的代码执行完后，栈中只剩下window

tip：函数执行中,遇到return直接终止可执行的代码,会直接将当前上下文弹出栈

一个小栗子：

console.log("gb:"+i);
var i=1;
foo(1);
function foo(i){
    if(i==4){
        return
    }
    console.log("fb:"+i);
    foo(i+1);//递归调用
    console.log("fe:"+i);
}
console.log("ge:"+i);
//依次输出什么？
//整个过程中产生了几个执行上下文？

gb:undefiend
fb:1
fb:2
fb:3
fe:3
fe:2
fe:1
be:1

四、小结

（1）我们把JS引擎处理JS代码的处理机制（预处理）产生的现象叫做函数提升和变量提升。

（2）执行上下文的数量为N+1（1指的是全局指向上下文，N指的是函数调用的次数）