JavaScript高级程序设计 阅读笔记(二十) js错误处理


Posted in Javascript onAugust 14, 2012

一、错误分类

1、语法错误:也称解析错误,发生在传统语言的编译时,在JavaScript中发生在解释时。这些错误是由代码中的意外字符直接引起的,然后就不能直接编译/解释。发生语法错误时,就不能继续执行代码。在JavaScript中,只有在同一个线程中的代码会受语法错误的影响。在其他线程中的代码和其他外部引用的文件中的代码,如果不依赖于包含错误的代码,则可以继续执行。

2、运行时错误:也称为异常(exception,在编译期/解释器后)。此时,问题并不出在代码的语法上,而是,尝试完成的一个操作,在某些情况下是非法的。异常只影响发生的线程,其他JavaScript线程即可继续正常的执行。

二、错误处理

JavaScript提供了两种处理错误的方式:BOM中的onerror事件处理函数方式和ECMAScript中的try...catch方式。

1、onerror事件处理函数

它是第一个用来协助JavaScript处理错误的机制。页面上出现异常时,error事件便在window对象上触发。例如:

<html> 
<head> 
<title>onerror Example</title> 
<script type="text/javascript"> 
window.onerror = function() { 
alert("发生错误!"); 
} 
</script> 
</head> 
<body onload="nonExistentFunction()"> 
</body> 
</html>

在上述代码中,在页面载入时尝试调用不存在的函数,此时会引发一个异常。弹出“发生错误”的错误信息。但是,浏览器的错误信息也显示出来了,如何在浏览器上隐藏它呢,只需onerror方法返回一个true即可。

<script type="text/javascript"> 
window.onerror = function() { 
alert(“发生错误!”); 
return true; 
} 
</script>

1.1 取出错误信息

onerror处理函数提供了三种信息来确定错误确切的性质:

i) 错误信息——对于给定错误,浏览器会显示同样的信息

ii) URL——在哪个文件中发生了错误

iii) 行号——给定URL中发生错误的行号。

window.onerror = function(sMessage, sUrl, iLine) { 
alert("发生错误!\n" + sMessage + "\nURL:" + sUrl + "\nLine Number:" + iLine); 
return true; 
}

1.2 图像载入错误

window对象并非唯一支持onerror事件处理函数的对象,它对图像对象也提供支持。当一个图像由于文件不存在等原因未能成功载入时,error事件便在这个图像上触发。例如:

<img src="noexist.gif" onerror="alert('载入图片时发生错误')"/>

上例直接在HTML中分配onerror事件处理函数。因为noexist.gif不存在,所以会弹出警告框提示用户。当然也可以通过脚本来分配事件处理函数,在设置图像的src特性前,必须等待页面完全载入,例如:
<html> 
<head> 
<title>Image错误测试</title> 
<script type="text/javascript"> 
function handleLoad() { 
document.images[0].onerror = function() { 
alert("载入图片时发生错误!"); 
}; 
document.images[0].src = "amigo.jpg"; 
} 
</script> 
</head> 
<body onload="handleLoad()"> 
<img/> 
<body> 
</html>

注意:与window对象的onerror事件处理函数不同,image的onerror事件没有任何关于额外信息的参数。

1.3处理语法错误

onerror事件处理函数不仅可以处理异常,它还能处理语法错误,也只有它才能处理。

首先,事件处理函数必须是页面中第一个出现的代码,因为如果语法错误出现在设置事件处理函数之前出现,事件处理函数就没有用了。记住,语法错误会完全停止代码的执行。例如:

