JavaScript 错误处理

错误处理是在程序执行过程中检测和处理错误的过程。错误可以是语法错误、运行时错误或逻辑错误。在程序执行期间发生的错误被称为运行时错误或异常。

在 JavaScript 中，由于编程错误、用户输入不正确等原因，可能会出现错误。错误会中断代码的执行并导致糟糕的用户体验。有效的错误和异常处理对于构建健壮、可靠和用户友好的应用程序至关重要。

什么是错误？

错误是在程序执行期间发生的事件，这会阻止程序继续正常运行。错误可能是由多种因素引起的，如语法错误、运行时错误和逻辑错误。

语法错误

语法错误，也称为解析错误，在传统的编程语言中发生在编译时，在 JavaScript 中则发生在解释时。

例如，下面的一行代码由于缺少一个闭合的括号而引起语法错误。

<script>
   window.print();
</script>

当 JavaScript 中发生语法错误时，仅影响与语法错误位于同一线程中的代码，其余线程中的代码如果不受错误影响则将继续执行。

运行时错误（异常）

运行时错误，也称为异常，在执行期间（编译/解释后）发生。

例如，下面的一行代码由于语法正确，但在运行时尝试调用不存在的方法而引起运行时错误。

<script>
   window.printme();
</script>

异常同样只会影响它们发生的线程，允许其他 JavaScript 线程继续正常执行。

有许多 JavaScript 运行时错误（异常），一些如下所示：

ReferenceError - 尝试访问未定义的变量/方法。
TypeError - 对不兼容的数据类型进行操作。
RangeError - 值超出了允许的范围。

逻辑错误

逻辑错误可能是最难追踪的一种错误。这些错误不是语法或运行时错误的结果。相反，它们发生在当你在驱动脚本的逻辑中犯错时，并且没有得到预期的结果。

例如，当你将任何数值除以 10 时，返回 undefined。

<script>
   let num = 10/0;
</script>

什么是错误处理？

每当 JavaScript 代码中出现任何错误时，JavaScript 引擎就会停止整个代码的执行。如果你能以适当的方式处理这些错误，就可以跳过带错误的代码并继续执行其他的 JavaScript 代码。

你可以使用以下机制来处理错误：

try...catch...finally 语句
throw 语句
onerror() 事件处理器属性
自定义错误

try...catch...finally 语句

最新版本的 JavaScript 增加了异常处理能力。JavaScript 实现了 try...catch...finally 构造以及 throw 操作符来处理异常。

你可以捕获程序员生成的异常和运行时异常，但不能捕获 JavaScript 语法错误。

下面是 try...catch...finally 块的语法：

<script>
   try {
      // 运行的代码
      [break;]
   } 
   catch ( e ) {
      // 如果发生异常则运行的代码
      [break;]
   }
   [ finally {
      // 不论是否发生异常都会执行的代码
   }]
</script>

try 块必须后面跟着一个 catch 块或者一个 finally 块（或者两者都有）。当 try 块中发生异常时，异常被放置在 e 中并且执行 catch 块。可选的 finally 块在 try/catch 之后无条件执行。

示例

下面是一个尝试调用一个不存在的函数的例子，这反过来又引发了异常。

让我们试着用 try...catch 捕获这个异常，并显示一个用户友好的信息。如果你想要隐藏这个错误不让用户看到，也可以抑制这条消息。

你可以使用 finally 块，它会在 try/catch 之后无条件执行。

<html>
<head>
<script>               
   try {
      var a = 100;
      alert(myFunc(a));                  
   }
   catch (e) {
      alert(e);
   }
   finally {
      alert("Finally block will always execute!" );
   }
</script>
</head>
<body>
   <p>使用 try...catch...finally 语句处理异常</p>
</body>
</html>

throw 语句

你可以使用 throw 语句来引发内置异常或自定义异常。稍后可以捕获这些异常并采取适当的行动。

示例

下面的例子演示了如何使用 throw 语句。

<html>
<head>
<script>
   function myFunc() {
      var a = 100;
      var b = 0;

      try {
         if (b == 0) {
            throw( "Divide by zero error." ); 
         } else {
            var c = a / b;
         }
      }
      catch (e) {
         alert("Error: " + e );
      }
   }
</script>      
</head>
<body>
   <p>点击以下链接查看结果:</p>
   <form>
      <input type = "button" value = "点击我" onclick = "myFunc();" />
   </form>
</body>
</html>

