JavaScript深入之执行上下文栈

如果要问到 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 引擎遇到一段怎样的代码时才会做“准备工作”呢？

可执行代码

这就要说到 javascript 的可执行代码（executable code）的类型有哪些了？

其实很简单，就三种，全局代码，函数代码，eval代码。

举个例子，当执行到一个函数的时候，就会进行准备工作，这里的 “准备工作”， 让我们用个更专业一点的说法，就叫做 "执行上下文(execution context)"。

执行上下文栈

接下来问题来了，我们写的函数很多，如何管理创建的那么多执行上下文呢？

所以 javascript 引擎创建了执行上下文栈(Execution context stack, ECS) 来管理执行上下文。

为了模拟执行上下文栈的行为，让我们定义执行上下文栈是一个数组：

ECStask = [];

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

ECStack = [
  globalContext
]

现在javascript 遇到下面的这段代码了：

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

参考文章：https://github.com/mqyqingfeng/Blog/issues/2