前言

最近有些时间了,今天看了看博客的后台记录,好多都没有写博客呢,争取尽快把以前的补上,javascrit中的异常在前端大家用的好像不是很多,其实javascript的异常和大多数的后端语言差不大,今天和大家简单的介绍介绍,这里不介绍啥是运行时异常......,这是说些javascript常用的异常和异常处理。

异常

使用关键字Error我们可以像new一个普通的对象一样创建一个异常的实例,

var err = new Error("这是一个异常");

异常的属性如下:

description: 错误描述

fileName: 出错的文件名

lineNumber: 出错的行数

message: 错误信息

name: 错误类型

number: 错误代码

stack: 像Java中的Stack Trace一样的错误堆栈信息

上面各个浏览器之间会有不兼容的现象,大家了解基本的就行。

子类:

Error是所有异常的父类了,他有许多的子类,像

TypeError    当遇到一个意外的类型时引发该异常对象,如未声明的变量。

SyntaxError   在解析js代码时,其中的语法错误引发该异常对象。

ReferenceError   使用一个无效的引用时引发该异常对象。

EvalError    在错误的调用eval函数时引发该异常对象。

RangeError    在一个数字型变量的值超出了其范围时引发该异常对象。

URIError   在错误的使用encodeURI或者decodeURI函数时引发该异常对象。

等等。     

捕获

try catch

其实捕获异常是我们最关注的问题,我们不会没事自己new出来一个异常吧,那不是没事干了吗,我们了解异常是为了更好的处理它们。和其它的后端语言一样,javascript使用try{}catch(){}捕获异常,

try{
//可能出现异常的代码部分
}catch(e){
//处理异常
}finally{
//任何时候都会执行
}

弄个实际的例子

try{
unde //未定义的变量
}catch(e){
console.dir(e);
}finally{
alert("finally");
}

这就是捕获代码本身出现的错误,我们可以认为的抛出一些异常,这就是throw关键字的作用了,看两个例子

try{
throw new Error("抛出一个异常"); //抛一个异常
}catch(e){
alert(e.message); //catch到异常
}

再看一个

try{
throw("抛出一个异常"); //抛一个字符串
}catch(e){
alert(e); //catch到这个字符串
}

throw可以抛出任何的对象,在catch中可以捕获到。

onerror

另外一种捕获javascript的异常就是window.onerror = function(){},就是和普通的事件一样,监听异常事件,他有一些参数,各个浏览器可能会不一致,看看具体的用法

