JavaScript 与异步错误定位

myIsCoder

74人浏览 · 2026-05-22 11:55:28

myIsCoder · 2026-05-22 11:55:28 发布

JavaScript 与异步错误定位

从词法解析到运行时执行，从 Promise 链到底层内存——这篇帮你深入理解 JS 错误的本质。

一、导读

这篇解决什么问题

当你遇到以下情况时，这篇文章能帮你深入理解根因：

想知道 SyntaxError 到底在哪个阶段抛出
想理解为什么 let/const 有暂时性死区，而 var 没有
想搞懂 Promise 的状态机到底是怎么运转的
想学会识别那些「看起来没问题但会踩坑」的代码模式
想理解 Chrome V8 的执行机制和错误抛出原理

本文专注于 JavaScript 引擎层面的错误机制，带你从「知道报错」升级到「理解报错」。

二、JS 引擎执行阶段详解

理解错误在哪个阶段抛出，是精准定位的第一步。

1 三个执行阶段

┌─────────────────────────────────────────────────────────┐
│                     JavaScript 引擎执行流程              │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  阶段 1: 解析（Parsing）                                │
│  ┌─────────────────────────────────────────────────┐    │
│  │  源码 → Token 流 → AST（抽象语法树）             │    │
│  │  错误：SyntaxError                               │    │
│  └─────────────────────────────────────────────────┘    │
│                         ↓                               │
│  阶段 2: 编译（Compilation）                           │
│  ┌─────────────────────────────────────────────────┐    │
│  │  AST → 字节码 + 执行上下文                        │    │
│  │  错误：ReferenceError（暂时性死区）              │    │
│  └─────────────────────────────────────────────────┘    │
│                         ↓                               │
│  阶段 3: 执行（Execution）                            │
│  ┌─────────────────────────────────────────────────┐    │
│  │  字节码运行 → 执行栈 → 堆内存                     │    │
│  │  错误：TypeError、RangeError、业务 throw         │    │
│  └─────────────────────────────────────────────────┘    │
│                                                         │
└─────────────────────────────────────────────────────────┘

2 各阶段典型错误

阶段	错误类型	抛出时机	示例
解析	`SyntaxError`	扫描 token 时发现语法错误	`function a( {`
编译	`ReferenceError`	创建执行上下文时遇到 TDZ	`console.log(x); let x = 1;`
执行	`TypeError`	运行时调用了不支持的操作	`null.foo()`
执行	`RangeError`	值超出范围	`new Array(-1)`

3 解析阶段的细节

Token 扫描过程

