JavaScript错误处理


Posted in Javascript onFebruary 03, 2015

一.错误分类

1. 语法错误

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

2. 运行时错误

也称为异常(exception,在编译期/解释器后)。此时,问题并不出在代码的语法上,而是,尝试完成的一个操作,在某些情况下是非法的。eg.

window.openMyFile();

因不存在openMyFile()方法,浏览器会返回一个异常。异常只影响发生的线程,其他JavaScript线程即可继续正常的执行。

二.处理错误

1.       onerror事件处理函数

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

                        <html>

    <head>

           <title>onerror例子</title>

           <script type="text/javascript">

                  window.onerror = function() {

       alert("发生错误!");

}

           </script>

       </head>

       <body onload="fuction1()">

       </body>

</html>

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

<script type="text/javascript">

     window.onerror = function() {

     alert(“发生错误!”);

     return true;

}

</script>

1) 取出错误信息

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

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

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

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

访问方法见如下例子:

<script type="text/javascript">

           window.onerror = function(sMessage, sUrl, sLine) {

alert("发生错误!\n" + sMessage + "\nURL:" + sUrl + "\nLine Number:" + sLine);

return true;

}

</script>

2) 图像载入错误

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

<img src=”amigo.jpg” onerror=”alert(‘载入图片时发生错误')”/>

上例直接在HTML中分配onerror事件处理函数。当然也可以通过脚本来分配事件处理函数,在设置图像的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事件任何的额外信息的参数。

3) 处理语法错误

onerror还能处理语法错误。但有一点必须注意,事件处理函数必须是页面中第一个出现的代码,因为如果语法错误出现在设置事件处理函数之前出现,事件处理函数就没有用了。

注意:语法错误会完全停止代码的执行。

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

2.       try…catch语句

ECMPScript第三版,引入了try…catch语句。Eg.

try {

        window.openFile1();

        alert("成功调用openFile1方法");

} catch (exception) {

        alert("发生异常!");

} finally {

        alert("try..catch测试结束!");

}

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

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

1) 嵌套try…catch语句

用来处理catch子句中的错误问题,让我们来看一个例子,代码如下:

try {

    eval("a ++ b");

} catch(oException) {

    alert("发生错误!");

    try {

      var aError = new Array(1000000000000000000000000000000000000000);

} catch(exception) {

      alert("在catch子句中发生错误!");

}

} finally{

       alert("已完成")

}

2) Error对象

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

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

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

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

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

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

ReferenceError:使用了非法的引用;

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

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

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

3) 判断错误类型

可采取如下两种方法来判断错误类型,第一种根据异常的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("发生其他错误!");

}

}

4) 抛出异常的throw语句

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

eg2.

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

}

}

以上就是本文所述的全部内容了,希望小伙伴们能够喜欢。

Javascript 相关文章推荐
为jQuery增加join方法的实现代码
Nov 28 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
JavaScript中的DSL元编程介绍
Mar 15 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
浅谈Vue数据响应
Nov 05 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
js实现右下角提示框的方法
Feb 03 #Javascript
Node.js中child_process实现多进程
Feb 03 #Javascript
jquery实现增加删除行的方法
Feb 03 #Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 #Javascript
director.js实现前端路由使用实例
Feb 03 #Javascript
js与jquery回车提交的方法
Feb 03 #Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 #Javascript
You might like
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
python实现随机森林random forest的原理及方法
2017/12/21 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
Python 函数返回值的示例代码
2019/03/11 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
椰子猫砂:CatSpot
2018/08/27 全球购物
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
英文导游欢迎词
2014/01/11 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
加薪申请报告范本
2015/05/15 职场文书
导游词之西递宏村
2019/12/10 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
mysql分表之后如何平滑上线详解
2021/11/01 MySQL