JS 错误处理实践（下）：巧用内置 Error 对象和事件处理

在上一篇关于 JavaScript 错误处理的文章中，我们重点介绍了通过 try...catch 语句块来捕捉和处理异常。在这一篇中，我们将深入探讨 JavaScript 内置的 Error 对象及其在错误处理中的强大功能，并介绍如何通过事件处理机制来优雅地处理未捕获的错误。

JavaScript 内置的 Error 对象

JavaScript 的 Error 对象是一个标准的内置对象，用来表示错误或异常。当 JavaScript 代码遇到意外情况时，它通常会抛出一个 Error 对象，其中包含有关错误的详细信息。

Error 对象具有以下属性：

• name: 错误的名称，如 "TypeError"、"ReferenceError" 等。
• message: 错误的性消息。
• stack: 一个包含调用栈的字符串，显示了错误发生时的代码位置。

捕捉和处理 Error 对象

我们可以使用 try...catch 语句块来捕捉和处理 Error 对象。当 try 块中的代码抛出 Error 对象时，catch 块中的代码就会执行。

例如，以下代码尝试访问一个不存在的属性：

try {
  console.log(undefinedProperty);
} catch (error) {
  console.log(`Error: ${error.name}: ${error.message}`);
}

当上述代码执行时，它将抛出一个 ReferenceError 异常，其中 name 为 "ReferenceError"，message 为 "undefinedProperty is not defined"。catch 块中的代码会捕获这个异常，并将错误信息输出到控制台。

自行抛出 Error 对象

除了捕捉 JavaScript 引发的异常之外，我们还可以自己抛出 Error 对象来显式地处理错误情况。

例如，以下代码在某一条件不满足时抛出一个自定义错误：

const validateInput = (input) => {
  if (input.length === 0) {
    throw new Error("Input cannot be empty.");
  }
  // 其他代码...
};

当我们调用 validateInput 函数并传递一个空字符串作为参数时，它会抛出一个 Error 对象，其中 name 为 "Error"，message 为 "Input cannot be empty."。我们可以使用 try...catch 语句块来处理这个错误，并在用户界面上显示错误消息。

事件处理中的错误处理

除了 try...catch 语句块之外，JavaScript 还提供了事件处理机制来处理未捕获的错误。

JavaScript 中有一个全局的 error 事件，当发生未捕获的错误时，浏览器会触发该事件。我们可以为 error 事件添加一个事件处理函数，在其中对错误进行处理。

例如，以下代码为 error 事件添加了一个事件处理函数，并在控制台中输出错误信息：

window.addEventListener("error", (event) => {
  console.log(`Error: ${event.message}`);
});

当发生未捕获的错误时，error 事件处理函数就会执行，并将错误信息输出到控制台。这有助于我们调试和跟踪未捕获的错误，即使它们没有在 try...catch 块中显式处理。

结语

JavaScript 内置的 Error 对象和事件处理机制提供了强大的工具，可以帮助我们全面地处理错误情况。通过理解这些概念并将其应用到我们的代码中，我们可以编写出更加健壮和可靠的 JavaScript 应用程序。