源代码:  function sum(a, b {
  ↓ 词法分析（Lexical Analysis）
Token 流: [keyword: 'function', identifier: 'sum', punctuator: '(', ...]
  ↓ 语法分析（Syntax Analysis）
AST:     FunctionDeclaration { params: [...], body: ... }
  ↓ 语法错误检测
❌ SyntaxError: Unexpected token '{'

常见解析错误场景

// 场景 1：括号不配对
function sum(a, b {  // 解析器在读 ')' 时遇到了 '{'
  return a + b;
}

// 场景 2：标识符包含特殊字符
const 123abc = 1;     // 数字开头的标识符非法
const my-score = 1;   // 包含连字符

// 场景 3：字符串未正确闭合
const str = 'hello;   // 单引号未闭合，后续代码都会被解析为字符串

// 场景 4：进制数字格式错误
const num = 0x;       // 十六进制需要数字
const num = 08;       // 严格模式下 08 不是合法八进制

4 编译阶段的细节

执行上下文创建

// 编译时会发生：
// 1. 扫描函数声明，创建函数对象的引用
// 2. 扫描 var 声明，提升变量到当前作用域顶部
// 3. 扫描 let/const 声明，创建变量但不赋值（TDZ）

// 对于这段代码：
console.log(a);  // 编译时记录 "a" 存在，但位置在 TDZ
let a = 1;

// 编译后的伪代码：
// CreateEnvironment()
//   declare 'a' (temporal dead zone, uninitialized)
//   // ...
// execute:
//   read 'a'  ← 此时 a 仍在 TDZ，报 ReferenceError

var vs let/const 的本质差异

// var 声明在编译阶段会提升，且初始化为 undefined
console.log(a);  // undefined（不是 ReferenceError）
var a = 1;

// let/const 声明在编译阶段只创建，初始化为 uninitialized
console.log(b);  // ReferenceError: Cannot access 'b' before initialization
let b = 1;

// 编译后的对比：
// var:
var a;                    // 声明+初始化 undefined
console.log(a);           // 读取
a = 1;                    // 赋值

// let:
let b;                    // 声明（但不初始化，TDZ）
console.log(b);           // ❌ 读取 TDZ 中的变量
b = 1;                    // 赋值（初始化完成后才能读取）

三、SyntaxError：语法非法（深入解析）

1 解析阶段 vs 运行时

关键区分：大多数 SyntaxError 在解析阶段抛出，但 JSON.parse 是在运行时抛出。

// ❌ 解析阶段：整个文件加载时就报错，代码不会执行
function broken {
  // SyntaxError: Unexpected token '{'
}

// ✅ 解析阶段：通过后才执行
function working() {
  return 1;
}

// ❌ 运行时：解析通过，执行时调用 JSON.parse 才报错
// 解析阶段：无错误
const response = '<!DOCTYPE html>...';  // 解析器只看语法，不管内容

// 运行阶段：
JSON.parse(response);  // SyntaxError: Unexpected token "<", "<!DOCTYPE..." is not valid JSON

2 JSON.parse 错误的精确定位

// ❌ 危险：直接 await res.json()
async function fetchUser() {
  const res = await fetch('/api/user');
  return await res.json(); // 不知道是 HTTP 错误还是 JSON 解析错误
}

// ✅ 安全写法：先读文本，保留现场
async function fetchUser() {
  const res = await fetch('/api/user');
  const text = await res.text(); // 先获取原始文本

  try {
    return JSON.parse(text);
  } catch (e) {
    // 此时可以输出原始文本，方便排查
    console.error('JSON 解析失败', {
      status: res.status,
      statusText: res.statusText,
      responseText: text.slice(0, 500) // 限制输出长度
    });
    throw new Error(`JSON 解析失败: ${e.message}`);
  }
}

3 构建阶段的 SyntaxError

Vite/Webpack 等构建工具会先解析代码，可能在构建阶段报语法错误：

# Vite 构建输出示例
[vite] ✗ modules/Users/app/utils.js(12,23) SyntaxError: Unexpected token (12:23)
  11 | const arr = [1, 2, 3];
  12 | const { name } = data;  // 这里的 '}' 解析器认为是多余的
  13 | );

# 解决方案
# 1. 检查是否有语法错误
# 2. 检查文件编码（UTF-8 BOM 可能导致问题）
# 3. 检查 ESLint 配置是否与构建工具冲突

四、ReferenceError：引用错误（深入解析）

1 未定义的变量 vs 暂时性死区

// ❌ 未定义的变量：直接使用从未声明的变量
console.log(undeclaredVar);  // ReferenceError: undeclaredVar is not defined

// ✅ 已声明但未初始化（TDZ）
let declaredLater = 1;
console.log(declaredLater);  // 正常工作

2 作用域链与 ReferenceError

// ReferenceError 只在作用域链中找不到变量时抛出
const globalVar = 'global';

function outer() {
  const outerVar = 'outer';

  function inner() {
    const innerVar = 'inner';
    console.log(innerVar);      // ✓ 找到：inner 函数作用域
    console.log(outerVar);      // ✓ 找到：闭包捕获 outer 函数作用域
    console.log(globalVar);     // ✓ 找到：全局作用域
    console.log(outerVar);       // ✓ 找到：通过作用域链找到
    console.log(nonExistent);   // ❌ 找不到：ReferenceError
  }

  inner();
}

3 with 语句的陷阱

with 语句会临时扩展作用域链，可能导致意外行为：

// ❌ 危险：with 创建的作用域混淆
const obj = { a: 1, b: 2 };
with (obj) {
  console.log(a);  // 1（来自 obj）
  b = 3;          // 修改 obj.b
  console.log(c);  // 如果 c 不在 obj 中，会顺着作用域链查找
}
// ⚠️ 现代 JS 已不推荐使用 with，严格模式下直接报错

4 全局变量与严格模式

// 非严格模式：隐式全局变量
function bad() {
  implicitGlobal = 1;  // 不会报错，自动创建 window.implicitGlobal
}

// 严格模式：必须显式声明
'use strict';
function good() {
  implicitGlobal = 1;  // ❌ ReferenceError: implicitGlobal is not defined
}

五、TypeError：类型错误（深入解析）

1 V8 的类型检查机制

V8 在运行时会进行类型检查，当操作类型不匹配时抛出 TypeError：

// V8 类型检查伪代码
function ReadProperty(obj, key) {
  if (obj === null || obj === undefined) {
    throw TypeError("Cannot read properties of null/undefined");
  }
  if (typeof obj !== 'object' && typeof obj !== 'function') {
    throw TypeError("Cannot read properties of primitive");
  }
  // 执行实际的属性读取
}

2 常见 TypeError 场景分析

场景 A：读取 null/undefined 的属性

// 最常见的 TypeError
const user = null;
console.log(user.name);  // TypeError: Cannot read properties of null (reading 'name')

// 防御手段
console.log(user?.name);  // undefined（可选链）
console.log(user?.name ?? '匿名');  // '匿名'（空值合并）

场景 B：调用非函数的值

const fn = 'hello';
fn();  // TypeError: fn is not a function

// 实际场景：默认导出与命名导出混用
// utils.js
export function debounce() { /* ... */ }

// index.js
import debounce from './utils';  // ❌ 错误：utils 只导出了命名导出
import { debounce } from './utils';  // ✓ 正确

场景 C：修改只读属性

// Object.freeze 冻结的对象
const frozen = Object.freeze({ name: 'test' });
frozen.name = 'new';  // TypeError: Cannot assign to read only property

// 原型链上的 getter-only 属性
class Person {
  get name() { return this._name; }
  // 没有 setter
}

const p = new Person();
p.name = 'John';  // TypeError（在某些严格模式下）

3 类型收窄与防御性编程

// ❌ 危险：假设参数类型
function processUser(user) {
  return user.profile.address.city;  // 任意一个环节为 null 都崩溃
}

// ✅ 防御性编程
function processUser(user) {
  if (!user) {
    throw new TypeError('user 参数不能为空');
  }
  return user?.profile?.address?.city ?? '未知城市';
}

// ✅ 更完整的类型守卫
function processUser(user) {
  if (user === null || user === undefined) {
    return '用户不存在';
  }
  if (typeof user !== 'object') {
    throw new TypeError('user 必须是对象');
  }
  return user?.profile?.address?.city ?? '未知城市';
}

六、RangeError：范围错误（深入解析）

1 调用栈溢出

原理：JavaScript 调用栈有深度限制（通常约 10000 层）。

// 递归陷阱
function deepRecursion(depth = 0) {
  if (depth > 10000) {
    throw new Error('递归过深');
  }
  return deepRecursion(depth + 1);
}

deepRecursion();  // RangeError: Maximum call stack size exceeded

// ✅ 正确：添加终止条件
function factorial(n) {
  if (n < 0) throw new RangeError('负数没有阶乘');
  if (n <= 1) return 1;
  return n * factorial(n - 1);
}

2 数组长度限制

// V8 数组长度限制
const maxLength = Math.pow(2, 32) - 1;  // 4294967295
new Array(maxLength);   // ✓ 可以创建
new Array(maxLength + 1);  // ❌ RangeError: Invalid array length

// 实际场景：数组字面量过长
const arr = Array(1000000000);  // ❌ 报错

// 解决方案：使用索引赋值
const arr = [];
arr[999999999] = 1;  // ✓ 可以

3 字符串重复限制

'demo'.repeat(1e7);   // ✓ 可以
'demo'.repeat(1e8);   // ❌ RangeError: Invalid string length
// 原因：字符串最大长度约 512MB

七、DOMException：Web API 业务错误

1 常见 DOMException 类型详解

name	code	含义	典型场景
`AbortError`	20	操作被中止	`AbortController.abort()`、用户取消
`InvalidStateError`	11	状态不合法	操作已结束的事务
`NotSupportedError`	9	功能不支持	不支持的编码格式
`QuotaExceededError`	22	超出配额	localStorage 写满
`SecurityError`	18	安全限制	跨域操作、file:// 协议
`NetworkError`	19	网络错误	fetch 失败

2 AbortError 详解

// AbortError 是最常见的 DOMException
const controller = new AbortController();

// 场景 1：组件卸载时取消请求
useEffect(() => {
  const promise = fetchData();
  return () => controller.abort();
}, []);

// 场景 2：超时取消
setTimeout(() => controller.abort(), 3000);

try {
  await fetch(url, { signal: controller.signal });
} catch (err) {
  if (err.name === 'AbortError') {
    console.log('请求被取消');  // 这是预期行为，不算错误
  } else {
    throw err;  // 其他错误需要处理
  }
}

3 QuotaExceededError 处理

function saveToStorage(key, value) {
  try {
    localStorage.setItem(key, JSON.stringify(value));
    return true;
  } catch (err) {
    if (err.name === 'QuotaExceededError') {
      // 清理策略
      cleanupOldData();
      // 重试一次
      try {
        localStorage.setItem(key, JSON.stringify(value));
        return true;
      } catch {
        return false;
      }
    }
    throw err;
  }
}

八、Promise 与 async/await 深入原理

1 Promise 状态机

                    创建 Promise
                        │
                        ↓
┌────────────────────────────────────────────────┐
│                   Pending（待定）                │
│  Promise 被创建，executor 同步执行               │
└────────────────────────────────────────────────┘
                        │
        ┌───────────────┴───────────────┐
        ↓                               ↓
┌─────────────────────┐     ┌─────────────────────┐
│  Fulfilled（已完成） │     │  Rejected（已拒绝）  │
│  调用 resolve()     │     │  调用 reject()       │
│  触发 .then()       │     │  触发 .catch()       │
└─────────────────────┘     └─────────────────────┘
        │                               │
        └───────────────┬───────────────┘
                        ↓
              一旦状态改变，不可逆

2 Promise 链的错误传播

// Promise 错误会沿着链传播，直到被捕获
new Promise((resolve, reject) => {
  reject(new Error('初始错误'));
})
  .then(value => value)           // 跳过，因为前面有 reject
  .catch(err => {
    console.log('捕获:', err);    // 捕获到初始错误
    throw err;                    // 重新抛出
  })
  .catch(err => {
    console.log('再次捕获:', err); // 再次捕获
  });

// ⚠️ 关键点：.catch() 返回新 Promise
// 如果 .catch() 正常返回，新 Promise 进入 fulfilled 状态
// 如果 .catch() 抛出错误或返回 rejected Promise，新 Promise 进入 rejected 状态

3 async/await 的本质

// async 函数返回 Promise
async function asyncFn() {
  return 1;  // 等价于 Promise.resolve(1)
}

async function asyncFn2() {
  throw new Error('error');  // 等价于 Promise.reject(new Error('error'))
}

// await 暂停 async 函数执行，等待 Promise
async function process() {
  console.log(1);
  const result = await Promise.resolve(2);  // 暂停，输出 1
  console.log(result);  // 输出 2
  console.log(3);
}

// 等价的 Promise 写法
function process() {
  console.log(1);
  return Promise.resolve(2)
    .then(result => {
      console.log(result);
      console.log(3);
    });
}

4 常见 Promise 错误模式

模式 1：忘记 return

// ❌ 错误：忘记 return Promise
async function fetchData() {
  fetch('/api/data')
    .then(res => res.json())
    .then(data => {
      return data;  // 有 return
    });
  // fetchData() 会在 fetch 完成前返回 undefined
}

// ✅ 正确：顶层 return
async function fetchData() {
  return fetch('/api/data')
    .then(res => res.json());
}

模式 2：并发请求竞态

// ❌ 危险：多次快速请求，后发先至
function search(keyword) {
  fetch(`/api/search?q=${keyword}`)
    .then(res => res.json())
    .then(results => setResults(results));
  // 用户快速输入 "a" → "ab" → "abc"
  // 可能出现 "abc" 先返回，"ab" 后返回的竞态
}

// ✅ 正确：取消旧请求
let currentController = null;

function search(keyword) {
  currentController?.abort();  // 取消上一个
  currentController = new AbortController();

  fetch(`/api/search?q=${keyword}`, { signal: currentController.signal })
    .then(res => res.json())
    .then(results => setResults(results));
}

模式 3：finally 覆盖错误

// ❌ 危险：finally 中的 throw 覆盖之前的结果
Promise.reject('original error')
  .catch(err => {
    console.log('catch:', err);  // 输出 'original error'
    return 'handled';
  })
  .finally(() => {
    throw new Error('cleanup error');  // 覆盖前面的 'handled'
  })
  .then(value => console.log(value))     // 不会执行
  .catch(err => console.log('final catch:', err));  // 捕获到 'cleanup error'

// ✅ 正确：finally 不要 throw
Promise.reject('original error')
  .catch(err => {
    return 'handled';
  })
  .finally(() => {
    // 只做清理，不做可能失败的操作
    cleanup();
    // 不要 throw
  })
  .then(value => console.log(value));  // 输出 'handled'

5 Promise.all vs Promise.allSettled

// Promise.all：短路行为
const promises = [
  Promise.resolve(1),
  Promise.reject('error'),
  Promise.resolve(3)
];

Promise.all(promises)
  .then(values => console.log(values))
  .catch(err => console.log(err));  // 只输出 'error'，第三个 Promise 不会执行

// Promise.allSettled：等待所有完成
Promise.allSettled(promises).then(results => {
  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(`${index}: ${result.value}`);
    } else {
      console.log(`${index}: ${result.reason}`);
    }
  });
});

