JS入门难点解析4-执行上下文栈-CSDN博客

本文链接：https://blog.csdn.net/hc_tr/article/details/79677435

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）
（注2：本文首发于我的简书，更多内容请查看我的目录。）

1. 简介

在本系列的第二篇文章JS入门难点解析2-JS的变量提升和函数提升中，我们已经讨论过。之所以不说JS需要编译，只是它不像其他编译语言一样需要翻译成等价的另一种语言。但是仍然需要进行语法分析和代码生成，并且通常是立即执行。而且，JS的变量提升和函数提升就发生在编译阶段。

回顾一下:

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

这两段代码，前一段进行了变量声明提升，后一段进行了函数声明提升。我们讲到过，这是因为 JavaScript 编译器和引擎并非一行一行地分析和执行程序，而是一段一段地分析执行。当分析执行一段代码的时候，会进行一个“准备工作”，包括变量声明提升和函数声明提升等。那么这里所谓的一段指的是什么呢？到底JavaScript编译器和引擎遇到一段怎样的代码时才会做“准备工作”呢？这就需要了解什么是可执行代码了。

2. 可执行代码

JavaScript 的可执行代码(executable code)有以下三类：全局代码、函数代码、eval代码。

当JS引擎遇到这三类代码时，会开始做准备工作，创建一个“执行上下文(execution context)”。

举例说明，当JS执行到一个函数的时候，就会创建该函数的“执行上下文(execution context)”。那么问题来了，JS代码中可能出现为数众多的函数，如何管理创建的那么多执行上下文呢？

3. 执行上下文栈

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