你可以使用字符串、整数、布尔值或对象来在某个函数中引发异常，然后可以在同一个函数中捕获这个异常，就像我们在上面所做的那样，或者在另一个函数中使用 try...catch 块来捕获它。

onerror 事件处理器属性

onerror 事件处理器是最早在 JavaScript 中提供错误处理特性的功能之一。onerror 是 'window' 对象的事件处理器属性，当网页中的任何元素发生错误时自动触发。当任何错误发生时，你可以调用回调函数来处理错误。

你可以按照下面的语法来使用 onerror 事件处理器属性。

window.onerror = errorhandler_func;

或

<ele onerror="errorhandler_func()"> </ele>

在上述语法中，当任何错误发生时 errorhandler_func() 将被执行。

onerror 事件处理器提供了以下三个信息来识别错误的具体性质：

错误信息 - 浏览器对于给定错误所显示的相同消息
URL - 发生错误的文件
行号 - 给定 URL 中引起错误的行号

示例

在下面的代码中，我们在 <input> 元素上添加了 onclick 事件，并在用户点击输入元素时调用了 myFunc() 函数。myFunc() 函数没有定义，因此它会抛出一个错误。

我们使用了 onerror 事件处理器来捕获错误。在回调函数中，我们打印出错误信息、文件 URL 和错误发生的位置的行号。

<html>
<body>
   <p>点击以下按钮查看结果:</p>
   <form>
      <input type = "button" value = "点击我" onclick = "myFunc();" />
   </form>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      window.onerror = function (msg, url, line) {
         output.innerHTML = "Error: " + msg + "<br>";
         output.innerHTML += "URL: " + url + "<br>";
         output.innerHTML += "Line: " + line + "<br>";
      }
   </script>
</body>
</html>

输出点击以下按钮查看结果: 点击我

Error: Uncaught ReferenceError: myFunc is not defined
URL: file:///C:/Users/Lenovo/Desktop/intex.html
Line: 5

你可以使用如下的 onerror 方法来显示加载图像时可能出现的问题的信息。

<img src="myimage.gif" onerror="alert('加载图像时发生错误。');" />

你可以使用 onerror 与许多 HTML 标签来在出现错误时显示适当的信息。

JavaScript 错误类和错误对象

每当代码中出现任何错误时，JavaScript 都会抛出一个错误类的实例（对象）。错误对象包含有关错误的信息。

然而，Error() 是一种通用构造函数，适用于所有类型的错误，但对于不同类型的错误存在不同的对象。

JavaScript 自定义错误

你也可以使用 Error() 构造函数来抛出带有自定义消息的错误。

const customError = new Error(message);
customError.name = "CustomError";

在这里，我们创建了 Error 类的实例并将 message 作为参数传递。同时，我们也修改了 name 属性的值。类似地，如果你想不在 Error() 构造函数中传递消息，也可以更改 message 属性的值。

JavaScript 错误对象参考

JavaScript 错误类型或构造函数

JavaScript 包含以下类型的错误。你也可以将其用作构造函数来创建特定类型的错误。

错误类型/对象	描述
Error	它是一个通用的错误构造函数。你也可以通过扩展 Error 对象来创建自定义错误。
SyntaxError	当语法中有错误时抛出此类的实例。例如，缺少括号、无效的 JSON 等。
ReferenceError	当试图访问当前作用域中未定义的变量时发生参考错误。
TypeError	当变量类型不合法时，JavaScript 抛出类型错误。
RangeError	当数值输入超出范围时，抛出范围错误。
URIError	当你向 `decodeURI` 或 `encodeURI` 方法传递无效参数时，JavaScript 抛出 URI 错误。
EvalError	已弃用。
AggregateError	用于将多个错误对象汇总成单个错误对象，并允许你处理多个错误对象。

错误对象属性

错误对象包含以下两个属性。

属性	描述
name	用于设置或获取错误名称。
message	用于设置或获取错误消息。

非标准属性和方法

以下是错误对象的非标准属性和方法列表。然而，它们并不是所有浏览器都支持的。因此，你应该避免使用它们。

属性	描述
columnNumber	仅在 Firefox 浏览器中受支持。
description	仅在微软浏览器中受支持。
displayName	仅在 Firefox 浏览器中受支持。
fileName	仅在 Firefox 浏览器中受支持。
lineNumber	仅在 Firefox 浏览器中受支持。
number	仅在微软浏览器中受支持。
stack	仅在 Firefox 浏览器中受支持。
internalError()	仅在 Firefox 浏览器中受支持。
toSource()	它是错误对象的一个非标准方法。