九、Source Map 深入原理

1 Source Map 工作原理

压缩后代码位置        原始代码位置
───────────────────────────────────────
app.min.js:1:100   ←→   utils.ts:25:10
app.min.js:1:150   ←→   utils.ts:26:8
app.min.js:1:200   ←→   component.tsx:10:15

.map 文件包含：
1. 压缩后代码的每个位置
2. 对应的原始文件、行号、列号
3. 名称映射（可选）

2 Source Map 生成过程

// 源代码
function calculate(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// 压缩后
function a(b){return b.reduce((c,d)=>c+d.price,0);}

// .map 文件（简化示例）
{
  "version": 3,
  "sources": ["utils.ts"],
  "names": ["calculate", "items", "reduce", "sum", "item", "price"],
  "mappings": "AAAA,OAAO,MAAM,aAAa,CAAC"
  // 每一段 mappings 对应一个位置映射
}

3 Source Map 失效排查

// 常见失效原因
const sourceMapIssues = {
  'map文件未生成': '检查构建配置 sourcemap: true',
  'CDN未返回SourceMap头': '检查服务器配置 AddType source-map map',
  '路径不匹配': '检查 sourceMappingURL 注释路径',
  '启用缓存': '禁用缓存后重新请求，或添加版本号'
};

十、框架错误处理深入

React Error Boundary 深入

Error Boundary 生命周期

class ErrorBoundary extends React.Component {
  // 当子组件抛出错误时调用
  static getDerivedStateFromError(error) {
    // 更新 state，触发重新渲染降级 UI
    return { hasError: true, error };
  }

  // 记录错误日志
  componentDidCatch(error, errorInfo) {
    logErrorToService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 返回降级 UI
      return <FallbackUI error={this.state.error} />;
    }
    return this.props.children;
  }
}