<html> 
<head> 
<title>onError Example</title> 
<script type="text/javascript"> 
alert("Syntax error."; 
window.onerror = function (sMessage, sUrl, iLine){ 
alert("An error occurrred:\n" + sMessage + "\nURL:" + sUrl + "\nLine Number:" + iLine ); 
return true; 
} 
</script> 
</head> 
<body onload="nonExistentFunction()"> 
</body> 
</html>

因为突出显示的那一行代码(里面有错误语法)在分配onerror事件处理函数之前就出现了,所以浏览器直接报告这个错误。在错误之后的代码就不再被解释(因为这个线程已经退出了),所以 load 事件解发时调用 nonExistentFunction() ,浏览器也会报这个错误。书中说如果重写这个页面,将 onerror 事件处理函数的分配放在语法错误之前,那么会出现两个警告框:一个显示语法错误,另一个显示异常。但我测试的结果还是一样的报两个错误,并不显示onerror事件中的信息。

使用onerror事件处理函数的主要的问题是,它是BOM的一部分,所以,没有任何标准能控制它的行为。因此,不同的浏览器使用这个事件处理错误的方式有明显的不同,eg,在IE中发生error事件时,正常的代码会继续执行,所有的变量和数据都保留下来,并可通过onerror事件处理函数访问。在Mozilla中,正常的代码执行都会结束,同时所有的错误发生之前的变量和数据都被销毁。

2、try...catch方式

ECMPScript第三版,引入了try…catch语句。基本语法如下:

try{ 
//code 
[break;] 
} catch ([exception]) { 
//code 
[break;] 
} [finally{ 
//code 
}]

例如:
try { 
window.openFile1(); 
alert("成功调用openFile1方法"); 
} catch (exception) { 
alert("发生异常!"); 
} finally { 
alert("try..catch测试结束!"); 
}

与Java不同,ECMAScript标准在try…catch语句中只能有一个catch语句,因为JavaScript是弱类型的语言,没办法指明catch子句中异常的特定类型。不管错误是什么类型,都由同一个catch语句处理。Mozilla对其进行了扩展,可加多个catch语句,但因为只有 Mozilla 可以使用,因此不推荐使用。

finally用于包含无论是否有异常发生都要执行的代码,这对关闭打开的链接和释放资源很有用。

2.1 嵌套 try...catch 语句

在 try...catch 语句中的 catch 子句中,也会发生错误。此时,就可以使用嵌套的 try...catch 语句。示例:

try { 
eval("a ++ b"); 
} catch(oException) { 
alert("发生错误!"); 
try { 
var aError = new Array(1000000000000000000000000000000000000000); 
} catch(exception) { 
alert("在catch子句中发生错误!"); 
} 
} finally{ 
alert("已完成") 
}

2.2 Error对象

发生错误时,JavaScript有个Error基类用于抛出。它有两个特性:

i)name——表示错误类型的字符串

ii)message——实际的错误信息

Error对象的name对应于它的类,可以是如下值之一:

EvalError:错误发生在eval()函数中;

RangeError:数字值超出JavaScript可表示的范围;

ReferenceError:使用了非法的引用;

SyntaxError:在eval()函数调用中发生了语法错误,其他的愈发错误由浏览器报告,无法通过try…catch处理;

TypeError:变量的类型不是预期所需的;

URIError:在encodeURI或decodeURI函数发生了错误。

2.3 判断错误类型

尽管每个 try...catch 语句中只能有一个catch子句,但判断抛出的错误类型方法主要有两种。第一种使用 Error 对象的 name 特性:

try { 
eval("a ++ b"); 
} catch(oException) { 
if (oException.name = "SyntaxError") { 
alert("发生SyntaxError!"); 
} else { 
alert("发生其他错误!"); 
} 
}

第二种使用 instanceof 操作符,并使用不同错误的类名:
try { 
eval("a ++ b"); 
} catch(oException) { 
if (oException instanceof SyntaxError) { 
alert("发生SyntaxError!"); 
} else { 
alert("发生其他错误!"); 
} 
}

2.4 抛出异常

在ECMAScript第三版引入,用于有目的的抛出异常,抛出的错误对象可为字符串、数字、布尔值或实际的对象,也可以抛出Error对象(其构造函数只有一个函数,即错误信息)。如:

throw new Error("错误产生!");

开发人员抛出的错误和由浏览器自身抛出的错误都在 try...catch 中捕获。例如:
function addTwoNumber(a, b) { 
if (arguments.length < 2) { 
throw new Error("需要传入两个数字!"); 
} 
} 
try { 
result = addTwoNumber(90); 
} catch(oException) { 
if (oException instanceof SyntaxError) { 
alert("SyntaxError:" + oException.message); 
} else if (oException instanceof Error){ 
alert(oException.message); 
} 
}

三、调试技巧

现在的浏览器大多都自带了调试工具,大多数情况下已经够用了,另外IE下还可以用IETest,FireFox下还可以用FireBug。

作者:Artwl
出处:http://artwl.cnblogs.com

Javascript 相关文章推荐
javascript 的Document属性和方法集合
Jan 25 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
js+canvas实现五子棋小游戏
Aug 02 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 #Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 #Javascript
jQuery 1.8 Release版本发布了
Aug 14 #Javascript
You might like
快速配置PHPMyAdmin方法
2008/06/05 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
php创建图像具体步骤
2017/03/13 PHP
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
tornado捕获和处理404错误的方法
2014/02/26 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
中层干部竞聘演讲稿
2014/05/15 职场文书
体育专业自荐书
2014/05/29 职场文书
新员工入职欢迎词
2015/01/23 职场文书
撤诉书怎么写
2015/05/19 职场文书
金砖之国观后感
2015/06/11 职场文书
反邪教教育心得体会
2016/01/15 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python
Java的Object类的九种方法
2022/04/13 Java/Android