JavaScript 面试系列：深入理解执行上下文和执行栈

### 什么是执行上下文？

在 JavaScript 中，每当代码执行时，都会创建一个执行上下文。你可以把它想象成一个“环境”，在这个环境中，JavaScript 引擎会处理当前的代码块。每个执行上下文都包含三个主要部分：

• 变量对象（Variable Object, VO）：存储了当前作用域中的所有变量、函数声明等。
• 作用域链（Scope Chain）：用于解析标识符（如变量和函数），它指向当前执行上下文的作用域以及其父级作用域。
• this 指针：指代当前执行上下文中的 this 值，具体取决于调用方式。

#### 全局执行上下文

当 JavaScript 程序启动时，首先会创建一个全局执行上下文。这个上下文是所有其他执行上下文的基础。全局执行上下文只会在整个程序运行期间存在一次，并且它的 this 指向全局对象（在浏览器中是 window，在 Node.js 中是 global）。

#### 函数执行上下文

每当调用一个函数时，JavaScript 引擎会为该函数创建一个新的执行上下文。函数执行上下文的作用域链会包含当前函数的作用域以及其父级作用域。这意味着函数内部可以访问外部作用域中的变量，这就是我们常说的闭包。

### 什么是执行栈？

执行栈（Call Stack）是一个后进先出（LIFO）的数据结构，用于管理函数调用的顺序。每当调用一个函数时，JavaScript 引擎会将该函数的执行上下文压入栈顶；当函数执行完毕后，执行上下文会被弹出栈顶。通过这种方式，JavaScript 可以确保函数调用的正确顺序和返回值的传递。

#### 执行栈的工作原理

假设我们有以下代码：

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

function calculate() {
  const sum = add(2, 3);
  const product = multiply(sum, 4);
  console.log(product);
}

calculate();

当我们调用 calculate() 时，JavaScript 引擎会依次执行以下步骤：

1. 创建全局执行上下文，并将其压入执行栈。
2. 调用 calculate() 函数，创建一个新的执行上下文并压入栈顶。
3. 在 calculate() 内部，调用 add(2, 3)，创建一个新的执行上下文并压入栈顶。
4. add() 执行完毕后，返回结果 5，并将执行上下文从栈中弹出。
5. 继续执行 calculate()，调用 multiply(5, 4)，创建一个新的执行上下文并压入栈顶。
6. multiply() 执行完毕后，返回结果 20，并将执行上下文从栈中弹出。
7. 最终，calculate() 执行完毕，输出 20，并将执行上下文从栈中弹出。
8. 全局执行上下文继续运行，直到程序结束。

#### 执行栈溢出

如果函数调用过于频繁或递归深度过大，执行栈可能会超出其容量限制，导致栈溢出（Stack Overflow）错误。例如，无限递归会导致执行栈不断增长，最终崩溃。为了避免这种情况，我们应该尽量避免不必要的递归调用，并使用迭代或其他优化方法。

### 执行上下文与异步代码

在 JavaScript 中，除了同步代码外，还存在大量的异步代码，如定时器、网络请求等。对于异步代码，JavaScript 引擎不会立即将其压入执行栈，而是将其放入任务队列（Task Queue）中。当执行栈为空时，JavaScript 引擎会从任务队列中取出一个任务并执行。

#### 宏任务与微任务

JavaScript 的事件循环机制将任务分为两类：宏任务（Macro-task） 和 微任务（Micro-task）。宏任务包括 I/O 操作、setTimeout、setInterval 等；微任务包括 Promise、MutationObserver 等。每次执行完一个宏任务后，JavaScript 引擎会立即处理所有的微任务，然后再进入下一个宏任务。

### 总结

通过本文的讲解，相信你对 JavaScript 的执行上下文和执行栈有了更深入的理解。执行上下文是 JavaScript 引擎处理代码的基本单位，而执行栈则负责管理函数调用的顺序。掌握这些概念不仅能帮助你在面试中更好地回答问题，还能提升你对 JavaScript 运行机制的理解，写出更高效的代码。

如果你觉得这篇文章对你有帮助，欢迎点赞、收藏和分享。如果你有任何疑问或建议，也欢迎在评论区留言，我会尽力为你解答！