极客教程JavaScript 错误和异常处理
编程中有三种类型的错误：(a) 语法错误，(b) 运行时错误，(c) 逻辑错误。
语法错误
语法错误，也称为 解析错误 ，在传统的编程语言中在编译时发生，在JavaScript中在解释时发生。
例如，以下行导致语法错误，因为缺少一个闭括号。
<script type = "text/javascript">
<!--
window.print(;
//-->
</script>
当JavaScript中发生语法错误时，只有与语法错误处于同一线程的代码受到影响，其他线程中的代码会被执行，假设它们中的代码不依赖于包含错误的代码。
运行时错误
运行时错误，在执行期间发生（编译/解释之后）。
例如，以下行会导致运行时错误，因为在这里语法是正确的，但在运行时它尝试调用一个不存在的方法。
<script type = "text/javascript">
<!--
window.printme();
//-->
</script>
异常也会影响发生异常的线程，允许其他JavaScript线程继续正常执行。
逻辑错误
逻辑错误可能是最难追踪的错误类型。这些错误不是语法或运行时错误的结果。相反，当您在驱动脚本的逻辑中犯了一个错误，并且没有得到您预期的结果时，就会发生这些错误。
您无法捕获这些错误，因为这取决于您的业务需求，您想在程序中放入哪种逻辑。
try…catch…finally 语句
最新版本的JavaScript添加了异常处理功能。JavaScript实现了 try…catch…finally 结构以及 throw 运算符来处理异常。
您可以 catch 程序生成和 runtime 异常，但不能 catch JavaScript语法错误。
以下是 try…catch…finally 块的语法 –
<script type = "text/javascript">
<!--
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 的情况下它的行为如何。
<html>
<head>
<script type = "text/javascript">
<!--
function myFunc() {
var a = 100;
alert("Value of variable a is : " + a );
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>
输出
现在让我们尝试使用 try…catch 来捕捉这个异常，并显示一个用户友好的消息。如果您希望隐藏这个错误消息，也可以抑制它。
<html>
<head>
<script type = "text/javascript">
<!--
function myFunc() {
var a = 100;
try {
alert("Value of variable a is : " + a );
}
catch ( e ) {
alert("Error: " + e.description );
}
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>
输出
您可以使用 finally 块，它将始终在try/catch之后无条件执行。这里是一个示例。
<html>
<head>
<script type = "text/javascript">
<!--
function myFunc() {
var a = 100;
try {
alert("Value of variable a is : " + a );
}
catch ( e ) {
alert("Error: " + e.description );
}
finally {
alert("Finally block will always execute!" );
}
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>
输出
throw语句
您可以使用 throw 语句来引发内置异常或自定义异常。然后可以捕获这些异常，并采取相应的操作。
示例
以下示例演示了如何使用 throw 语句。
<html>
<head>
<script type = "text/javascript">
<!--
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>
输出
可以使用字符串、整数、布尔值或对象在一个函数中触发异常，然后可以在同一个函数中（就像我们上面做的那样）或者在另一个函数中使用 try…catch 块来捕获这个异常。
onerror()方法
onerror 事件处理程序是JavaScript中第一个用于处理错误的功能。每当页面上发生异常时， error 事件都会在窗口对象上被触发。
<html>
<head>
<script type = "text/javascript">
<!--
window.onerror = function () {
alert("An error occurred.");
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>
输出
onerror 事件处理程序提供了三个信息来确定错误的具体性质−
- 错误消息 − 浏览器为给定错误显示的相同消息
-
URL − 出现错误的文件
-
行号 − 导致错误的给定URL中的行号
以下是一个示例，显示如何提取这些信息。
示例
<html>
<head>
<script type = "text/javascript">
<!--
window.onerror = function (msg, url, line) {
alert("Message : " + msg );
alert("url : " + url );
alert("Line number : " + line );
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>
输出
您可以以任何您认为更好的方式显示提取的信息。
您可以使用下面显示的 onerror 方法，在加载图像时出现任何问题时显示错误消息。
<img src="myimage.gif" onerror="alert('An error occurred loading the image.')" />
您可以在许多 HTML 标签中使用 onerror 来在出现错误时显示相应的消息。