Javascript 简明教程

JavaScript - Errors & Exceptions Handling

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

在 JavaScript 中，错误可能因为编程错误、错误的用户输入等而发生。错误可能中断代码执行并导致用户体验不佳。构建强大、可靠且用户友好的 JavaScript 应用程序需要有效的错误和异常处理。

What is an Error?

错误是程序执行期间发生的事件，该事件阻止了程序正常继续运行。错误可能是由于各种因素引起的，例如 syntax 错误、 runtime 错误和 logical 错误。

Syntax Errors

语法错误又称 parsing errors ，发生在传统编程语言编译时以及 JavaScript 解释时。

例如，以下行会引发语法错误，因为它缺少一个结束括号。

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

当 JavaScript 中发生语法错误时，只有包含在与语法错误相同的线程中的代码会受到影响，而其他线程中的其余代码会继续执行，假定其中的任何内容都不依赖包含该错误的代码。

Runtime Errors (Exceptions)

运行时错误又称 exceptions ，发生在执行期间（编译/解释之后）。

例如，以下行会引发运行时错误，因为这里的语法是正确的，但在运行时它试图调用一个不存在的方法。

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

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

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

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

Logical Errors

逻辑错误可能是最难追踪的错误类型。这些错误不是语法或运行时错误的结果。它们在你编写脚本时，在驱动脚本的逻辑中犯了错误但未获得预期结果时发生。

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

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

What is Error Handling?

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

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

try…catch…finally statements
throw statements
onerror() 事件处理属性
Custom Errors

The try…catch…finally Statement

最新版本的 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 之后无条件执行。

Example

下面是一个示例，其中我们尝试调用一个不存在的函数，它又会引发一个异常。

让我们尝试使用 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

The throw Statement

你可以使用 throw 语句引发内置异常或自定义异常。之后可以捕获这些异常，你可以采取适当的操作。

Example

以下示例演示如何使用 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 块的另一个函数中捕获。

The onerror Event Handler Property

onerror 事件处理程序是促进在 JavaScript 中错误处理的第一个功能。onerror 是“window”对象的事件处理程序属性，当在网页的任何元素上发生任何错误时，它将自动触发。当出现任何错误时，你可以调用回调函数来处理错误。

您可以遵循以下语法来使用 onerror 事件处理程序属性。

window.onerror = errorhandler_func;
OR
<ele onerror="errorhandler_func()"> </ele>

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

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

Error message − 浏览器将针对给定错误显示的相同消息
URL − 发生错误的文件
Line number − 导致该错误的给定 URL 中的行号

Example

在下面的代码中，我们向 <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>

Output

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 标记一起使用，以便在发生错误时显示适当的消息。

The JavaScript Error Class and Error Object

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

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

JavaScript Custom Errors

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

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

此处，我们创建了“Error”类实例并传递了“message”作为参数。此外，我们更改了“name”属性的值。同样，如果你不想将“message”属性作为 Error() 构造函数的参数传递，则可以更改“message”属性的值。

JavaScript Error Object Reference

JavaScript Error Types or Constructor

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

Error Type/Object

Description

Error

它是一个针对错误的通用构造函数。您还可以通过扩展 Error 对象来创建自定义错误。

SyntaxError

如果在语法中发生任何错误，将抛出 SyntaxError 实例。例如，缺少括号，JSON 无效等。

ReferenceError

当您尝试访问未在当前作用域中定义的变量时，就会发生引用错误。

TypeError

当变量的类型无效时，JavaScript 将抛出类型错误。

RangeError

当数字输入超出范围时，它将抛出范围错误。

URIError

在将无效参数传递给 decodeURI 或 encodeURI 方法时，JavaScript 会引发 URIError。

EvalError

Deprecated.

AggregateError

它用于将多个错误对象聚合到一个错误对象中，它允许你处理多个错误对象。

Error Object Properties

Error 对象包含两个属性。

Property

Description

name

它用于设置或获取错误名称。

message

它用于设置或获取错误消息。

Non-Standard Properties and Methods

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

Property

Description

columnNumber

仅在 Firefox 浏览器中受支持。

description

仅在 Microsoft 浏览器中受支持。

displayName

仅在 Firefox 浏览器中受支持。

fileName

仅在 Firefox 浏览器中受支持。

lineNumber

仅在 Firefox 浏览器中受支持。

number

仅在 Microsoft 浏览器中受支持。

stack

仅在 Firefox 浏览器中受支持。

internalError()

仅在 Firefox 浏览器中受支持。

toSource()

这是 Error 对象的一个非标准方法。

Javascript 简明教程

JavaScript - Errors & Exceptions Handling

What is an Error?

Syntax Errors

Runtime Errors (Exceptions)

Logical Errors

What is Error Handling?

The try…​catch…​finally Statement

Example

The throw Statement

Example

The onerror Event Handler Property

Example

Output

The JavaScript Error Class and Error Object

JavaScript Custom Errors

JavaScript Error Object Reference

JavaScript Error Types or Constructor

Error Object Properties

Non-Standard Properties and Methods

The try…catch…finally Statement