Error Boundary 限制

// Error Boundary 不会捕获：
// 1. 事件处理器中的错误
<button onClick={() => { throw new Error('event error'); }}>
  点击我
</button>
// 需要在事件处理器中使用 try/catch

// 2. 异步代码中的错误
useEffect(() => {
  fetchData().then(data => setData(data));  // 如果这里出错，Error Boundary 不捕获
}, []);

// 3. 服务端渲染错误

// 4. Error Boundary 自身的错误

Vue 全局错误处理深入

// app.config.errorHandler - 应用级错误处理
const app = createApp(App);

app.config.errorHandler = (err, instance, info) => {
  // err: 错误对象
  // instance: 触发错误的组件实例
  // info: 额外的错误信息字符串

  console.error('Vue Error:', err);
  console.error('Component:', instance);
  console.error('Info:', info);

  // 上报到监控系统
  reportError({ err, instance, info });
};

// app.config.warnHandler - 警告处理
app.config.warnHandler = (msg, instance, trace) => {
  // 只在开发环境记录警告
  if (process.env.NODE_ENV === 'development') {
    console.warn('Vue Warning:', msg, trace);
  }
};

十一、实战：复杂错误排查案例

案例 1：静默失败的 Promise 链

问题：页面加载正常，但数据始终不显示。

