JavaScript 异常处理机制与 window.onerror 详解

 
try{//可能抛出异常的代码
}catch(error){//如果发生异常会执行的代码，error为发生的异常类对象
}finally{//无条件执行的代码
} 

 
<script>
try{
var date=new Date();
date.test();//调用date的未定义的test方法;
document.wrire("try块执行结束<br>");
}catch(error){
with(document){
write("出现了异常<br>");
write("异常类型："+error.name+"<br>");
write("异常消息："+error.message);
} 
}finally{
document.write("异常处理完毕！");
} 
</script>

try catch finally 语句说明

try catch finally 是 JavaScript 语言内置的异常处理机制。其语法结构如下所示：

try {
 //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行

}
catch (e) {
 // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
 //e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {

 //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
 }

在 try…catch…finally…语法中，除了 try 是必需的，catch 和 finally 都是可选的，但两者中必须至少存在一个。因此，try…catch…finally…语法主要有以下三种组合形式：

try{ //some code } catch(e){ //somecode } finally{ //some code }

try{ //some code } catch(e){ //somecode }

try{ //some code } finally{ //some code }

如果存在 catch 语句，当 try 中的代码抛出异常时，程序会先执行 catch 中的代码，随后执行 finally 中的代码。若没有 catch 语句，当 try 中的代码抛出异常后，程序会先执行 finally 中的语句，然后将 try 中抛出的异常继续向上层抛出。

无论 try 代码块是如何终止的（无论是因异常、return 语句还是自然执行结束），finally 中的语句始终会被执行。正是基于这一特性，finally 通常用于执行清理工作。如果 try 中的代码是通过 return、continue 或 break 终止的，JavaScript 引擎会在执行完 finally 中的语句后，再执行相应的 try 返回或跳转语句。

throw 语句说明

 throw语句在javascript1.4中已经实现。try的语法很简单，如下

throw expression;

其中的 expression 可以是任意类型的数据，例如 throw "There is a error" 或 throw 1001 都是合法的。但通常建议抛出一个 Error 对象或其子类实例。关于 Error 对象的详细介绍见下文，先来看一段 throw 的示例代码。

function factorial(x) {
 // If the input argument is invalid, throw an exception!
 if (x < 0) throw new Error("x must not be negative");
 // Otherwise, compute a value and return normally
 for(var f = 1; x > 1; f *= x, x--) /* empty */ ;
 return f;
}

Error 对象

Error 对象及其子类在 JavaScript 1.5 版本中得以实现。Error 构造函数主要有两种形式：

new Error( )

new Error(message )

Error 对象包含两个基本属性：name 和 message。其中 message 用于表示异常的详细信息，而 name 指向 Error 对象的构造函数名称。此外，不同的 JavaScript 引擎对 Error 还提供了各自的扩展，例如 Mozilla 提供了 fileName（异常出现的文件名称）和linenumber（异常出现的行号)的扩展，而IE提供了number（错误号）的支持。不过name和message是两个基本的属性，在firefox和ie中都能够支持。Javascript中Error还有几个子类 EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError，各自的具体含义在此不再赘述，读者可参考提供的文档获取更多信息。

Javascript 的异常处理机制和 window.onerror 句柄

当 JavaScript 代码出现错误时，JS 引擎会根据调用栈逐级查找对应的 catch 块。如果未找到相应的 catch 处理器，或者 catch 处理器本身存在错误并抛出了新的异常，最终浏览器将接管错误处理。不同浏览器以不同方式向访问者展示错误信息（例如 IE 在左下角显示黄色三角图案，而 Firefox 则在错误控制台中显示）。在许多场景下，这种默认的错误提示方式不够友好且信息隐蔽，我们能否自定义错误提示方式？答案是肯定的，可以通过 window.onerror 属性实现。

JavaScript 的 window 对象有一个特殊属性 onerror。如果将某个函数赋值给 window.onerror，那么只要该 window 中出现 JavaScript 错误，该函数就会被调用，从而成为该 window 的错误处理句柄。

// Display error messages in a dialog box, but never more than 3
window.onerror = function(msg, url, line) {
 if (onerror.num++ < onerror.max) {
  alert("ERROR: " + msg + "\n" + url + ":" + line);
  return true;
 }
}
onerror.max = 3;
onerror.num = 0;

onerror 句柄接收 3 个参数，分别是错误提示信息、产生错误的 JavaScript 文档 URL 以及错误出现的行号。

onerror 句柄的返回值也非常重要。如果句柄返回 true，表示浏览器无需对该错误做额外处理，即不再显示默认的错误信息；如果返回 false，浏览器仍会提示错误信息。

window.onerror=function(){

alert(”xx”);

return true; //如果注释掉该语句，浏览器中还是会有错误提示，反之则没有。

}

function throwerror(){

throw new Error(”cc”);

}

我们在开发 HTML 过程中难免遇到 JS 异常，通常也不可能依赖客户打开浏览器的错误提示框（如上图）来为我们定位 bug 提供线索。利用 window.onerror 句柄，我们可以将错误提示信息显示出来，客户只需在错误出现时提供相应的截屏，这能很好地帮助开发人员定位和分析 JavaScript 相关错误。

参考资料

Mozilla Javascript1.5核心参考

Javascript犀牛(JavaScript: The Definitive Guide)