极客教程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 操作符来处理异常。
您可以捕获程序员生成和运行时异常，但无法捕获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 ofvariable a is : " + a );
}
//-->
</script>
</head>
<body>
<p>点击以下链接查看结果:</p>
<form>
<input type = "button" value = "点击我" 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>单击以下内容以查看结果:</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>单击以下内容以查看结果:</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.')" />
您可以将 onerror 与许多 HTML 标签一起使用，以在错误情况下显示适当的信息。