JavaScript 常见问题排查：类型、异步、闭包与 DOM

遇到“看起来应该这样却不是这样”的结果，不要先堆更多 if。先确认输入的实际类型、执行顺序、状态所有权和浏览器控制台中的第一条异常，再构造最小复现。下面按最常见的失效边界整理排查方法。

旧题库与现代运行时

理解 new Constructor() 时，可把它视为创建新对象、将其原型关联到构造器的 prototype、以新对象作为 this 执行构造器，并在没有显式返回另一个对象时返回该实例。真实项目通常优先使用 class、工厂函数或框架定义的模型，不要把简化口诀当作所有代理、继承和显式返回情形的完整规范。

旧资料中的“变量统一提升到全局对象”“函数预编译 AO/GO”“节点种类只有固定几种”等说法过度简化了作用域、模块和宿主对象行为。现代代码使用词法作用域、ES modules、DOM 标准 API 和浏览器兼容数据来推理；不要依赖旧 IE 的集合、拼写错误的 API 或非标准节点值。函数的 caller、arguments.callee 也不应作为新代码的反射手段。定时器只是调度提示，不是精确时钟；动画与可见性相关工作优先考虑 requestAnimationFrame 和页面生命周期事件。

类型转换与空值

typeof null 是历史兼容结果 "object"；数组也会得到 "object"，应使用 Array.isArray。判断是否为数字时，Number.isNaN 不会先把字符串强制转换；Number.isFinite 可拒绝 NaN 与无穷大。

Number('') 与只含空格的字符串会变为 0，因此转换前要区分“空输入”和合法数字零。parseInt('18px', 10) 会得到 18，因为它解析数字前缀；若字段必须完整匹配，应先做格式校验，再用 Number 和范围检查。

|| 会在 0、空字符串、false 等假值时回退；?? 仅在 null/undefined 时回退。默认值选择是业务语义：数量 0 常常是有效值，不能被 || 偷偷改成默认数量。

异步、Promise 与请求

Promise 回调进入微任务队列；定时器则受事件循环和主线程调度影响，不能用“固定几毫秒”保证顺序。每个异步分支都要有可观察的成功、失败、取消和过期处理，尤其不能在异步 forEach 后马上假设任务已完成。

fetch 遇到 HTTP 404/500 通常仍会兑现 Promise，需检查 response.ok；网络失败和主动取消则会拒绝。搜索框等新请求可能比旧请求先返回，应在新请求开始时用 AbortController 取消旧请求，或用递增请求序号丢弃过期结果。取消只影响仍可取消的工作，不能撤销服务器已经完成的副作用。

async function loadJson(url, signal) {
  const response = await fetch(url, { signal });
  if (!response.ok) {
    throw new Error('HTTP ' + response.status);
  }
  return response.json();
}

const controller = new AbortController();
loadJson('/api/items', controller.signal)
  .then((items) => console.log('loaded', items.length))
  .catch((error) => {
    if (error.name !== 'AbortError') console.error(error);
  });

闭包、this 与事件

闭包保存函数定义时可访问的词法变量。循环回调捕获共享变量时，确认使用的是块级 let 还是单一外部可变状态；异步回调里还要确认该值是否已过期。闭包也会延长引用对象的生命周期，页面组件卸载时要解除监听、计时器和订阅。

箭头函数不创建自己的 this；普通函数的 this 由调用方式决定。DOM 事件委托中，event.target 是事件最初命中的后代，event.currentTarget 是绑定监听器的节点。用 closest 查找目标控件前，应确保它仍处于预期的容器内。

DOM 与调试顺序

把不可信文本赋给 innerHTML 会让浏览器解析标记。纯文本用 textContent；富文本先经过适合场景的安全净化。不要为消除单个报错而吞掉异常：记录具体请求、输入、状态迁移和错误对象，但绝不在日志里放认证令牌、密码或个人敏感数据。

建议按这个顺序排查：

1. 在出错行暂停，检查值、类型、调用栈和网络响应，不从猜测开始改代码。
2. 以最小输入复现，分别验证空值、边界值、失败响应、慢响应和重复触发。
3. 画出异步顺序和状态所有权，确认取消、重试和组件卸载如何处理。
4. 检查 DOM 事件的 target/currentTarget、重复监听和清理时机。
5. 将修复变成回归测试；日志只保留排障所需且经过脱敏的信息。

参考：MDN JavaScript Guide、MDN Number、MDN Using Fetch、MDN Promises、MDN Closures、MDN Event.currentTarget、MDN Node.textContent。