window.onerror = function(message, URI, lineNumber,columnNumber,errorObj) {
console.log("错误信息:" , nessage);
console.log("出错文件:" , URI);
console.log("出错行号:" , lineNumber);
console.log("出错列号:" , columnNumber);
console.dir(errorObj);
}
throw new Error("我的异常');

结果是这样的:

虽然我们捕获了出现的异常,但是浏览器还是默认会把错误信息显示出来,我们在window.onerror = function(){} 加个返回值return true就不会显示默认的错误信息了,这样

window.onerror = function(message, URI, lineNumber,columnNumber,errorObj) {
console.log("错误信息:" , nessage);
console.log("出错文件:" , URI);
console.log("出错行号:" , lineNumber);
console.log("出错列号:" , columnNumber);
console.dir(errorObj);
return true;
}
throw new Error("我的异常');

这样就不显示浏览器默认的错误信息了。利用这个我们就可以忽略所有的错误了,可以搞下恶作剧啥的,就这样

window.onerror = function(){
return true;
}

其实如果我们不重新onerror这个方法,原来就是空的,所以不写的话我们得不到一些异常信息。

异步中的异常

首先我们看一下简单的异步函数,最简单的就是setTimeout了

setTimeout(function(){console.log(1)},1000);

That's all,简单吧,骗你的,异步以后会将的,先这样哈,异步不是今天的主角,我们在异步函数中抛出一个异常试试

setTimeout(function(){throw new Error("我的异常")},1000);

现在我们进行异常的捕获,第一个方法try catch

try{
setTimeout(function(){throw new Error("我的异常")},1000);
}catch(e){
alert(e.message);
}

这样累死也捕获不到异常的,因为当trycatch执行的时候 function(){throw new Error("我的异常")还没有在内存堆栈中呢,这个大家先有点印象,以后在异步中会详细说的,记住这样是不能捕获错误的。

当然你在里面这样是可以捕获的

setTimeout(function(){
try{throw new Error("我的异常")
}catch(e){
alert(e.message);
}
},1000);

我们可以使用window.onerror的方式来捕获异步的异常,这样

window.onerror = function(message, URI, lineNumber,columnNumber,errorObj) {
console.log("错误信息:" , message);
console.log("出错文件:" , URI);
console.log("出错行号:" , lineNumber);
console.log("出错列号:" , columnNumber);
console.dir(errorObj);
return true;
}
setTimeout(function(){throw new Error("我的异常")},1000);

这样肯定是可以的,因为是属于监听的方式,啥时候有错误啥时候执行。

小结

这样,咱就了解了javascript的异常处理的基础了,有兴趣的同学再深入了解吧。

【javascript进阶】异常的更多相关文章

  1. JavaScript进阶(九)JS实现本地文件上传至阿里云服务器

    JS实现本地文件上传至阿里云服务器 前言 在前面的博客< JavaScript进阶(八)JS实现图片预览并导入服务器功能>(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务 ...

  2. #笔记#JavaScript进阶篇一

    #JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...

  3. 4、JavaScript进阶篇①——基础语法

    一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...

  4. JavaScript 进阶(一)JS的"多线程"

    这个系列的文章名为“JavaScript 进阶”,内容涉及JS中容易忽略但是很有用的,偏JS底层的,以及复杂项目中的JS的实践.主要来源于我几年的开发过程中遇到的问题.小弟第一次写博客,写的不好的地方 ...

  5. JavaScript进阶(一)

     OK接下来,我们再次梳理一遍js并且提高一个等级. 众所周知,web前端开发者需要了解html和css,会只用html和css创建一个漂亮的页 面,但是这肯定是不够的,因为它只是一个静态的页面,我们 ...

  6. Javascript 进阶 面向对象编程 继承的一个样例

    Javascript的难点就是面向对象编程,上一篇介绍了Javascript的两种继承方式:Javascript 进阶 继承.这篇使用一个样例来展示js怎样面向对象编程.以及怎样基于类实现继承. 1. ...

  7. JavaScript进阶(十一)JsJava2.0版本

    JavaScript进阶(十一)JsJava2.0版本 2007年9月11日,JsJava团队发布了JsJava2.0版本,该版本不仅增加了许多新的类库,而且参照J2SE1.4,大量使用了类的继承和实 ...

  8. Javascript 进阶 面向对象编程 继承的一个例子

    Javascript的难点就是面向对象编程,上一篇介绍了Javascript的两种继承方式:Javascript 进阶 继承,这篇使用一个例子来展示js如何面向对象编程,以及如何基于类实现继承. 1. ...

  9. javascript进阶笔记(2)

    js是一门函数式语言,因为js的强大威力依赖于是否将其作为函数式语言进行使用.在js中,我们通常要大量使用函数式编程风格.函数式编程专注于:少而精.通常无副作用.将函数作为程序代码的基础构件块. 在函 ...

随机推荐

  1. MINIX3

    这个系列minix3是好早看的源码  现在都忘记的差不多了 觉得就此扔掉可惜了  今天把他全部放在博客上 1 是想和大家一起讨论下 2 是没事看看 能够加强对一个稳定性系统的理解 加厚

  2. iOS学习之iOS沙盒(sandbox)机制和文件操作之NSFileManager(三)

    1.在Documents里创建目录 创建一个叫test的目录,先找到Documents的目录, NSArray *paths = NSSearchPathForDirectoriesInDomains ...

  3. 关于rem的自定义HTML比例设定

    通过设定html根标签的font-size值,控制rem来达到全局布局的自适应的,CSS长度单位全部通过rem设定 必须在head在中引入不可以延迟引入: (function (doc, win) { ...

  4. xpath轴的正确使用姿势

    网上看了许多关于轴的介绍,只介绍了语法,而没有明说具体实际中该怎么使用,百思不得其解. 背景--python中使用xpath:  ----------------------------------- ...

  5. mysqlbinlog 参数及用法说明

    mysqlbinlog用法说明 服务器生成的二进制日志文件写成二进制格式.要想检查这些文本格式的文件,应使用mysqlbinlog实用工具.应这样调用mysqlbinlog:shell> mys ...

  6. php中关于Map热点的运用

    给图像使用map标签,可以给图像的某个部分建立超连接 一般情况下用在图片上,如:<img src="Images/banner.gif" width="780&qu ...

  7. Git服务器搭建及配置

    一.部署环境 Server操作系统:CentOS release 6.7 (Final) 内核版本:2.6.32-358.el6.x86_64 git版本:1.9.0,源码下载地址如下 https:/ ...

  8. [stat.simulation] Hasting-Metropolis Algorithm

    问题背景:我们有一些观测数据X,这些数据假设是取值为1,...,m:我们还知道每个数据观测到的频数为: 但是我们现在无法计算B的大小.(这是一个假设,毕竟计算一串数字的和不是难事) 问题: 我们需要通 ...

  9. linux下安装安装pcre-8.32

    linux下安装安装pcre-8.32 ./configure --prefix=/usr/local/pcre 出现以下错误 configure: error: You need a C++ com ...

  10. (转) The major advancements in Deep Learning in 2016

    The major advancements in Deep Learning in 2016 Pablo Tue, Dec 6, 2016 in MACHINE LEARNING DEEP LEAR ...