// ❌ 原始代码：看起来没问题，但静默失败
function loadUserData(userId) {
  fetch(`/api/users/${userId}`)
    .then(res => res.json())
    .then(data => {
      // 这里可能被跳过但没有任何提示
      this.setState({ user: data });
    });
}

loadUserData(123);  // 调用后没有反馈，不知道成功还是失败

排查过程：

// Step 1: 添加日志
function loadUserData(userId) {
  return fetch(`/api/users/${userId}`)  // ❌ 缺少 return
    .then(res => {
      console.log('响应状态:', res.status);
      return res.json();
    })
    .then(data => {
      console.log('收到数据:', data);
      this.setState({ user: data });
    })
    .catch(err => {
      console.error('加载失败:', err);
    });
}

// Step 2: 修复
async function loadUserData(userId) {
  try {
    const res = await fetch(`/api/users/${userId}`);
    const data = await res.json();
    this.setState({ user: data });
  } catch (err) {
    console.error('加载失败:', err);
    throw err;  // 重新抛出，让调用方知道失败
  }
}

案例 2：递归导致的栈溢出

问题：页面卡死，控制台无输出。

// ❌ 危险代码
function flattenArray(arr) {
  return arr.reduce((acc, item) => {
    if (Array.isArray(item)) {
      return acc.concat(flattenArray(item));  // 递归
    }
    return acc.concat(item);
  }, []);
}

