JavaScript - 错误与异常处理

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

在 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 {
      // Code to run
      [break;]
   } 
   catch ( e ) {
      // Code to run if an exception occurs
      [break;]
   }
   [ finally {
      // Code that is always executed regardless of 
      // an exception occurring
   }]
</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;
OR
<ele onerror="errorhandler_func()"> </ele>

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

onerror 事件处理程序提供三条信息来识别错误的确切性质：

错误消息 - 浏览器针对给定错误显示的相同消息
URL - 发生错误的文件
行号 - 给定 URL 中导致错误的行号

示例

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

我们使用 'onerror' 事件处理程序来捕获错误。在回调函数中，我们在发生错误的文件中打印错误消息、文件 URL 和行号。

<html>
<body>
   <p> Click the following button to see the result:</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 the following button to see the result:
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('An error occurred loading the image.')" />

您可以将 onerror 与许多 HTML 标签一起使用，以便在发生错误时显示适当的消息。

JavaScript Error 类和 Error 对象

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

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

JavaScript 自定义错误

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

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

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

JavaScript Error 对象参考

JavaScript 错误类型或构造函数

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

错误类型/对象	描述
Error	它是错误的通用构造函数。您还可以通过扩展 Error 对象来创建自定义错误。
SyntaxError	当语法中存在任何错误时，会抛出 SyntaxError 的实例。例如，缺少括号、无效的 JSON 等。
ReferenceError	当您尝试访问当前作用域中未定义的变量时，就会发生引用错误。
TypeError	当变量的类型无效时，JavaScript 会抛出类型错误。
RangeError	当数值输入超出范围时，它会抛出范围错误。
URIError	当您向 decodeURI 或 encodeURI 方法传递无效参数时，JavaScript 会抛出 URIError。
EvalError	已弃用。
AggregateError	它用于将多个错误对象聚合到单个错误对象中，并且允许您处理多个错误对象。

Error 对象属性

Error 对象包含两个属性。

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

非标准属性和方法

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

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

打印页面