52. 什么是执行栈（Call Stack）？如何造成栈溢出？ 副本.md
来源：https://my.feishu.cn/file/IS8EbHMeYoLptUx8bxUcI4BVnXb
采集状态：已完成正文采集；原文件源码视图逐行采集，行号 1 至 88 连续，滚动到底。



## 1. 核心概念 (Core Concept)

**执行栈（Call Stack）** 是一种用于管理 JavaScript 代码执行上下文的数据结构，它本质上是一个后进先出（LIFO）的栈。每当一个函数被调用时，一个新的“栈帧”（Stack Frame）就会被推入执行栈的顶部；当函数执行完毕并返回时，其对应的栈帧就会从栈顶弹出。这个过程决定了函数调用的顺序。

## 2. 为什么需要它？ (The "Why")

执行栈是 JavaScript 引擎执行代码时不可或缺的一部分，它主要解决了以下问题：

*   **跟踪函数调用顺序：** 确保函数按照正确的顺序调用和返回，维护程序的执行流程。
*   **管理作用域和变量：** 每个栈帧包含了当前函数的执行上下文信息，包括局部变量、参数、`this` 的值等，确保函数内部的变量在正确的作用域内访问。
*   **处理函数递归：** 递归函数的调用和返回过程正是通过执行栈的压入（push）和弹出（pop）来实现的。

## 3. API 与用法 (API & Usage)

执行栈是 JavaScript 引擎的内部机制，JavaScript 代码本身并没有直接操作执行栈的 API。我们主要通过函数调用来隐式地影响执行栈的行为。

当执行一段 JavaScript 代码时：

1.  全局代码首先创建一个全局执行上下文，并将其压入执行栈底部。
2.  当调用一个函数时，引擎为该函数创建一个新的执行上下文，并将其压入栈顶。
3.  当函数执行完毕并 `return` 或遇到代码末尾时，该函数的执行上下文从栈顶弹出。
4.  如果函数抛出未捕获的错误，执行栈会“展开”（unwind），弹出栈帧直到找到合适的错误处理机制（如 `try...catch`），或者直到栈底，此时程序终止。

经典的函数调用示例：

```javascript
function firstFunction() {
  console.log("Entering firstFunction");
  secondFunction();
  console.log("Exiting firstFunction");
}

function secondFunction() {
  console.log("Entering secondFunction");
  // Some code
  console.log("Exiting secondFunction");
}

// Call Stack: [] -> [Global]
firstFunction();
// Call Stack (while firstFunction is running): [Global] -> [Global, firstFunction]
// Call Stack (while secondFunction is running): [Global, firstFunction] -> [Global, firstFunction, secondFunction]
// Call Stack (after secondFunction finishes): [Global, firstFunction]
// Call Stack (after firstFunction finishes): [Global]
// Call Stack (after script finishes): []
```

在这个例子中，执行栈的变化如下：
1.  程序开始，全局上下文压栈：`[Global]`
2.  调用 `firstFunction`，其上下文压栈：`[Global, firstFunction]`
3.  在 `firstFunction` 中调用 `secondFunction`，其上下文压栈：`[Global, firstFunction, secondFunction]`
4.  `secondFunction` 执行完毕，其上下文弹出：`[Global, firstFunction]`
5.  `firstFunction` 执行完毕，其上下文弹出：`[Global]`
6.  全局代码执行完毕，全局上下文弹出：`[]`

**栈溢出（Stack Overflow）**

栈溢出发生在执行栈中推入了过多的栈帧，超出了引擎分配的栈空间。这通常是由于**递归函数没有正确定义终止条件**，导致函数无限或极大地递归调用自身。每次递归调用都会创建一个新的栈帧，最终耗尽内存。

如何造成栈溢出（典型示例 - 无休止的递归）：

```javascript
function CauseStackOverflow() {
  // 没有终止条件
  CauseStackOverflow();
}

// 调用这个函数会导致栈溢出错误
// CauseStackOverflow();
```

运行上述代码会看到类似 `RangeError: Maximum call stack size exceeded` 的错误。

## 4. 关键注意事项 (Key Considerations)

*   **理解同步执行：** 执行栈只负责管理**同步**代码的执行顺序。异步任务（如定时器、网络请求回调）不直接在当前的执行栈中执行，它们被放入任务队列，等待当前执行栈清空后才会被执行（通过事件循环）。
*   **栈帧大小限制：** 每个 JavaScript 引擎对执行栈的大小都有一个限制。递归深度过大或函数调用层级过多都可能触及这个限制，导致栈溢出。
*   **尾调用优化 (Tail Call Optimization - TCO):** 在严格模式下，一些引擎（如 V8 在某些情况下）可以对**尾调用**进行优化。如果一个函数的返回值仅仅是另一个函数调用的结果，并且这个调用是函数体的最后一个操作，引擎可能重用当前的栈帧而不是创建一个新的，从而避免深层递归导致的栈溢出。但需要注意的是，TCO 并非在所有环境下都得到广泛支持或默认开启。
*   **调试工具：** 现代浏览器和 Node.js 的开发者工具通常提供“调用堆栈”（Call Stack）面板，可以实时查看当前的执行栈状态，这对于调试函数调用流程和定位栈溢出非常有帮助。

## 5. 参考资料 (References)

*   **MDN Web Docs - Concurrency model and Event Loop:** [https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop) (虽然标题是事件循环，但其对执行栈和任务队列的关系有详细解释)
*   **JavaScript V8 Engine Blog - Articles about the Call Stack and Execution Context:** (V8 引擎博客通常会有关于内部机制的深度文章，可以通过关键词搜索 "Call Stack", "Execution Context")
*   **Understanding the JavaScript Call Stack (Industry Blog Example - conceptual):** (可以搜索一些被广泛引用的技术博客，如 freeCodeCamp, CSS-Tricks 等关于 Call Stack 的文章，作为知识点梳理的辅助理解，但API和核心概念仍以官方为准)


原文链接与附件索引
https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop
https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop