JavaScript 错误和异常处理：构建健壮应用的基石

weixin_42107409

857人浏览 · 2025-10-01 22:34:05

weixin_42107409 · 2025-10-01 22:34:05 发布

在编写任何复杂的 JavaScript 应用程序时，错误是不可避免的。从简单的拼写错误到复杂的运行时异常，这些问题都可能导致程序崩溃，影响用户体验。**错误和异常处理（Error and Exception Handling）**是 JavaScript 中一个至关重要的概念，它允许开发者优雅地捕获、处理和响应这些意外情况，从而确保应用程序的稳定性和可靠性。

本指南将深入探讨 JavaScript 中的错误处理机制。您将学习如何使用 try...catch...finally 语句来捕获和管理运行时错误，如何使用 throw 语句创建和抛出自定义错误，以及如何理解 JavaScript 内置的 Error 对象及其子类型。我们还将涵盖异步代码中的错误处理、自定义错误类型以及全局错误处理的最佳实践，助您构建出更加健壮和用户友好的应用程序。

前置知识

为了更好地理解本指南，建议您具备以下基础知识：

JavaScript 基础： 熟悉变量、数据类型、函数、条件语句、循环等基本概念。
函数和作用域： 了解函数的定义、调用以及变量作用域。
事件循环 (可选但有益)： 对 JavaScript 的异步执行机制有基本了解，有助于理解异步错误处理。

为什么错误处理如此重要？
- 1.1 提升应用程序稳定性
- 1.2 改善用户体验
- 1.3 简化调试
- 1.4 控制程序流程
JavaScript 中错误的类型
- 2.1 语法错误 (Syntax Errors)
- 2.2 运行时错误 / 异常 (Runtime Errors / Exceptions)
- 2.3 逻辑错误 (Logical Errors)
try...catch 语句：捕获运行时错误
- 3.1 基本语法
- 3.2 工作原理
- 3.3 示例
finally 块：无论如何都会执行的代码
- 4.1 作用与用途
- 4.2 示例：try...catch...finally
throw 语句：抛出自定义错误
- 5.1 创建和抛出错误
- 5.2 抛出各种类型的值
- 5.3 示例：抛出 Error 对象
JavaScript 内置的 Error 对象
- 6.1 Error 对象的属性 (name, message, stack)
- 6.2 常见的 Error 子类型
  - ReferenceError
  - TypeError
  - SyntaxError
  - RangeError
  - URIError
  - EvalError
- 6.3 示例：查看 Error 属性
自定义错误类型：扩展 Error 对象
- 7.1 创建自定义错误类
- 7.2 优势
- 7.3 示例
异步代码中的错误处理
- 8.1 Promise 中的错误处理 (.catch())
- 8.2 async/await 中的错误处理 (try...catch)
- 8.3 示例
全局错误处理
- 9.1 window.onerror (针对同步运行时错误)
- 9.2 window.addEventListener('unhandledrejection', ...) (针对未捕获的 Promise 拒绝)
- 9.3 示例
错误处理的最佳实践
- 10.1 不要“吞噬”错误
- 10.2 提供有意义的错误信息
- 10.3 区分错误类型
- 10.4 适当的日志记录
- 10.5 资源清理 (finally)
- 10.6 用户友好的错误提示
总结
附录：错误处理常见问题

1. 为什么错误处理如此重要？

错误处理是任何健壮应用程序不可或缺的一部分，其重要性体现在以下几个方面：

1.1 提升应用程序稳定性

防止崩溃： 未经处理的错误会导致程序中断，用户体验受损。错误处理机制可以捕获这些错误，并允许程序以受控的方式继续执行或进行恢复。
数据一致性： 在某些操作（如数据修改）中，如果发生错误，错误处理可以确保数据回滚到一致状态，防止数据损坏。

1.2 改善用户体验

友好的提示： 代替突然的白屏或报错信息，向用户显示清晰、友好的错误消息，指导他们如何操作或告知他们正在处理问题。
不中断流程： 尽可能让用户保持在当前页面或流程中，即使后台发生了错误。

1.3 简化调试

精确捕获： try...catch 语句允许您在代码的特定区域捕获错误，从而缩小问题范围。
详细信息： 错误对象提供了错误的类型、消息和堆栈跟踪，这些信息对于识别和修复问题至关重要。

1.4 控制程序流程

优雅降级： 当某个功能无法正常工作时，程序可以降级到备用方案，而不是完全失败。
重试机制： 对于瞬时错误（如网络问题），可以在捕获错误后实现重试逻辑。

2. JavaScript 中错误的类型

在 JavaScript 中，错误大致可以分为三类：

2.1 语法错误 (Syntax Errors)

定义： 代码不符合 JavaScript 语言规则，导致解析器无法理解。
特点： 在代码执行前（解析阶段）就会被检测到。

示例：

// 缺少括号
let x = (5 + 3; // Uncaught SyntaxError: Unexpected token ';'

处理： 无法使用 try...catch 捕获，因为代码根本无法执行。唯一的处理方式是修复代码。

2.2 运行时错误 / 异常 (Runtime Errors / Exceptions)

定义： 代码在执行过程中发生的问题。语法正确，但操作非法。
特点： 可以在 try...catch 块中捕获。

示例：

console.log(nonExistentVariable); // Uncaught ReferenceError: nonExistentVariable is not defined

处理： 这是 try...catch 语句主要用来处理的错误类型。

2.3 逻辑错误 (Logical Errors)

定义： 代码按照预期执行，没有语法错误或运行时错误，但结果不是期望的。
特点： 程序不会崩溃，但行为不正确。

示例：

function add(a, b) {
    return a - b; // 逻辑错误：本应是 a + b
}
console.log(add(2, 3)); // 输出 -1，而不是 5

处理： 无法通过 try...catch 捕获。需要通过仔细的代码审查、单元测试和调试工具（如 console.log）来发现和修复。

3. `try...catch` 语句：捕获运行时错误

try...catch 是 JavaScript 中最基本的错误处理机制。

3.1 基本语法

try {
  // 可能会抛出错误的代码块
} catch (error) {
  // 捕获到错误时执行的代码块
  // error 参数包含了错误对象
}

3.2 工作原理

try 块： 您将所有可能引发错误的代码放在 try 块中。
错误发生： 如果在 try 块中的任何地方发生了运行时错误（异常），JavaScript 引擎会立即停止执行 try 块中剩余的代码。
catch 块： 引擎会跳转到 catch 块执行。catch 块接收一个参数，通常命名为 error 或 err，它是一个包含了错误信息的对象。
无错误发生： 如果 try 块中的代码执行完毕，没有抛出任何错误，那么 catch 块会被跳过，程序继续执行 try...catch 语句之后的代码。

3.3 示例

function divide(a, b) {
  try {
    if (b === 0) {
      throw new Error("除数不能为零！"); // 手动抛出错误
    }
    const result = a / b;
    console.log("除法结果:", result);
    return result;
  } catch (error) {
    console.error("发生错误:", error.message); // 捕获并打印错误信息
    return null; // 返回一个默认值或指示失败
  }
}

// 正常执行
divide(10, 2); // 输出: 除法结果: 5

// 发生错误
divide(10, 0); // 输出: 发生错误: 除数不能为零！

// 尝试访问未定义的变量
try {
  let value = undefinedVariable;
  console.log(value);
} catch (error) {
  console.error("捕获到 ReferenceError:", error.name, error.message);
}
// 输出: 捕获到 ReferenceError: ReferenceError undefinedVariable is not defined

4. `finally` 块：无论如何都会执行的代码

finally 块是 try...catch 语句的可选部分，它确保某些代码无论是否发生错误都会被执行。

4.1 作用与用途

保证执行： 无论 try 块中的代码是成功完成、抛出错误并被 catch 块处理，还是在 try 或 catch 块中使用了 return 语句，finally 块中的代码都一定会被执行。
资源清理： 它的主要用途是进行资源清理，例如关闭文件、释放网络连接、清除定时器或重置UI状态。

4.2 示例：`try...catch...finally`

function readFile(filename) {
  let fileHandle = null; // 模拟文件句柄

  try {
    console.log("尝试打开文件:", filename);
    // 模拟文件打开操作，可能会失败
    if (filename === "error.txt") {
      throw new Error("文件访问权限不足！");
    }
    fileHandle = "Opened_" + filename; // 模拟成功打开
    console.log(fileHandle + " 已打开。");

    // 模拟文件读取操作
    console.log("正在读取文件内容...");
    // 假设读取过程中又可能出错
    if (filename === "buggy.txt") {
        throw new Error("文件内容格式错误！");
    }
    console.log("文件内容读取完毕。");
    return "文件内容"; // 假设返回文件内容

  } catch (error) {
    console.error("处理文件时发生错误:", error.message);
    return null; // 表明操作失败
  } finally {
    // 无论文件是否成功打开或读取，都尝试关闭文件
    if (fileHandle) {
      console.log(fileHandle + " 已关闭。");
      fileHandle = null;
    } else {
      console.log("文件未打开或已在错误中关闭，无需额外操作。");
    }
    console.log("资源清理完成。");
  }
}

console.log("--- 场景1: 正常读取 ---");
readFile("data.txt");
// 输出:
// 尝试打开文件: data.txt
// Opened_data.txt 已打开。
// 正在读取文件内容...
// 文件内容读取完毕。
// Opened_data.txt 已关闭。
// 资源清理完成。

console.log("\n--- 场景2: 打开文件时出错 ---");
readFile("error.txt");
// 输出:
// 尝试打开文件: error.txt
// 处理文件时发生错误: 文件访问权限不足！
// 文件未打开或已在错误中关闭，无需额外操作。
// 资源清理完成。

console.log("\n--- 场景3: 读取文件时出错 ---");
readFile("buggy.txt");
// 输出:
// 尝试打开文件: buggy.txt
// Opened_buggy.txt 已打开。
// 正在读取文件内容...
// 处理文件时发生错误: 文件内容格式错误！
// Opened_buggy.txt 已关闭。
// 资源清理完成。

5. `throw` 语句：抛出自定义错误

throw 语句用于创建和抛出一个自定义的错误或异常。

5.1 创建和抛出错误

当程序检测到它无法处理或不应该处理的异常情况时，可以使用 throw 语句。
throw 语句会中断当前函数的执行，并将一个值（错误）传递给调用堆栈中最近的 catch 块。

5.2 抛出各种类型的值

理论上，您可以抛出任何 JavaScript 值（字符串、数字、对象等）。然而，最佳实践是抛出一个 Error 对象的实例，因为 Error 对象提供了标准化的错误信息，如 name、message 和 stack 跟踪。

5.3 示例：抛出 `Error` 对象

function validateAge(age) {
  if (typeof age !== 'number') {
    throw new TypeError("年龄必须是一个数字。"); // 抛出 TypeError
  }
  if (age < 0 || age > 120) {
    throw new RangeError("年龄必须在0到120之间。"); // 抛出 RangeError
  }
  console.log("年龄有效:", age);
}

try {
  validateAge(30);       // 有效
  validateAge(-5);       // 抛出 RangeError
  validateAge("abc");    // 抛出 TypeError
} catch (error) {
  console.error("捕获到错误:", error.name, ":", error.message);
}

// 示例中只会捕获到第一个抛出的错误 (validateAge(-5))
// 输出: 捕获到错误: RangeError : 年龄必须在0到120之间。

注意： 一旦 throw 语句执行，当前 try 块的执行就会停止，并跳转到 catch 块。所以上述示例中，validateAge("abc") 不会被执行到。

6. JavaScript 内置的 `Error` 对象

Error 对象是 JavaScript 中所有错误的基础。当运行时错误发生时，JavaScript 引擎会创建一个 Error 或其子类型的实例。

6.1 `Error` 对象的属性 (`name`, `message`, `stack`)

Error.prototype.name： 错误的名称（如 “ReferenceError”, “TypeError”, “MyCustomError”）。
Error.prototype.message： 错误的描述性字符串。
Error.prototype.stack (非标准，但广泛支持)： 错误的堆栈跟踪信息，指示错误发生的代码位置和函数调用链。对于调试非常有用。

6.2 常见的 `Error` 子类型

JavaScript 提供了多个内置的 Error 子类型，用于表示不同类型的运行时错误：

ReferenceError： 尝试访问一个未定义的变量。

try { console.log(x); } catch (e) { console.log(e.name); } // ReferenceError

TypeError： 对一个值进行了不合法的操作，或者函数参数类型不正确。
```
try { null.f(); } catch (e) { console.log(e.name); } // TypeError
```
SyntaxError： 解析器在解析代码时遇到的语法不符合语言规范的错误。注意：不能被 try...catch 捕获。
RangeError： 数字变量或函数参数超出其有效范围（例如，Array 构造函数的长度参数为负数）。
```
try { new Array(-1); } catch (e) { console.log(e.name); } // RangeError
```
URIError： 对 URI（统一资源标识符）进行编码或解码时发生错误（例如，decodeURIComponent('%')）。
```
try { decodeURIComponent('%'); } catch (e) { console.log(e.name); } // URIError
```
EvalError： eval() 函数相关错误。在现代 JavaScript 中很少使用，通常也避免使用 eval()。
InternalError (非标准)： 内部 JavaScript 引擎错误，如堆栈溢出。

6.3 示例：查看 `Error` 属性

try {
  const obj = null;
  obj.property; // 尝试访问 null 的属性，会抛出 TypeError
} catch (error) {
  console.log("--- 错误信息 ---");
  console.log("名称 (name):", error.name);
  console.log("消息 (message):", error.message);
  console.log("堆栈 (stack):", error.stack); // 堆栈跟踪信息

  // 检查错误类型
  if (error instanceof TypeError) {
    console.log("这是一个 TypeError。");
  }
}
// 输出示例 (具体堆栈信息可能因环境而异):
// --- 错误信息 ---
// 名称 (name): TypeError
// 消息 (message): Cannot read properties of null (reading 'property')
// 堆栈 (stack): TypeError: Cannot read properties of null (reading 'property')
//     at <anonymous>:3:7
// 这是一个 TypeError。

7. 自定义错误类型：扩展 `Error` 对象

为了更好地组织和区分应用程序中的特定错误，您可以创建自己的自定义错误类。这有助于编写更具语义化和可维护性的错误处理代码。

7.1 创建自定义错误类

通过继承内置的 Error 类来创建自定义错误。

class NetworkError extends Error {
  constructor(message, statusCode) {
    super(message); // 调用父类 Error 的构造函数
    this.name = "NetworkError"; // 设置错误的名称
    this.statusCode = statusCode || 500; // 添加自定义属性
  }
}

class ValidationError extends Error {
  constructor(message, field) {
    super(message);
    this.name = "ValidationError";
    this.field = field; // 哪个字段发生了验证错误
  }
}

7.2 优势

语义化： 错误名称更具描述性，一眼就能看出错误类型。
可读性： instanceof 检查更清晰，例如 if (error instanceof NetworkError)。
可扩展性： 可以为自定义错误添加额外的属性（如 statusCode, field），以提供更详细的错误上下文信息。

7.3 示例

function fetchData(url) {
  // 模拟网络请求
  const random = Math.random();
  if (random < 0.3) {
    throw new NetworkError("服务器连接失败。", 503);
  } else if (random < 0.6) {
    throw new ValidationError("输入数据格式不正确。", "userId");
  } else {
    return "数据已成功获取。";
  }
}

try {
  const data = fetchData("https://api.example.com/data");
  console.log("成功:", data);
} catch (error) {
  if (error instanceof NetworkError) {
    console.error("网络错误发生:", error.message, "状态码:", error.statusCode);
  } else if (error instanceof ValidationError) {
    console.error("验证错误发生:", error.message, "字段:", error.field);
  } else if (error instanceof Error) { // 捕获其他未知的 Error 类型
    console.error("未知错误:", error.name, ":", error.message);
  } else { // 捕获非 Error 类型的抛出值
    console.error("捕获到非 Error 对象:", error);
  }
}

8. 异步代码中的错误处理

JavaScript 的异步特性要求我们对错误处理有特殊的考量，因为 try...catch 无法直接捕获跨越异步边界的错误。

8.1 Promise 中的错误处理 (`.catch()`)

Promise 提供了 .catch() 方法来专门处理链式 Promise 中的错误。当 Promise 被拒绝（rejected）时，会触发最近的 .catch() 回调。

function asyncOperation(shouldFail) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (shouldFail) {
        reject(new Error("异步操作失败！")); // 拒绝 Promise
      } else {
        resolve("异步操作成功！"); // 解决 Promise
      }
    }, 1000);
  });
}

// 成功案例
asyncOperation(false)
  .then(data => console.log("Promise Success:", data))
  .catch(error => console.error("Promise Error:", error.message)); // 不会执行

// 失败案例
asyncOperation(true)
  .then(data => console.log("Promise Success:", data)) // 不会执行
  .catch(error => console.error("Promise Error:", error.message)); // 会执行

8.2 `async/await` 中的错误处理 (`try...catch`)

async/await 使得异步代码看起来像同步代码，这允许我们在 async 函数内部使用传统的 try...catch 块来处理 Promise 拒绝。

async function performAsyncTask(shouldFail) {
  try {
    const result = await asyncOperation(shouldFail); // await 异步操作
    console.log("Async/Await Success:", result);
  } catch (error) {
    console.error("Async/Await Error:", error.message); // 捕获 await 抛出的错误
  }
}

// 成功案例
performAsyncTask(false);

// 失败案例
performAsyncTask(true);

8.3 示例

// 上述Promise和Async/Await示例已充分展示。

9. 全局错误处理

为了捕获未被特定 try...catch 或 .catch() 块处理的全局错误，JavaScript 提供了全局的错误处理机制。

9.1 `window.onerror` (针对同步运行时错误)

window.onerror 事件处理程序可以捕获页面上所有未被 try...catch 捕获的同步运行时错误（包括 JavaScript 文件加载错误）。

