原文链接：The Secret Life of JavaScript: The Catch
作者：Aaron Rose
本文将深入解析栈展开（stack unwinding） 的工作原理，以及 throw 语句背后的底层执行逻辑。
蒂莫西正盯着控制台里一整屏的红色文字，Uncaught TypeError（未捕获的类型错误）几个字格外刺眼。
他的应用程序前几天还运行得毫无问题 —— 获取用户数据、解析信息、渲染个人资料，一切都顺风顺水。但今天，数据库返回了一条损坏的记录，其中缺少 firstName 属性，整个应用就此崩溃。
“它就这么挂了，” 蒂莫西揉着眼睛说，“就一个属性缺失，整个系统就停摆了。”
玛格丽特拉过一把椅子，拿起一支白板笔：“蒂莫西，你是在‘理想路径’下编程 —— 默认网络绝对可靠、数据永远干净。我们来看看当函数执行失败时，实际会发生什么。”
调用栈（The Call Stack）
玛格丽特在白板上画了三个上下堆叠的方框。
“这是你的调用栈，” 她说，“最底部是 loadDashboard()，它调用了中间的 fetchData()，而 fetchData() 又调用了最顶部正在执行的 parseProfile()。”
她指向最上方的方框，写下代码：
function parseProfile(data) {
// 若 'data.user' 为 undefined，下一行代码会导致应用崩溃
const name = data.user.firstName;
return { name: name };
}
“正常情况下，代码会顺流执行，” 玛格丽特解释道，“一个函数完成工作后，会向下方的调用函数返回值，然后自身从栈中弹出。但如果某个操作无法完成 —— 比如从 undefined 上读取属性，会发生什么？”
“会崩溃。” 蒂莫西回答。
“不只是崩溃，” 玛格丽特纠正道，“这会触发 JavaScript 引擎中的一个特定底层流程。我们也可以通过 throw 语句手动触发这个流程。”
栈展开（Stack Unwinding）
玛格丽特在白板上重写了这个函数：
function parseProfile(data) {
if (!data || !data.user) {
throw new Error("Corrupted profile data."); // 手动抛出异常
}
const name = data.user.firstName;
return { name: name };
}
“当 JavaScript 引擎遇到 throw 关键字时，会立即停止执行当前函数，” 玛格丽特说，“它不会返回 null，也不会返回 false，而是彻底销毁当前的执行上下文并退出。”
玛格丽特画了一张流程图展示引擎的执行路径：
调用栈状态：
[ parseProfile ] <-- 此处抛出异常
[ fetchData ]
[loadDashboard ]
引擎执行栈展开：
[ X 已销毁 X ] <-- 引擎放弃当前上下文
[ X 已销毁 X ] <-- 父函数无异常处理器，同样销毁
[ 崩溃！！！ ] <-- 抵达栈底，未捕获异常
“引擎会销毁栈顶的栈帧，拿着错误对象查看下一个栈帧 —— 也就是父函数。它会询问：这个函数知道如何处理异常吗？”
“如果答案是否定的，引擎会同样销毁这个父函数。这个过程就叫栈展开。引擎会反向遍历调用栈，逐个销毁函数，寻找异常处理器。如果抵达栈底仍未找到，引擎就会停止运行，这就是你看到的 Uncaught TypeError。”
异常边界（The Boundary）
“那我们该如何阻止栈展开？” 蒂莫西问。
“我们需要定义一个‘异常边界’，” 玛格丽特说，“使用 try/catch 语句。”
她修改了栈最底部的函数：
function loadDashboard() {
try {
// 尝试执行存在风险的下游操作
const rawData = fetchData();
const profile = parseProfile(rawData);
renderUI(profile);
} catch (error) {
// 栈展开在此处停止
if (error instanceof TypeError) {
console.error("数据格式已变更：", error.message);
} else {
console.error("仪表盘加载失败：", error.message);
}
renderFallbackUI(); // 渲染降级界面
}
}
“当你把代码包裹在 try 块中时，相当于告诉引擎：如果这个块内部，或者这个块调用的任何嵌套函数中抛出异常，当栈展开到我这里时就停止。”
玛格丽特更新了流程图：
有异常边界的栈展开：
[ X 已销毁 X ] <-- 抛出异常
[ X 已销毁 X ] <-- 继续展开...
[ catch 代码块 ] <-- 安全着陆！在此处恢复执行
当 parseProfile 抛出异常后，引擎销毁其栈帧，直接跳转到 loadDashboard 的 catch 块中。renderUI 函数被安全跳过，转而渲染降级界面，应用得以继续运行。
资深开发者的思维模式（The Senior Mindset）
“你不需要在每个工具函数里都写 try/catch，” 玛格丽特指出，“这是初级开发者的常见错误，会导致代码杂乱冗余，充满防御性判断。”
蒂莫西删除了旧的 if/else 检查，用一个简洁的 try/catch 边界包裹了主执行流程。
“资深开发者会允许异常发生，” 玛格丽特笑着说，“你编写简洁、专注的函数 —— 当收到无效数据时直接抛出异常。然后在架构的上层放置一个 catch 块，捕获展开的栈并决定用户应该看到什么。你不是要阻止失败，而是要控制失败的终止位置。”
“那我们昨天写的异步函数呢？” 蒂莫西问，“它们返回的是 Promise。”
“Promise 不会 throw 异常，” 玛格丽特盖好笔帽说，“它们会 reject（拒绝）。但核心原理完全相同：拒绝状态会沿着 Promise 链反向传播，直到遇到 .catch() 方法。底层机制有变化，但架构逻辑保持一致。”
艾伦・罗斯（Aaron Rose）是一名软件工程师，同时担任 tech-reader.blog 网站的科技撰稿人，著有《像天才一样思考》（Think Like a Genius）一书。
