JavaScript异常处理详解：try-catch、throw与onerror用法

JavaScript中的三种错误类型

编程错误主要分为三种类型：(1)语法错误、(2)运行时错误以及(3)逻辑错误。

语法错误，也被称为解析错误。在传统的编译型语言中，这类错误在编译阶段进行检查；而在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结构以及抛出操作来处理异常。

你可以捕获程序员生成的异常和运行时异常，但不能捕获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块将被执行。try/catch语句后的可选finally块将无条件执行。

示例：


<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>

现在，让我们尝试使用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语句抛出异常

可以使用finally块，它将在try/catch语句后无条件执行。下面是一个例子：

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事件处理程序

您可以使用字符串、整数、布尔值或对象在函数中抛出一个异常，那么可以在相同的函数中捕捉例外，如我们在上面所做的，或者在其他函数中使用try...catch块。


<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()语法

onerror事件处理程序是JavaScript处理错误的第一个便捷特性。每当页面上出现异常时，都会触发错误事件到window对象。例如：
onerror事件处理程序提供了三条信息，以找出错误的确切性质：
错误消息：浏览器将显示给定的错误相同的消息。

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>

行号：在导致错误的URL给出的行号。

这里是例子来说明如何提取此信息。


<img src="myimage.gif"
  onerror="alert('An error occurred loading the image.')" />

可以显示在任何方式，你觉得这是更好的提取信息。

详解JavaScript中的异常处理方法

JavaScript中的三种错误类型

try...catch...finally语句详解

使用throw语句抛出异常

onerror事件处理程序

实用工具推荐