执行上下文 (Execution Context)

执行上下文 (Execution Context) 是 JS 里最抽象的概念之一

---

核心逻辑：JS 不是读一行做一行

很多人以为 JS 是这样的：

1. 读第一行代码 -> 执行。
2. 读第二行代码 -> 执行。

错！大错特错！

JS 执行代码的过程其实分两步走：

1. 第一步（预扫描）： 先把整个代码扫视一遍，把里面所有的"变量名"和"函数名"都找出来，记在一张纸上。------ 这张纸，就是"执行上下文"。
2. 第二步（真执行）： 再回到第一行，真正开始赋值、计算。

---

实例演示：去超市购物

想象你是一个机器人，我要派你去超市买东西（执行一个函数）。

代码是这样的：

function 去超市() {
    console.log(牙刷); // 第一行
    var 牙刷 = "电动牙刷"; // 第二行
    console.log(牙刷); // 第三行
}

过程还原：

第一阶段：进超市前（创建执行上下文）

JS 机器人站在超市门口，手里拿一张白纸（这就是执行上下文）。它先快速扫描一眼你的代码，把里面涉及到的东西记下来。

• 机器人看了一眼代码："哦，后面有个 var 牙刷。虽然我现在还没买到它，但我知道这次任务里肯定有'牙刷'这个东西。"
• 机器人的操作： 在纸上写下 牙刷: undefined（未定义）。注意，这时候它只占了个位，值是空的。

第二阶段：开始购物（执行代码）

现在机器人真正走进超市，按顺序执行代码。

• 执行第一行 console.log(牙刷)：

  机器人看了一眼手里的白纸。纸上写着 牙刷: undefined。

  • 结果： 打印出 undefined。
  • （这就是为什么你在定义变量之前使用它，不会报错，而是 undefined。因为纸上早就记下名字了。）

• 执行第二行 var 牙刷 = "电动牙刷"：

  机器人买到了实物。

  • 操作： 把它手里白纸上的 牙刷: undefined 擦掉，改写成 牙刷: "电动牙刷"。

• 执行第三行 console.log(牙刷)：

  机器人再看一眼白纸。

  • 结果： 打印出 "电动牙刷"。

---

什么是"栈"？（套娃清单）

现在情况变复杂了。你在超市买东西时，突然接到老婆电话，让你去旁边的药店买药。

1. 全局上下文（主清单）： 你原本拿着"超市购物清单"。
2. 函数调用（接电话）： 电话来了，你必须暂停超市的任务。
3. 新的上下文（新清单）： 你拿出便利贴，写了一张"药店购物清单"，盖在了"超市清单"的上面。
4. 执行： 你先照着最上面的"药店清单"买药。
5. 销毁： 药买完了，你把"药店清单"撕了（出栈）。
6. 恢复： 下面露出来的，又是原来的"超市购物清单"，你继续买牙刷。

这就是**"执行上下文栈"**：一层压一层，永远先处理最上面那张纸。

---

总结

执行上下文 = 一张临时的备忘录。

• 什么时候创建？ 代码开跑的前一毫秒。
• 上面记了什么？ 这段代码里将要用到的变量名（一开始都是 undefined）和 this 是谁。
• 有什么用？ 让你在还没运行到 var a = 1 这一行时，JS 就已经知道 a 这个变量的存在了。