JavaScript 执行上下文和执行栈：从“打怪升级”到“栈里打卡”

你有没有想过，为什么每次写 JavaScript 代码时，程序总是先跑某个函数，而不是像打开游戏地图一样让你随意跑？答案其实很简单——程序也是有秩序的，而这个秩序就是**执行上下文（Execution Context）和执行栈（Call Stack）**的功劳。

---

1. 什么是执行上下文？（Execution Context）

执行上下文就像你玩游戏时的“角色设定”。你每进入一个副本（函数），系统就要先给你分配身份：你是谁，你带了什么技能，还有当前副本的环境是什么。

在 JavaScript 中，执行上下文有三种身份设定：

1. 全局上下文：游戏刚开始时，你就是整个世界的主角，系统默认为你提供一堆基础设施（比如 window 和 this）。
2. 函数上下文：你进入某个副本，系统会专门为你开辟一片新天地，所有的本地变量、参数全都属于这个副本。
3. Eval 上下文：这个比较神秘，像个隐藏地图。它只有在你调用 eval() 时才会悄悄出现（不过，老铁，eval还是少用哈，它不太安全，像是黑客放的小怪）。

💬 深度解析：“就像你玩游戏时进入不同的副本一样，每个函数上下文都有自己独立的装备和状态，堪称‘处处不同、场场独立’。不是每次加载都是天选之人，偶尔也是玄不改非、氪不救命。”

---

2. 执行栈是什么鬼？

执行栈就是你的“任务队列”。就像你打怪时，怪物一个接一个上场，前面怪不死，后面的怪不敢动。JavaScript 也是这样！程序需要一个地方来管理这些执行上下文，这个地方就是“执行栈”——它把上下文一个个压进去（push），然后一个个拿出来（pop）。

举个栗子 🌰：

function first() {
    second();
    console.log('first');
}

function second() {
    console.log('second');
}

first();

执行栈的工作流是这样的：

1. 程序开始，创建全局执行上下文，并放到执行栈里。
2. 遇到 first()，创建first的执行上下文，压到栈顶。
3. first() 里调用 second()，创建second的执行上下文，压栈。
4. second() 执行完，console.log('second') 打印完毕，second的上下文出栈。
5. 回到 first()，执行 console.log('first')，然后first的上下文出栈。
6. 最后只剩下全局上下文，直到程序结束。

💬 深度解析：“看吧，执行栈这逻辑是不是很像你吃火锅涮肉的过程？肉一片片放进锅（压栈），煮熟了一片片夹出来（出栈）。万物皆火锅，栈也是如此。”😄

---

3. 堆栈溢出（Stack Overflow）——玩游戏别太贪心！

就像游戏里，如果你把太多怪物一次性拉到身边，可能会被反打！同样，JavaScript 的执行栈也是有“承受极限”的。栈一旦满了，就会发生传说中的堆栈溢出（Stack Overflow）。想象一下，如果你无限递归调用函数，不断压栈却永远不出栈，最终 JavaScript 会告诉你：“别整了，哥也扛不住了！”。

function endless() {
    endless();
}
endless(); // 💥 Boom! Stack Overflow!

💬 深度解析：“堆栈溢出的感觉，和把手机内存用到99%后突然卡机没啥区别。别让程序陷入死循环，就像你别指望在‘双十一’购物车里装一百个包不爆炸。”

---

4. 总结：打通上下文与执行栈的任督二脉

• 执行上下文：你进入某个副本（函数）时的“角色设定”。
• 执行栈：你进入副本的先后顺序，处理任务的“打怪流程”。
• 栈溢出：别贪心，拉太多怪只会卡死。

💬 深度解析： “程序员的一天就是：执行上下文里找 bug，执行栈里打怪，偶尔被堆栈溢出爆头。堪比王者荣耀的上分之旅，每天充满着‘努力上钻’的艰难战斗。”😅