先看一段很普通的代码：

const globalName = 'global'
function outer {
const outerName = 'outer'
function inner {
console.log
}
inner
}
outer

运行结果没有任何意外：

global outer

如果只看结果，这段代码几乎没什么好讲的。

至于但换一个问题，

• 你可能想知道：为什么内层函数能访问到外层变量？怎么说呢，
• 你可能想担心：递归到底何时会爆栈？

一、JavaScript不是从第一行直接“莽”到最终一行

很多人第一次理解 JavaScript 执行过程时会把它想成：

读第一行→ 执行第一行→ 读第二行→ 执行第二行

实际过程没有这么简单。

JavaScript 引擎拿到一段代码后会先做一些准备工作，例如：

• 解析代码；
• 确认语法是否合法；说起来，
• 识别变量和函数声明；
• 为即将执行的代码准备运行环境。

准备完成后代码才会真正进入执行阶段。不过，

全局执行上下文与函数执行上下文

• 痛点提醒： 记住："每次调用一次就创建新的执行上下文"。而不是“定义一次”，这常常导致人们误以为全局对象就是所有变量和函数都挂在一起。
• A 全局脚本只有一次全局执行上下文；B 每一次函数调用都会产生一个新的函数执行上下文。C 同一个函数体在不同调用中拥有不同的参数、局部变量与当前位置。

二、全局代码开始执行时发生了什么

Kotlin/TypeScript 一样遵循此流程，但 JS 的实现细节略有差异。其实，以下用简化版本说明关键步骤。

全局执行上下文 → 开始逐句读取 → 直至遇到 outer

- 第一步先：创建全局执行上下文。- 接下来：初始化 'globalName'. - 然后：已识别并存储 'outer',不再重复解析。- 第四步：遇到调用表达式 'outer'。暂停当前脚本，并为其创建新的执行上下文。

为什么要暂停?

• 主要原因的观点是。
  JavaScript 必须知道 “当前正在跑的是哪段代码”，否则无法保证同步与异步逻辑正确切换。
• 再看方法，
  通过调用栈来跟踪当前活跃的执行环境。

三、调用栈决定“现在轮到谁执行”

后进先出: 把最近压入栈顶的 “盘子” 删掉，就是最新被调用的那段代码。话说回来，在 JS 中，它就是 “当前正在跑”的位置。

全局执行上下文 → 上下文压入 -> 调用栈顶 

1. 遇到 `outer` → 创建并压入 `outer` 的執行環境。**堆叠示意**: │ ┌────────────────────┐ │ │ │ └────────────────────┘ │ // top │ │ outer 執行環境 │ │ ├────────────────────┤ │ └────────────────────┘ │ │ global 執行環境 │ │ // rest of stack │ // ...
   
2. 此刻 `outer` 成為栈顶 → 全部執行完後退回至 global。───► inner 執行環境 ← stack top ) ← pop 注意！這裡不會同時跑兩個執行情境！否則就會像兩台車同時往前開造成碰撞…哈哈

   常見錯誤

   • Stack overflow – 当递归没有出口时每次新呼叫都再压一次没有弹出。
   • ReferenceError – 如果尝试访问不存在于任何作用域链里的标识符。

   ---

   小贴士

   在浏览器 console 打印错误堆栈，就是呼叫栈记录了谁调用谁。

   ---

   四、inner 为什么能找到 outerName

   问题重现

   javascript function outer { const outerName = 'outer' function inner { console.log } inner }

   源码级解释

   JS 在查找变量时： text inner 自己有吗?→ 否 → 看上一级作用域 → 有?→ 用它 若 寻找 ``： text inner -> none -> outer -> none -> global -> 有 => 用它

   为何如此设计？

   因为 **词法作用域** 是基于 *定义位置* 而非 *调用位置*。这也是闭包产生的原因之一——返回出去的内部函数仍可访问其词法作用域中的变量。

   ---

   五、函数结束后局部变量去哪了？

   简单情况

   javascript function foo{ const bar='bar';} foo，// bar 被释放？如果没有其他引用，`bar` 会成为垃圾回收对象。但这并非即时删除，而是由引擎决定何时回收。

   闭包情形

   javascript function outer{ const name='Outer';return => console.log;} const fn = outer;fn，// 输出 Outer。即使外层已结束 因为返回出去的内部函数持有对 `name` 的引用，所以 GC 无法释放。

   ---

   六、调用栈为什么会溢出？

   无出口递归示例

   javascript function loop{ loop;} loop，每次呼叫都未结束，就又新建一个 ctx，最终占满整个堆栈空间。引发： text RangeError: Maximum call stack size exceeded

   正常递归需要满足：

   条件	描述
   出口条件	每次递归至少逼近终止状态
   深度有限	防止太深导致超限

   ---

   小结

   以下步骤了最初那段简单脚本如何被解释与执⾏：
   1. 创建全局執行环境并加入呼叫堆疊。
   2. 全局脚本逐句读取直到 outer。
   3. 为 outer 创建新的執行环境，并压入堆疊。
   4. 在 inner 内部按词法链查找 globalName 与 outerName 并输出。其实，
   5. 当内部完成后其執行环境弹出；随后外层亦弹出，最终返回全局并结束。

   💡 主要记忆点

   • Execution Context + Call Stack = Runtime State
   • 词法作用域决定可见性 – 它是基于“在哪里写”的，而不是“在哪里被调”。
   • 闭包让生命周期延长 – 局部值不会被随意销毁，只要还有引用存在。

   ---

   下一篇我们将详细讨论： * 「暂时性死区」与「提高」机制。* 如何利用闭包实现私有状态，* async/await 下事件循环如何工作，还有…

   敬请期待！