window.onerror = function(message, source, lineno, colno, error) {
  console.error("--- 全局同步错误 ---");
  console.error("Message:", message);
  console.error("Source:", source);
  console.error("Line:", lineno, "Col:", colno);
  console.error("Error Object:", error); // 原始错误对象
  
  // 返回 true 可以阻止浏览器默认的错误报告（通常是控制台输出）
  // 返回 false (或不返回) 允许默认报告
  return false; 
};

// 故意制造一个未捕获的同步错误
// console.log(nonExistentVarGlobal); // 取消注释以测试

9.2 `window.addEventListener('unhandledrejection', ...)` (针对未捕获的 Promise 拒绝)

对于未被 Promise 链中的 .catch() 处理的 Promise 拒绝，unhandledrejection 事件会在全局范围内触发。

window.addEventListener('unhandledrejection', event => {
  console.error("--- 全局未处理的 Promise 拒绝 ---");
  console.error("Reason:", event.reason); // 拒绝的原因（通常是错误对象）
  console.error("Promise:", event.promise); // 被拒绝的 Promise 对象
  
  // event.preventDefault(); // 可以阻止浏览器默认的警告
});

// 故意制造一个未捕获的 Promise 拒绝
new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error("这是一个未处理的 Promise 拒绝！"));
  }, 500);
});

