JavaScript - 错误与异常处理

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

在 JavaScript 中，错误可能由编程错误、用户输入错误等原因引起。错误会中断代码执行并导致糟糕的用户体验。构建健壮、可靠且用户友好的 JavaScript 应用程序需要有效的错误和异常处理。

什么是错误?

错误是程序执行过程中发生的事件，导致程序无法正常继续运行。错误可能由多种因素引起，例如语法错误、运行时错误和逻辑错误。

语法错误

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

例如，以下代码行由于缺少右括号而导致语法错误。

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

当 JavaScript 中出现语法错误时，只有与语法错误位于同一线程中的代码会受到影响，其他线程中的其余代码仍会执行，前提是这些线程中没有任何代码依赖于包含错误的代码。

运行时错误(异常)

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

例如，以下代码行会导致运行时错误，因为此处的语法正确，但在运行时，它尝试调用一个不存在的方法。

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

异常也会影响发生异常的线程，从而使其他 JavaScript 线程能够继续正常执行。

JavaScript 运行时错误(异常)有很多，其中一些如下:

• ReferenceError - 尝试访问未定义的变量/方法。

• TypeError - 尝试对不兼容的数据类型进行操作。

• RangeError - 值超出允许的范围。

逻辑错误

逻辑错误可能是最难追踪的错误类型。这些错误不是由语法或运行时错误引起的。相反，当您在驱动脚本的逻辑中犯了错误并且没有得到预期的结果时，就会发生这种情况。

例如，当您将任何数值除以 10 时，它会返回未定义的值。

<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>Exception handling using try...catch...finally statements</p>
</body>
</html>

输出

Exception handling using try...catch...finaly statements

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>Click the following to see the result:</p>
   <form>
      <input type = "button" value = "Click Me" onclick = "myFunc();" />
   </form>
</body>
</html>

输出

Click the following to see the result:
Click Me

您可以使用字符串、整数、布尔值或对象在一个函数中引发异常，然后您可以在与上述相同的函数中捕获该异常，也可以在另一个函数中使用 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 = "Click Me" 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>

输出

点击以下按钮查看结果:
Click Me
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 Error 类和 Error 对象

每当代码中发生任何错误时，JavaScript 都会抛出一个 error 类的实例(对象)。error 对象包含有关错误的信息。

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

JavaScript 自定义错误

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

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

在这里，我们创建了"Error"类实例，并将"message"作为参数传递。此外，我们还更改了"name"属性的值。同样，如果您不想将"message"属性作为 Error() 构造函数参数传递，也可以更改其值。

JavaScript 错误对象参考

JavaScript 错误类型或构造函数

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

错误对象属性

Error 对象包含两个属性。

非标准属性和方法

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