JavaScript深入之执行上下文

什么是执行上下文？

简而言之，执行上下文是评估和执行 JavaScript 代码的环境的抽象概念。每当 Javascript 代码在运行的时候，它都是在执行上下文中运行。
JavaScript 中有三种执行上下文类型。
（1）全局执行上下文 — 这是默认或者说基础的上下文，任何不在函数内部的代码都在全局上下文中。它会执行两件事：创建一个全局的 window 对象（浏览器的情况下），并且设置 this 的值等于这个全局对象。一个程序中只会有一个全局执行上下文。
（2）函数执行上下文 — 每当一个函数被调用时, 都会为该函数创建一个新的上下文。每个函数都有它自己的执行上下文，不过是在函数被调用时创建的。函数上下文可以有任意多个。每当一个新的执行上下文被创建，它会按定义的顺序（将在后文讨论）执行一系列步骤。
（3）Eval 函数执行上下文 — 执行在 eval 函数内部的代码也会有它属于自己的执行上下文，但由于 JavaScript 开发者并不经常使用 eval，所以在这里我不会讨论它。
如果要问到 JavaScript 代码执行顺序的话，想必写过 JavaScript 的开发者都会有个直观的印象，那就是顺序执行，就像下面一样

var foo = function () {
    console.log('foo1');
}
foo();  // foo1
var foo = function () {
    console.log('foo2');
}
foo(); // foo2

但是我们来看看下面的代码：

function foo() {
      console.log('foo1');
    }
    foo();  // foo2
    function foo() {
      console.log('foo2');
    }
    foo(); // foo2

打印的结果却是两个 foo2。
刷过面试题的都知道这是因为 JavaScript 引擎并非一行一行地分析和执行程序，而是一段一段地分析执行。当执行一段代码的时候，会进行一个“准备工作”，比如第一个例子中的变量提升，和第二个例子中的函数提升。那什么是准备动作呢？我们换一个更加专业的说法，就是执行上下文。

执行上下文

JavaScript 引擎创建了执行上下文栈来管理执行上下文，为了模拟执行上下文栈的行为，让我们定义执行上下文栈是一个数组：

ECStack = [];

试想当 JavaScript 开始要解释执行代码的时候，最先遇到的就是全局代码，所以初始化的时候首先就会向执行上下文栈压入一个全局执行上下文，我们用 globalContext 表示它，并且只有当整个应用程序结束的时候，ECStack 才会被清空，所以 ECStack 最底部永远有个 globalContext：

ECStack = [ globalContext ];

我们再举一个例子

function fun3() {
    console.log('fun3')
}
function fun2() {
    fun3();
}
function fun1() {
    fun2();
}
fun1();

当执行一个函数的时候，就会创建一个执行上下文，并且压入执行上下文栈，当函数执行完毕的时候，就会将函数的执行上下文从栈中弹出。知道了这样的工作原理，让我们来看看如何处理上面这段代码：

//下面是一段模拟的伪代码
// fun1()
ECStack.push(<fun1> functionContext);
// fun1中竟然调用了fun2，还要创建fun2的执行上下文
ECStack.push(<fun2> functionContext);
// 擦，fun2还调用了fun3！
ECStack.push(<fun3> functionContext);
// fun3执行完毕
ECStack.pop();
// fun2执行完毕
ECStack.pop();
// fun1执行完毕
ECStack.pop();
// javascript接着执行下面的代码，但是ECStack底层永远有个globalContext

现在我们再看回前面的代码

function foo() {
      console.log('foo1');
    }
    foo();  // foo2
    function foo() {
      console.log('foo2');
    }
    foo(); // foo2

无论是第一个还是第二个foo（）执行函数执行都是第一个foo函数先被推入栈底，第二个再给foo函数推入栈底，在调用函数时第二个函数始终还是先出栈，所以两个都是输出foo2.
沿着这个思路下面可以再测试一波。

function foo() {
      console.log('foo1');
    }
    foo();  // foo4
    function foo() {
      console.log('foo2');
    }
    foo(); // foo4
    function foo() {
      console.log('foo3');
    }
    foo();//foo4
    function foo() {
      console.log('foo4');
    }
    foo();//foo4