JavaScript - 错误和异常处理

上一页
下一页

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

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

什么是错误？

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

语法错误

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

例如，以下行会导致语法错误，因为它缺少右括号。


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

当 JavaScript 中发生语法错误时，只有与语法错误位于同一线程中的代码会受到影响，其他线程中的其余代码将被执行，前提是其中的任何内容都不依赖于包含该错误的代码。

运行时错误 （异常）

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

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


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

异常还会影响发生异常的线程，从而允许其他 JavaScript 线程继续正常执行。

JavaScript 运行时错误（异常）很多，有些如下 -

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

逻辑错误

Logic 错误可能是最难跟踪的错误类型。这些错误不是语法或运行时错误的结果。相反，当您在驱动脚本的逻辑中犯了错误并且没有获得预期的结果时，就会发生它们。

例如，当您将任何数值除以 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...捕获并显示用户友好的消息。如果要对用户隐藏此错误，也可以禁止显示此消息。

你可以使用 finally block，它将始终在 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' 对象的事件处理程序属性，当网页的任何元素发生任何错误时，它会自动触发。当出现错误时，你可以调用 callback 函数来处理错误。

您可以按照以下语法使用 onerror 事件处理程序属性。


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

在上面的语法中，当任何错误发生时，都会执行 errorhandler_func（）。

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

  • Error message - 浏览器针对给定错误显示的相同消息
  • URL - 发生错误的文件
  • Line number - 给定 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 类的实例（对象）。error 对象包含有关错误的信息。

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

JavaScript 自定义错误

您还可以使用 Error（） 构造函数在自定义消息中引发错误。


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

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

JavaScript 错误对象参考

JavaScript 错误类型或构造函数

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

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

错误对象属性

Error 对象包含两个属性。

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

非标准属性和方法

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

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