简介JavaScript错误处理机制


Posted in Javascript onAugust 04, 2020

1、 try-catch语句

ECMA-262第3版引入了try-catch语句,作为JavaScript中处理异常的一种标准方式。

语法:

try{
 // 可能会导致错误的代码
}catch (error){
 // 在错误发生时怎么处理
}

也就是说,我们应该把所有可能会抛出错误的代码都放在try语句块中,而把那些用于错误处理代码放在catch块中。

try-catch语句的逻辑是:如果try块中的任何代码发生了错误,就会立即退出代码执行过程,然后接着执行catch块。此时,catch块会接收到一个包含错误信息的对象。

注意:即使你不想使用这个错误对象,也要给它起个名字。

虽然这个对象在不同浏览器中可能包含不同信息,但是都有一个保存着错误消息的message属性,还有一个保存错误类型的name属性(并不是所有浏览器都有)

try{
 
}catch (error){
 console.log(error.message);
}

在跨浏览器编程时,最好还是只使用message属性。

1.1 finally子句

当使用finally子句时,其代码无论如何都会执行,也就是说,不管是正常执行还是出错了,finally子句都会执行。甚至return语句,也不会阻止finally子句的执行。
看下面的例子:

function test(){
	try{
   console.log('a');
	 return 2;
	}catch(error){
   console.log('b');
	}finally{
   console.log('c');
	}
}
console.log(test()); 
//结果
a
c
2

从运行结果,我们可以看到,return语句并没有阻止finally子句的执行,而且是在finally子句执行后才会返回return语句的值。

2、错误类型

执行代码期间可能会发生的错误有多种类型。每种错误都有对应的错误类型,而当错误发生时,会抛出相应类型的错误对象。
ECMA-262定义了下列7中错误类型:

Error
EvalError
RangeError
ReferenceError
SyntaxError
TypeError
URIError

Error是基类型,其他错误类型都继承自该类型。所有错误类型共享了一组相同的属性。

(1)EvalError类型

EvalError类型的错误会在使用eval()函数而发生异常时抛出。简单的说,如果没有把eval()当成函数调用,就会抛出异常。比如:

new eval() // 抛出EvalError
eval = foo; // 抛出EvalError

注意:在ES5中已经不在出现了。

(2)RangeError类型

RangeError类型的错误会在数值超出相应范围时触发。主要有几种情况,一是数组长度为负数,二是Number对象的方法参数超出范围,以及函数堆栈超过最大值。

var item = new Array(-20); // 抛出RangeError异常

(3)ReferenceError类型

在找不到对象的情况下,会发生ReferenceError。通常,在访问不存在的变量时,就会发生这种错误。

var obj = x; // 在x并未声明的情况下抛出ReferenceError

(4)SyntaxError类型

SyntaxError是解析代码时发生的语法错误。

var 1a; // 变量名错误,抛出SyntaxError

(5)TypeError类型

在变量中保存着意外的类型,或在访问不存在的方法时,都会导致这种错误。

var o = new 10; //抛出TypeError

(6)URIError类型

URIError是URI相关函数的参数不正确时抛出的错误,主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()这六个函数。

2.2 抛出错误

与try-catch语句相配的还有一个throw操作符,用于随时抛出自定义错误。抛出错误时,必须要给throw操作符指定一个值,这个值可以是任何类型。

throw 1;
throw 'tg';
throw true;
throw {name: 'tg'};

2.3 Error对象

所有抛出的错误都是Error构造函数的实例。Error构造函数接受一个参数,表示错误提示,可以从实例的message属性读到这个参数。

在JavaScript中,Error对象的实例必须有message属性,表示出错时的提示信息。在大多数JavaScript引擎中,Error实例还可能有name和stack属性,分别表示错误的名称和错误的堆栈。

var err = new Error('出错了');
err.message; // "出错了"

2.4 自定义错误

我们还可以创建自定义错误消息,最常用的错误类型是Error、RangeError、ReferenceError和TypeError。

throw new Error('报错了');
throw new RangeError('数组长度错误');

另外,利用原型链还可以通过继承Error来创建自定义错误类型:

function CustomError(message){
 this.name = 'CustomError';
 this.message = message;
}

CustomError.prototype = new Error();
throw new CustomError('我的错误信息');

3、错误(error)事件

任何没有通过try-catch处理的错误都会触发window对象的error事件。

onerror事件处理程序不会创建event对象,但它接受三个参数:错误消息、错误所在的URL和行号。

window.onerror = function(message, url, line){

};

当你在事件处理程序中返回false,可以阻止浏览器报告错误的默认行为

window.onerror = function(message, url, line){
 return false;
};

4、调试技术

4.1 alert方法

在以前,大多数都是在要调试的代码中插入alert()函数,看是否执行到这一步来判断哪里出错,这种方式比较麻烦,因为alert()会阻止后续代码的执行(除非你关闭了alert弹窗),而且调试后还要清理。

4.2 console

随着浏览器的不断改善,现在的浏览器都有JavaScript控制台,我们可以向这些控制台输出消息,比如最常用的console对象,它的常用方法如下:

  • error(message):将错误消息记录到控制台
  • info(message):将信息性消息记录到控制台
  • log(message):将一般消息记录到控制台
  • warn(message):将警告消息记录到控制台
function test(){
 console.log('结果:' + (1 + 2));
}

4.3 throw

使用throw抛出错误。

以上就是简介JavaScript错误处理机制的详细内容,更多关于JavaScript错误处理机制的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 #Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 #Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 #Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 #Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 #Javascript
如何在Vue.JS中使用图标组件
Aug 04 #Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 #Javascript
You might like
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
php使用websocket示例详解
2014/03/12 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
解析Python中的__getitem__专有方法
2016/06/27 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
python中比较两个列表的实例方法
2019/07/04 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
python yield和Generator函数用法详解
2020/02/10 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
英国在线花园中心:You Garden
2018/06/03 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
自我鉴定范文300字
2013/10/01 职场文书
运动会广播稿200米
2014/01/27 职场文书
效能风暴心得体会
2014/09/04 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
团员自我评价范文
2015/03/10 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
Django框架模板用法详解
2022/06/10 Python