笙亿网络策划

JavaScript 怎么处理错误？异常捕获和 try-catch 用法详解？

约 13 分钟读完 0 阅
文章导读
Previous Quiz Next JavaScript 中的错误处理是一个检测并处理程序执行过程中发生错误的过程。错误可以是syntax错误、runtime错误或logical错误。程序执行过程中发生的错误被称为runtime error或exception。
📋 目录
  1. 壹 什么是错误？
  2. 贰 什么是错误处理？
  3. 叁 try...catch...finally 语句
  4. 肆 throw 语句
  5. 伍 onerror 事件处理程序属性
  6. 陆 JavaScript 错误对象参考
A A

JavaScript - 错误与异常处理

Previous
Quiz
Next

JavaScript 中的错误处理是一个检测并处理程序执行过程中发生错误的过程。错误可以是syntax错误、runtime错误或logical错误。程序执行过程中发生的错误被称为runtime error或exception。

在 JavaScript 中，错误可能由于编程错误、不正确的用户输入等原因发生。错误会中断代码执行并导致糟糕的用户体验。有效的错误与异常处理对于构建健壮、可靠且用户友好的 JavaScript 应用程序是必需的。

什么是错误？

错误是在程序执行过程中发生的事件，它阻止程序正常继续执行。错误可能由多种因素引起，例如syntax错误、runtime错误和logical错误。

Syntax Errors

Syntax errors，也称为parsing errors，在传统编程语言中发生在编译时，在 JavaScript 中发生在解释时。

例如，以下代码行会引发syntax error，因为缺少闭合括号。

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

当 JavaScript 中发生syntax error时，只有包含该错误的同一线程中的代码会受到影响，其他线程中的其余代码会继续执行，前提是它们不依赖于包含错误的代码。

Runtime Errors (Exceptions)

Runtime errors，也称为exceptions，发生在执行期间（编译/解释之后）。

例如，以下代码行会引发runtime error，因为语法正确，但在运行时试图调用一个不存在的方法。

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

Exceptions也会影响其发生的线程，允许其他 JavaScript 线程继续正常执行。

JavaScript 有许多runtime errors（exceptions），其中一些如下 −

  • ReferenceError − 试图访问未定义的变量/方法。

  • TypeError − 对不兼容的数据类型执行操作。

  • RangeError − 值超出允许范围。

Logical Errors

Logic errors可能是最难追踪的错误类型。这些错误不是syntax或runtime error的结果。相反，它们发生在驱动脚本的逻辑出现错误时，且未获得预期结果。

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

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

什么是错误处理？

每当 JavaScript 代码中发生任何错误时，JavaScript 引擎会停止整个代码的执行。如果您以正确的方式处理此类错误，就可以跳过有错误的代码并继续执行其他 JavaScript 代码。

您可以使用以下机制来处理错误。

  • try...catch...finally 语句

  • throw 语句

  • onerror() 事件处理程序属性

  • Custom Errors

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>

输出

使用 try...catch...finally 语句进行异常处理

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 = "Click Me" onclick = "myFunc();" />
   </form>
</body>
</html>

输出

点击以下内容查看结果：
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 事件，当用户点击 input 元素时调用 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 class 的一个实例（对象）。该错误对象包含有关错误的信息。

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

JavaScript 自定义错误

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

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

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

JavaScript 错误对象参考

JavaScript 错误类型或构造函数

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

Error Type/Object 描述
Error 它是错误的基本构造函数。您也可以通过扩展 Error 对象来创建自定义错误。
SyntaxError 当语法中存在任何错误时，会抛出 SyntaxError 实例。例如，缺少括号、无效 JSON 等。
ReferenceError 当您尝试访问当前作用域中未定义的变量时，会发生 reference error。
TypeError 当变量的类型无效时，JavaScript 会抛出 type error。
RangeError 当数值输入超出范围时，会抛出 range error。
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 对象的一个非标准方法。