【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的异常处理的基础了,有兴趣的同学再深入了解吧。

时间: 2024-11-08 21:23:42

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

JavaScript进阶之深入理解数据双向绑定

前言 谈起当前前端最热门的 js 框架,必少不了 Vue.React.Angular,对于大多数人来说,我们更多的是在使用框架,对于框架解决痛点背后使用的基本原理往往关注不多,近期在研读 Vue.js 源码,也在写源码解读的系列文章.和多数源码解读的文章不同的是,我会尝试从一个初级前端的角度入手,由浅入深去讲解源码实现思路和基本的语法知识,通过一些基础事例一步步去实现一些小功能. 本场 Chat 是系列 Chat 的开篇,我会首先讲解一下数据双向绑定的基本原理,介绍对比一下三大框架的不同实现方式

JavaScript进阶教程(第一课)第1/3页_基础知识

欢迎您继续学习Javascript进阶教程.在此之前我们已经学习了Javascript初级教程.在这一阶段的学习中我们将继续学习在上次的教程中还没有来得及谈及的问题.我还将向你们展示Javascript的许多神奇功能,使你能够制作真正对多媒体应用程序.     以下是我们将涉及的内容:     给变量赋值     If-then语句     For和while循环     编写你自己的函数     打开及控制窗口     读写HTML 表单     应用数组     控制图片转换     如果这

JavaScript进阶练习及简单实例分析_javascript技巧

当用户点击"统计"按钮时,在窗口中弹出文本框中出现次数最多的字符并显示其出现的次数 点击统计按钮时效果如图所示: 实现代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

javascript 进阶篇3 Ajax 、JSON、 Prototype介绍_基础知识

Ajax 这个词听了不少,但是其实并没有真的接触过,于是在这里稍微了解一下. Ajax技术的创新之处在于,改善了传统的"请求-等待-响应-刷新-返回数据"模式,在信息返回之前,用户可以继续自己的操作,当前页面不会因为请求而刷新.这样大大的提高了交互性. Ajax其实并不是一个技术,而是由许多技术组成的.最大的特色之一就是可以异步传输,实现多线程服务. Ajax的异步传输,依靠的是js中的XMLHttpRequst对象,于是我们从它入手. XMLHttpRequest是XMLHttp组建

javascript 进阶篇1 正则表达式,cookie管理,userData_基础知识

首先,什么事正则表达式呢,其实引入概念很多时候并不能帮我们明白它到底是什么,所以我先简单描述下,正则表达式,其实就是一个记录字符串规则则的字符串,等我们看完这一部分,也就能明白它到底是什么了. 基本语法:正则表达式就是"/expression/"+表示搜索范围的符号.例如我们要找function这个关键词,就是/function/gi,其中g表示global,就是全局搜索,i表示ignor,就是忽略大小写. 在js中,我们通过RegExp类来实现. 这个类里面有很多很多的符号用来表示不

javascript 进阶篇2 CSS XML学习_基础知识

CSS全称是cascading style sheets,中文名字叫级联样式单,也叫层叠样式表.它的好处就是能让代码整齐,并且可以批量处理一些样式. 基本语法: 注释符:/* */ 选择符:selector {attribute:value} 同一个属性的值用空格符号隔开,不同属性用分号隔开. 区分大小写. 比如要给页面中的table定制样式,则写table {.....;.....;} 选择符的使用方法有很多种,于是我又一次懒得打,从网上抄来的: 选择符模式 说明 * 匹配任意元素.(通用选择

JavaScript进阶教程(第二课)第1/3页_基础知识

今天我们将学习一项很有用而且很有趣的内容:cookies - 这是用来记录访问过你的网页的人的信息.利用Cookies你能记录访问者的姓名,并且在该访问者再次访问你的站点时向他发出热情的欢迎信息.你还可以利用cookie记忆用户端的特点 - 如果访问者的所接入的网线的速度慢,cookie可以自动告诉你在给其发送网页的时候只发送尽可能少的图片内容.     只要你在合理的范围内使用cookies(不要用它探询用户的个人隐私),cookies还是相当实用得.所以我要向你们介绍cookies的工作原理

JavaScript进阶教程(第四课第一部分)_基础知识

在以前的课程中我们学习了对文本和字符串的各种操作今天我们专注于两种不同的数据类型图象和对象.学完这一课你将知道如何      使用JavaScript来加速图象交换.      创建你自己的对象来使脚本易于理解.      使用关联数组来快速存取脚本中的每一个对象.     使用JavaScript做图象变换的一个主要问题是它直到需要换图时才去告诉浏览器下载那张图象.如果你有一张大的图象想在鼠标滑过一副图象时调出来浏览器得临时下载这张图这可能会花一定时间从而使滑动效果大打折扣.     如果你的

JavaScript进阶教程(第二课续)第1/2页_基础知识

现在你已经掌握了先进的字符串处理和相关数组概念,该是我们打开神奇的cookie魔瓶的时候了.cookie是记录访问你的站点的人的信息,它其实驻留在用户的硬盘上,即使用户已经离开你的站点,cookie在用户的硬盘上仍然存在,如果该用户再次返回你的站点,则该cookie就会被一起发回到你的服务器中,便于你统计和处理重复到访者的信息.     下面我们看一看一个cookie应用的典型例子,我们在一个网页中设置cookie,然后通过别的网页读取它.在使用该例子的时候,想想如果没有cookie,你如何做到