// 正常情况
flattenArray([1, [2, 3], [4, [5, 6]]]);  // [1, 2, 3, 4, 5, 6]

// 循环引用导致栈溢出
const circular = [1, 2, 3];
circular.push(circular);  // [1, 2, 3, <circular>]
flattenArray(circular);   // RangeError: Maximum call stack size exceeded

排查方法：

// 方法 1：限制递归深度
function flattenArray(arr, depth = 0, maxDepth = 100) {
  if (depth > maxDepth) {
    throw new Error('嵌套层级超过限制，可能存在循环引用');
  }

  return arr.reduce((acc, item) => {
    if (Array.isArray(item)) {
      return acc.concat(flattenArray(item, depth + 1, maxDepth));
    }
    return acc.concat(item);
  }, []);
}

// 方法 2：使用 Set 检测循环
function flattenArray(arr, seen = new Set()) {
  return arr.reduce((acc, item) => {
    if (seen.has(item)) {
      throw new Error('检测到循环引用');
    }
    if (Array.isArray(item)) {
      seen.add(item);
      return acc.concat(flattenArray(item, seen));
    }
    return acc.concat(item);
  }, []);
}

十二、内存相关错误识别

1 内存泄漏识别

// 常见内存泄漏模式

// 模式 1：未清理的定时器
const intervalId = setInterval(() => {
  fetchData();
}, 1000);

// 组件卸载时未清理
useEffect(() => {
  const id = setInterval(fetchData, 1000);
  return () => clearInterval(id);  // ✅ 正确清理
}, []);

// 模式 2：事件监听器未移除
window.addEventListener('resize', handleResize);
window.addEventListener('scroll', handleScroll);

// 组件卸载时需要移除
useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

// 模式 3：闭包持有大对象引用
function createClosure() {
  const largeData = new Array(1000000);  // 占用大量内存

  return function() {
    // 这个闭包会持有 largeData 的引用
    // 直到闭包被释放，largeData 才能被 GC
    return largeData.length;
  };
}

2 内存分析工具使用