9.3 示例

上述代码片段已包含示例。这些全局处理程序对于错误监控和日志记录非常有用。

10. 错误处理的最佳实践

有效的错误处理不仅仅是捕获错误，更重要的是如何合理地响应和管理它们。

10.1 不要“吞噬”错误

避免空 catch 块： 绝不要写空的 catch 块，这会隐藏错误，使调试变得异常困难。
至少进行日志记录： 即使您决定不向用户显示错误，也应至少将错误记录到控制台或日志服务中。

// 不好的实践
try {
  // ...
} catch (error) {
  // 什么都不做
}

// 好的实践
try {
  // ...
} catch (error) {
  console.error("捕获到错误:", error);
  // 或者发送到日志服务
}

10.2 提供有意义的错误信息

具体而非模糊： 错误消息应具体说明出了什么问题，而不是“发生了错误”。
包含上下文： 尽可能在错误消息中包含相关的上下文信息（如失败的输入值、受影响的模块等）。

10.3 区分错误类型

使用 instanceof 或自定义错误类型来区分不同类型的错误，并根据错误类型采取不同的处理策略。

10.4 适当的日志记录

客户端日志： 使用 console.error 或 console.warn。
远程日志服务： 在生产环境中，将错误发送到专门的错误监控和日志记录服务（如 Sentry, Bugsnag, Datadog），以便及时发现和分析问题。

