开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【javascript进阶】异常

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

前言

最近有些时间了,今天看了看博客的后台记录,好多都没有写博客呢,争取尽快把以前的补上,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的异常处理的基础了,有兴趣的同学再深入了解吧。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
js+jquery实现树状目录
js+jquery实现简单的树状目录。html内容,css样式,js逻辑已经贴出。拿来即用。
964 0
【k线图】纯原生js实现k线图
原生js实现k线图,完全原生实现,不依赖第三方库。代码中已添加主要的行内注释,拿来即用。
1869 0
好程序员web前端培训分享js实现实战案例
好程序员web前端培训分享js实现实战案例,实际开发中有要求用户一些行为每天一次,次日开始重新回复功能,一般前端都是通过cookie来记住用户的操作,然后进行判断当日是否还有机会,这时候需要给存储的cookie值一个有效期,让次日自动失效,重新计数,代码如下: cookie = { /** * ...
1115 0
js实现移动端图片预览:手势缩放, 手势拖动,双击放大...
原文:js实现移动端图片预览:手势缩放, 手势拖动,双击放大... 前言本文将介绍如何通过js实现移动端图片预览,包括图片的 预览模式,手势缩放,手势拖动,双击放大等基本功能; 扫码查看示例效果: 代码地址http://pangyongsheng.github.io/imgPreview/ 一、功能介绍   图片预览主要有以下几个功能点组成: 监听图片点击事件,进入图片预览模式 自定义手势事件, (双指缩放,滑动,双击。
2523 0
原生js实现无限循环上下滚动公告
       说到滚动,想到的应该就是跑马灯效果。当然在网上有很多种实现方式,今天就用原生js来实现一个简单的上下无限循环滚动公告吧,代码不多,而且容易理解。
3617 0
前端 css+js实现返回顶部功能
描述:        本文主要是讲,通过css+js实现网页中的【返回顶部】功能。   实现代码: HTML: 1 2 返回顶部 3   CSS: 1 /* return top */ 2 #btnTop { 3 display: none; 4 position:...
1203 0
JS端自己拼接一个表单进行提交:实现下载或者传参后台
JS端自己拼接一个表单进行提交:实现下载或者传参后台
1736 0
中高级前端应该必会,js实现事件委托代理、切换样式、元素获取相对于文档位置等
1、介绍   随着组件开发大流行,现在三大框架已经基本占领了整个前端。   这时候,我们要是引入一个 jq 是不是先得你的项目非常臃肿,jq 也很不适合。   这个时候,你就需要来增加你 js 的功底。
1331 0
+关注
杰克.陈
一个安静的程序猿~
10424
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载