// 在 DevTools 中分析内存
// 1. Memory 面板 → Heap Snapshot
// 2. 记录操作前后的快照
// 3. 对比差异，查看未释放的对象

// 使用 Performance.memory（仅 Chrome）
console.log({
  jsHeapSizeLimit: performance.memory.jsHeapSizeLimit,
  totalJSHeapSize: performance.memory.totalJSHeapSize,
  usedJSHeapSize: performance.memory.usedJSHeapSize
});

十三、结语

JavaScript 错误的核心是「理解引擎行为」：

解析阶段 → SyntaxError —— 代码语法本身有问题
编译阶段 → ReferenceError（TDZ）—— 变量声明顺序问题
运行时 → TypeError/RangeError —— 类型/范围不匹配
Promise 链 → 状态机和错误传播机制
内存 → 泄漏识别和 GC 机制

记住三句话：

报错是引擎的语言——学会解读每种错误的含义
理解执行流程——知道错误在哪个阶段抛出
防御式编程——用可选链、空值合并、try/catch 兜底

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

域名后缀怎么选？聊聊（.ai / .app / .art 等）

最近整理了一批域名后缀价格（美元约价），很多朋友第一反应都是：哪个便宜买哪个。但如果你是做产品、做品牌、做出海，后缀选择本质上不是“价格题”，而是“场景题”。价格来源于聚域网平台页面展示约价（会随活动和汇率波动）。

AtomGit开源社区

腾讯位置服务开发者征文大赛获奖名单

AtomGit开源社区

法律科技的发展脉络：从数字化管理到AI辅助办案的演进路径

执业15年，我经历了律师行业工具变迁的三个阶段：纸质时代、本地软件时代、云端时代。现在正站在第四个阶段的起点——AI辅助办案。这篇文章回顾法律科技的发展脉络，分析每个阶段的特征和局限性，以及正在发生的变化趋势。

AtomGit开源社区

所有评论(0)

查看更多评论

myIsCoder

@m0_51040189

已为社区贡献6条内容

JavaScript 与异步错误定位

myIsCoder

JavaScript 与异步错误定位

一、导读

这篇解决什么问题

二、JS 引擎执行阶段详解

1 三个执行阶段

2 各阶段典型错误

3 解析阶段的细节

Token 扫描过程

常见解析错误场景

4 编译阶段的细节

执行上下文创建

var vs let/const 的本质差异

三、SyntaxError：语法非法（深入解析）

1 解析阶段 vs 运行时

2 JSON.parse 错误的精确定位

3 构建阶段的 SyntaxError

四、ReferenceError：引用错误（深入解析）

1 未定义的变量 vs 暂时性死区

2 作用域链与 ReferenceError

3 with 语句的陷阱

4 全局变量与严格模式

五、TypeError：类型错误（深入解析）

1 V8 的类型检查机制

2 常见 TypeError 场景分析

场景 A：读取 null/undefined 的属性

场景 B：调用非函数的值

场景 C：修改只读属性

3 类型收窄与防御性编程

六、RangeError：范围错误（深入解析）

1 调用栈溢出

2 数组长度限制

3 字符串重复限制

七、DOMException：Web API 业务错误

1 常见 DOMException 类型详解

2 AbortError 详解

3 QuotaExceededError 处理

八、Promise 与 async/await 深入原理

1 Promise 状态机

2 Promise 链的错误传播

3 async/await 的本质

4 常见 Promise 错误模式

模式 1：忘记 return

模式 2：并发请求竞态

模式 3：finally 覆盖错误

5 Promise.all vs Promise.allSettled

九、Source Map 深入原理

1 Source Map 工作原理

2 Source Map 生成过程

3 Source Map 失效排查

十、框架错误处理深入

React Error Boundary 深入

Error Boundary 生命周期

Error Boundary 限制

Vue 全局错误处理深入

十一、实战：复杂错误排查案例

案例 1：静默失败的 Promise 链

案例 2：递归导致的栈溢出

十二、内存相关错误识别

1 内存泄漏识别

2 内存分析工具使用

十三、结语

所有评论(0)

温馨提示：您尚未绑定手机号

myIsCoder