10.5 资源清理 (`finally`)

始终在 finally 块中执行必要的资源清理工作，确保应用程序状态的正确性。

10.6 用户友好的错误提示

避免直接向用户显示技术性强的错误信息。
提供清晰、简洁、非技术性的提示，指导用户采取下一步行动（如“请检查您的网络连接并重试”，或“我们正在处理一个问题，请稍后重试”）。

11. 总结

JavaScript 错误和异常处理是构建稳定、可靠和用户友好应用程序的关键。

重要性： 错误处理不仅能防止程序崩溃，还能提高用户体验、简化调试和控制程序流程。
核心机制： try...catch 语句用于捕获运行时错误，finally 块用于资源清理，throw 语句用于抛出自定义错误。
错误对象： 理解 Error 对象及其 name、message、stack 属性，以及各种内置子类型。
自定义错误： 通过继承 Error 类创建自定义错误，可以提高代码的可读性和可维护性。
异步处理： Promise 的 .catch() 和 async/await 中的 try...catch 是处理异步错误的关键。
全局处理： window.onerror 和 unhandledrejection 事件提供了捕获未处理错误的最后防线。
最佳实践： 避免吞噬错误，提供有意义的日志和用户友好的提示，并始终进行资源清理。

掌握这些错误处理技术将使您能够编写出更健壮、更专业的 JavaScript 代码，从而有效管理应用程序中的不可预测性。

12. 附录：错误处理常见问题

Q: 为什么 try...catch 无法捕获语法错误？
A: 语法错误发生在 JavaScript 引擎解析（parsing）代码的阶段，而不是执行（execution）阶段。try...catch 只有在代码开始执行后才能工作。如果代码本身语法就不正确，它根本无法被解析成可执行的代码。

Q: 我应该在每个函数中都使用 try...catch 吗？
A: 不。过度使用 try...catch 会使代码变得冗长和难以阅读。通常，您应该在可能导致应用程序中断的关键操作或调用可能失败的外部 API/库的代码周围放置 try...catch。在应用程序的较高层级（如请求处理、组件渲染）进行集中捕获，并允许较低层级的函数通过 throw 向上冒泡错误，是一种更推荐的模式。

Q: 如何在生产环境中记录错误？
A: 在生产环境中，不应仅仅依赖 console.error。您应该将全局错误处理程序（window.onerror 和 unhandledrejection）捕获到的错误以及应用程序中其他关键点的错误发送到专门的错误监控服务（如 Sentry, Bugsnag, Rollbar）或您的后端日志系统。这些服务可以聚合、分析错误，并提供警报功能。

Q: throw "some string" 和 throw new Error("some string") 有什么区别？
A: 理论上，您可以抛出任何值。但强烈建议抛出 new Error() 的实例。Error 对象提供了标准化的 name 和 message 属性，最重要的是提供了 stack 属性，它包含详细的函数调用堆栈信息，对于调试至关重要。抛出字符串不会提供这些有用的调试信息。

