lesson-js-dead-code-chain-break.json

{
  "task_id": "lesson-js-dead-code-chain-break",
  "title": "JavaScript 执行链断裂：一个未捕获 TypeError 如何让整个页面静默失效",
  "domain": "frontend",
  "tags": [
    "js",
    "runtime",
    "typeerror",
    "execution-model",
    "defensive"
  ],
  "problem": "JavaScript 是单线程事件驱动模型。同步执行线程中任何一个未捕获的异常（TypeError、ReferenceError 等）都会导致**整个执行线程中断**，该线程后续所有代码不再执行。常见场景：\n\n- 页面加载时有一段脚本抛出异常 → 后续所有事件绑定、DOM 操作、异步调用全部跳过\n- 多个看似独立的功能同时失效 → 可能是一个根因阻断执行链\n- 错误发生在脚本末尾而非开头 → 更容易被忽视，因为前面的功能正常",
  "solution": "1. **优先使用可选链操作符 `?.`** 防御性地访问可能为 `null`/`undefined` 的属性\n   ```js\n   document.getElementById('btn')?.addEventListener('click', handler);\n   ```\n2. **将事件绑定放在 try/catch 中**或包裹在 DOMContentLoaded 回调内，确保各自独立\n3. **全局错误监听**兜底：`window.addEventListener('error', ...)` 至少让开发者知道出了问题\n4. **删除或注释掉不再使用的 DOM 引用代码**——遗留代码是不确定性的最大来源",
  "source": "lessons/contrib/js-dead-code-chain-break.md",
  "test_cmd": ""
}