执行上下文栈
JavaScript 中的执行上下文栈（Execution Context Stack），也称为调用栈（Call Stack），是一种用于管理和追踪代码执行的机制。当 JavaScript 引擎执行代码时，会创建一个全局执行上下文，并将其推入执行上下文栈的底部。接着，在执行代码的过程中，如果遇到函数调用，JavaScript 引擎会为该函数创建一个新的执行上下文，并将其推入执行上下文栈的顶部。函数执行完毕后，该函数对应的执行上下文会被弹出执行上下文栈，控制权会返回到调用该函数的上一层执行上下文。
执行上下文栈中的每个执行上下文都有一个生命周期，包括创建、执行和销毁。当一个执行上下文被创建时，JavaScript 引擎会根据当前上下文的类型、代码的调用栈以及作用域链等因素来初始化该执行上下文。执行上下文的创建过程包括变量对象的创建、作用域链的建立、this 的确定等步骤。执行上下文被销毁时，JavaScript 引擎会将其从执行上下文栈中弹出，并释放其占用的内存空间。
执行上下文栈的管理过程是自动完成的，遵循“后进先出”的原则。也就是说，最新创建的执行上下文会被推入栈的顶部，最先被销毁的执行上下文会位于栈的底部。这种机制保证了代码执行的顺序是正确的，并且能够正确地处理函数的嵌套调用和递归调用等情况。
执行上下文栈是 JavaScript 引擎的核心机制之一，它负责管理代码执行过程中的上下文信息，包括变量、函数、作用域、this 等信息。了解执行上下文栈的运行原理和机制可以帮助我们更好地理解 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）来管理执行上下文。
为了模拟执行上下文栈的行为，让我们定义执行上下文栈是一个数组：
ECStack = [];
试想当 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
解答思考题
好啦，现在我们已经了解了执行上下文栈是如何处理执行上下文的，所以让我们看看上篇文章《JavaScript深入之词法作用域和动态作用域》最后的问题：
var scope = "global scope";
function checkscope(){
var scope = "local scope";
function f(){
return scope;
}
return f();
}
checkscope();
// -----------------
var scope = "global scope";
function checkscope(){
var scope = "local scope";
function f(){
return scope;
}
return f;
}
checkscope()();
两段代码执行的结果一样，但是两段代码究竟有哪些不同呢？ 答案就是执行上下文栈的变化不一样。
让我们模拟第一段代码：
ECStack.push(<checkscope> functionContext);
ECStack.push(<f> functionContext);
ECStack.pop();
ECStack.pop();
让我们模拟第二段代码：
ECStack.push(<checkscope> functionContext);
ECStack.pop();
ECStack.push(<f> functionContext);
ECStack.pop();
是不是有些不同呢？
当然了，这样概括的回答执行上下文栈的变化不同，是不是依然有一种意犹未尽的感觉呢，为了更详细讲解两个函数执行上的区别，我们需要探究一下执行上下文到底包含了哪些内容，所以欢迎阅读下一篇《JavaScript深入之变量对象》。