Q: try...finally 在没有 catch 块的情况下合法吗？
A: 是的，这是合法的。如果您不关心捕获错误本身，而只想确保无论 try 块是否抛出错误，finally 块中的代码都一定会被执行，那么 try...finally 是一个有效的结构。在这种情况下，如果 try 块抛出错误，该错误将不会被捕获，而是继续向上冒泡到调用堆栈中的下一个 try...catch 块，或者最终导致程序崩溃（如果没人捕获）。

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

2026年AI Agent落地指南：小白程序员必读，收藏这份转型秘籍！

本文揭示了AI Agent的真相，区分了Agent与Chatbot，阐述了Agent适用的企业场景，分析了落地过程中数据治理的重要性，并强调了Agent与低代码的结合。文章还提供了投入产出计算方法和转型建议，旨在帮助企业快速理解并实施AI Agent，实现智能化转型。

AI Agent技术社区

收藏！小白程序员必看：如何找到企业级高ROI AI Agent落地场景？

AI Agent技术社区

主流 Agent 之「鹅厂16个 AI Agent 产品」介绍

AI Agent技术社区

所有评论(0)

查看更多评论

weixin_42107409

@weixin_42107409

已为社区贡献345条内容

JavaScript 错误和异常处理：构建健壮应用的基石

weixin_42107409

前置知识

目录

1. 为什么错误处理如此重要？

1.1 提升应用程序稳定性

1.2 改善用户体验

1.3 简化调试

1.4 控制程序流程

2. JavaScript 中错误的类型

2.1 语法错误 (Syntax Errors)

2.2 运行时错误 / 异常 (Runtime Errors / Exceptions)

2.3 逻辑错误 (Logical Errors)

3. try...catch 语句：捕获运行时错误

3.1 基本语法

3.2 工作原理

3.3 示例

4. finally 块：无论如何都会执行的代码

4.1 作用与用途

4.2 示例：try...catch...finally

5. throw 语句：抛出自定义错误

5.1 创建和抛出错误

5.2 抛出各种类型的值

5.3 示例：抛出 Error 对象

6. JavaScript 内置的 Error 对象

6.1 Error 对象的属性 (name, message, stack)

6.2 常见的 Error 子类型

6.3 示例：查看 Error 属性

7. 自定义错误类型：扩展 Error 对象

7.1 创建自定义错误类

7.2 优势

7.3 示例

8. 异步代码中的错误处理

8.1 Promise 中的错误处理 (.catch())

8.2 async/await 中的错误处理 (try...catch)

8.3 示例

9. 全局错误处理

9.1 window.onerror (针对同步运行时错误)

9.2 window.addEventListener('unhandledrejection', ...) (针对未捕获的 Promise 拒绝)

9.3 示例

10. 错误处理的最佳实践

10.1 不要“吞噬”错误

10.2 提供有意义的错误信息

10.3 区分错误类型

10.4 适当的日志记录

10.5 资源清理 (finally)

10.6 用户友好的错误提示

11. 总结

12. 附录：错误处理常见问题

所有评论(0)

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

weixin_42107409

3. `try...catch` 语句：捕获运行时错误

4. `finally` 块：无论如何都会执行的代码

4.2 示例：`try...catch...finally`

5. `throw` 语句：抛出自定义错误

5.3 示例：抛出 `Error` 对象

6. JavaScript 内置的 `Error` 对象

6.1 `Error` 对象的属性 (`name`, `message`, `stack`)

6.2 常见的 `Error` 子类型

6.3 示例：查看 `Error` 属性

7. 自定义错误类型：扩展 `Error` 对象

8.1 Promise 中的错误处理 (`.catch()`)

8.2 `async/await` 中的错误处理 (`try...catch`)

9.1 `window.onerror` (针对同步运行时错误)

9.2 `window.addEventListener('unhandledrejection', ...)` (针对未捕获的 Promise 拒绝)

10.5 资源清理 (`finally`)