javascript 异常处理使用总结


Posted in Javascript onJune 21, 2009

JavaScript中的异常可以用try..catch..finally语句来处理,也可以手动的来抛出异常。
1.使用try..catch..finally语句来处理异常
js代码在执行过程中如果出现异常,会手动创建一个异常类对象,该异常类对象将被提交给浏览器,这个过程称为“抛出异常”。当浏览器接收到一场对象时,会寻找能处理这一异常的代码并把当前异常对象提交给其处理,这一过程被称为“捕获异常”。try..catch..finally语句的基本语法格式为:

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

在上面的语句中,catch语句紧跟在try语句的后面,finally语句紧跟在catch的后面,这是一个完整的异常处理语句的写法。其实,catch语句和finally语句都可以省略的,但是二者至少要保留其中之一和try语句结合使用。
在try块中的语句并不一定是要抛出异常的语句,任何JavaScript语句都可以使用异常处理语句来处理,但这样做没有必要。当try块中某一行的代码抛出了异常,则该行下方的代码将不会被执行,转而直接执行catch块的代码。
在catch块中,catch语句后面括号中的error表示捕获到的异常对象实例,该实例包含异常的详细信息,可以根据这些信息作出适当的处理。如果catch语句后还有finally语句,则继续执行finally块中的语句。
finally块中的语句是始终被执行的语句,块中的语句通常做一些最后的清理工作。如果在执行finally块之前,遇到return语句、continue语句或break语句等转移流程的语句时,那么在执行这些语句前finally块中的代码也要被执行。
如果在一个异常处理语句中,只包含try..finally语句而没有补货异常的catch语句则执行try块中的语句后会直接执行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>

结果:
出现了异常
异常类型:TypeError
异常消息:对象不支持此属性或方法异常处理完毕!
2.手动抛出异常
除了发生运行时浏览器会抛出异常,开发人员也可以自己动手抛出异常。手动异常抛出的语句是throw,其基本语法格式为:
throw expression;

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的这种特性,通常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对象的子类。关于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对象和它的子类是在javascript1.5中实现的。Error的构造函数有两种

new Error( )
new Error(message )

Error有两个基本的属性name和message。message用来表示异常的详细信息。而name指的的是Error对象的构造函数。此外,不同的js引擎对Error还各自提供了一些扩展,例如mozilla提供了fileName(异常出现的文件名称)和linenumber(异常出现的行号)的扩展,而IE提供了number(错误号)的支持。不过name和message是两个基本的属性,在firefox和ie中都能够支持。Javascript中Error还有几个子类EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError,各自的意思就不在这里详细描述了,读者可以在我提供的参考文档中找到相应的参考。

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

当javascript代码中出现错误的时候,js引擎就会根据js的调用栈逐级寻找对应的catch,如果没有找到相应的catch handler或catch handler本身又有error或者又抛出新的error,最后就会把这个error的处理交给浏览器,浏览器会用各自不同的方式(IE以黄色三角图案显示在左下角,而firefix会显示在错误控制台中)显示错误信息给访问者。很多场景下,我们会觉得这种错误提示方式不够友好,而且提示信息很隐蔽,那么我们机会自定义这种错误提示的方式吗?答案是有,就是window.onerror属性。

javascript的window对象有一个特别的属性onerror,如果你将某个function赋值给window的onerror属性,那么但凡这个window中有javascript错误出现,该function都会被调用,也就是说这个function会成为这个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的document ulr,错误出现的行号。

onerroe句柄的返回值也很重要,如果句柄返回true,表示浏览器无需在对该错误做额外的处理,也就是说浏览器不需要再显示错误信息。而如果返回的是false,浏览器还是会提示错误信息。

window.onerror=function(){

alert(”xx”);

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

}

function throwerror(){

throw new Error(”cc”);

}

javascript 异常处理使用总结

我们在开发HTML的过程中避免不了一些Js的异常,通常我们也不可能依赖客户打开浏览器的错误提示框(如上图)来为我们定位bug提供线索,而利用window.onerror句柄我们就可以讲错误提示信息显示出来,客户只要在错误出现的时候,提供相应的截屏就可以了,这点可以很好的帮助开发人员定位,分析javascript相关的错误。

参考资料

Mozilla Javascript1.5核心参考

Javascript犀牛(JavaScript: The Definitive Guide)

Javascript 相关文章推荐
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
javascript 一些用法小结
Sep 11 Javascript
javascript iframe编程相关代码
Dec 28 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
js实现聊天对话框
Feb 08 Javascript
js 匿名调用实现代码
Jun 19 #Javascript
JS 拼图游戏 面向对象,注释完整。
Jun 18 #Javascript
JS 分号引起的一段调试问题
Jun 18 #Javascript
javascript 一段左右两边随屏滚动的代码
Jun 18 #Javascript
Input 特殊事件onpopertychange和oninput
Jun 17 #Javascript
jquery 上下滚动广告
Jun 17 #Javascript
jQuery Ajax文件上传(php)
Jun 16 #Javascript
You might like
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
分享几个超级震憾的图片特效
2012/01/08 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
2014/12/31 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
国际政治个人自荐信范文
2013/11/26 职场文书
学校七一活动方案
2014/01/19 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
五年级下册复习计划
2015/01/19 职场文书
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android