HTML5学习笔记(二十六):JavaScript的错误处理
错误相关的调试和处理在开发中是特别重要的一种技能。
try-catch
我们来看下面的情况:
1 // noneFunc 这个方法并不存在 2 window.noneFunc(); 3 // js 报错后终止运行这行代码并不会执行到 4 console.log("hello");
为了避免不继续执行后续代码的情况,可以对可能抛出错误的代码使用try-catch命令包围。
1 try { 2 // noneFunc 这个方法并不存在 3 window.noneFunc(); 4 } catch (error) { 5 // 一旦报错将会跳到这里执行 6 console.log(error.message); // window.noneFunc is not a function 7 } 8 // 执行不中断,这句代码会得到执行 9 console.log("hello");
这里要注意error对象有多个属性,但是message属性是所有浏览器都支持的属性。
finally
在try-catch语句中,finally语句是可选语句,其作用是无论被try-catch包含的代码是否出现错误,都一定会执行finally语句包含的代码,如下:
1 try { 2 window.test(); 3 } catch (error) { 4 console.log(error.message); 5 } finally { 6 console.log("finally code"); 7 } 8 9 //window.test is not a function 10 //finally code
我们再看一下下面的代码:
1 function test1() { 2 try { 3 return 0; 4 } catch (error) { 5 return 1; 6 } finally { 7 return 2; 8 } 9 } 10 11 console.log(test1()); // 2 12 13 function test2() { 14 try { 15 return 0; 16 } catch (error) { 17 return 1; 18 } 19 } 20 21 console.log(test2()); // 0 22 23 function test3() { 24 try { 25 // test 方法并不存在 26 test(); 27 return 0; 28 } catch (error) { 29 return 1; 30 } finally { 31 return 2; 32 } 33 } 34 35 console.log(test3()); // 2 36 37 function test4() { 38 try { 39 // test 方法并不存在 40 test(); 41 return 0; 42 } catch (error) { 43 return 1; 44 } 45 } 46 47 console.log(test4()); // 1
从上面的例子来看,在try-catch中包含的return语句都没有执行返回,只会执行finally里的return语句,再看下面的例子:
1 function test() { 2 try { 3 return 0; 4 } catch (error) { 5 return 1; 6 } finally { 7 console.log("finally"); 8 } 9 } 10 11 console.log(test()); // 0
如果finally中没有包含return语句,则先执行finally中的语句之后,在返回try-catch语句中的值,我们再看下面的例子:
1 function test1() { 2 var i = 0; 3 try { 4 return ++i; 5 } catch (error) { 6 return -1; 7 } finally { 8 return i; 9 } 10 } 11 12 console.log(test1()); // 1 13 14 function test2() { 15 var i = 0; 16 try { 17 return i++; 18 } catch (error) { 19 return -1; 20 } finally { 21 return i; 22 } 23 } 24 25 console.log(test2()); // 1
我们发现尽管没有执行try-catch中的return语句,但是try-catch中的return语句仍然是执行了的,可以理解为如果finally中存在return关键字,则try-catch中的return关键字都被移除。
还有一种情况,如下:
1 function test1() { 2 var i = 0; 3 try { 4 return 0; 5 } catch (error) { 6 return 1; 7 } finally { 8 if (i != 0) { 9 return 2; 10 } 11 } 12 } 13 14 console.log(test1()); // 0 15 16 function test2() { 17 var i = 0; 18 try { 19 return 0; 20 } catch (error) { 21 return 1; 22 } finally { 23 if (i == 0) { 24 return 2; 25 } 26 } 27 } 28 29 console.log(test2()); // 2
我们还发现,如果由于条件判断等原因,导致finally中的return语句没有执行到,还是会返回try-catch中的return语句。
错误处理
在JavaScript中,有7种内置的错误类型:
- Error:其它6个错误类型的基类,也提供给开发人员自己定义新的错误类型。
- EvalError:执行eval()方法时的报错。
- RangeError:数值超出范围是报错,如:new Array(-20)或new Array(Number.MAX_VALUE)。
- ReferenceError:找不到对象时的报错。
- SyntaxError:执行eval()方法语法错误时报错。
- TypeError:类型错误时的报错,如:new 10或"name" in true时。
- URIError:在调用encodeURI和decodeURI时出错的报错。
对浏览器来说,只要try-catch包含的代码抛出错误,则浏览器认为该错误已经被处理了,我们需要自行处理该错误。
抛出错误
抛出错误使用throw关键字,对于抛出的错误类型则没有规定,可以是任意类型,而浏览器对用户抛出的错误处理也和内置的错误一致,如果没有try-catch进行包含的话,浏览器会暂停JS的执行。
我们可以简单的抛出一个错误类型或自定义类型:
1 throw {msg:"my error"}; 2 throw new Error("our error");
我们可以继承Error类型,实现自己的错误类型:
1 function MyError(msg, code) { 2 this.message = msg; 3 this.code = code; 4 } 5 6 MyError.prototype = new Error(); 7 8 try { 9 throw new MyError("my error", 1001); 10 } catch (error) { 11 console.log(error.message + ", " + error.code); // my error, 1001 12 }
当然,建议对catch中的error对象使用instanceof关键字进行类型筛选再来有针对性的处理错误。
error事件
error事件仅支持DOM0级的监听方法,即不能通过addEventListener和removeEventListener方法来注册和移除,同时该方法也不会创建对应的event对象,而是将报错信息直接传递过来。
可以理解error事件为整个页面的try-catch语句,如下:
1 window.onerror = function (message, url, line) { 2 console.log("message: " + message + ", url: " + url + ", line: " + line); 3 // 返回 true 则浏览器不会打印错误信息到 console 控制台,返回 false 则浏览器会打印错误信息 4 return true; 5 }; 6 7 test(); 8 9 // 无论如何报错后的代码都不会再执行了 10 console.log("run this code!");
该事件可以用来在应用开发时收集浏览器中没有被try-catch包围的语句抛出的错误,但实际上在发布给用户的程序中,是不应该存在这样的错误,因为error事件一旦抛出就表示JS代码执行停止了。
转载于:https://www.cnblogs.com/hammerc/p/6435355.html
HTML5学习笔记(二十六):JavaScript的错误处理相关推荐
- JVM 学习笔记二十六、JVM监控及诊断工具-GUI篇
二十六.JVM监控及诊断工具-GUI篇 1.工具概述 使用上一张命令行工具或组合能帮您获取目标Java应用性能相关的基础信息,但他们存在下列局限: (1)无法获取方法级别的分析数据,如方法间的调用关系 ...
- Jenkins 持续集成 概念(学习笔记二十六)
持续集成:提交.测试.构建.测试.部署 前不久接触了持续集成(Continuous Integration,CI). 一.持续集成是什么 首先说说"集成"的概念.在实际的软件开发中 ...
- 立创eda学习笔记二十六:手把手教你使用立创eda的官方教程
可以通过以下办法找到教程: 1,在软件界面点帮助-使用教程 2,在网站首页-帮助-教程进入 如何使用教程: 这里是一级目录,其实对新手最有用的是前面3个部分,后面的仿真先不看. 常见问题里面不光是讲的 ...
- [傅里叶变换及其应用学习笔记] 二十六. 高维傅里叶变换的推导
高维意味着函数中有多个变量,典型的高维傅里叶应用为图像处理. 一个二维图像的亮度(灰度)可以用$f(x_1,x_2)$来表示,以lena为例,图像平面作为$x_1,x_2$平面,灰度作为$z$轴,形成 ...
- Java学习笔记二十六:Java多态中的引用类型转换
Java多态中的引用类型转换 引用类型转换: 1.向上类型转换(隐式/自动类型转换),是小类型到大类型的转换: 2.向下类型转换(强制类型转换),是大类型到小类型的转换: 3.instanceof运算 ...
- JavaScript学习(二十六)—事件处理程序的添加与删除
JavaScript学习(二十六)-事件处理程序的添加与删除 一.什么是事件? 所谓事件就是指用户或页面自身的某些行为,如点击鼠标,敲击键盘都是属于事件. 二.事件处理程序 当事件被触发时会引起某些程 ...
- OpenCV学习笔记(十六)——CamShift研究 OpenCV学习笔记(十七)——运动分析和物体跟踪Video OpenCV学习笔记(十八)——图像的各种变换(cvtColor*+)imgproc
OpenCV学习笔记(十六)--CamShift研究 CamShitf算法,即Continuously Apative Mean-Shift算法,基本思想就是对视频图像的多帧进行MeanShift运算 ...
- python数据挖掘学习笔记】十六.逻辑回归LogisticRegression分析鸢尾花数据
但是很多时候数据是非线性的,所以这篇文章主要讲述逻辑回归及Sklearn机器学习包中的LogisticRegression算法 #2018-03-28 16:57:56 March Wednesday ...
- python分析鸢尾花数据_python数据挖掘学习笔记】十六.逻辑回归LogisticRegression分析鸢尾花数据...
但是很多时候数据是非线性的,所以这篇文章主要讲述逻辑回归及Sklearn机器学习包中的LogisticRegression算法 #2018-03-28 16:57:56 March Wednesday ...
- OpenCV学习笔记(十六):直方图均衡化:equalizeHist()
OpenCV学习笔记(十六):直方图均匀化:equalizeHist() 参考博客: 直方图均衡化的数学原理 直方图匹配的数学原理 直方图均衡化广泛应用于图像增强中: 直方图均衡化处理的"中 ...
最新文章
- 皮一皮:男生的求生欲,以及神回复...
- springboot集成swagger2构建RESTful API文档
- 轻松掌控全链路监控:方案概述与对比 | 真的很干!
- superobject内存泄漏
- oracle更改语句用 怎么站位,Oracle 数据库如何修改控制文件的位置
- FastReport的动态页面设置
- 统一建模语言UML轻松入门(1)――基本概念
- mysql事务与锁_mysql之事务和锁
- 网络流20+4题解题报告(已更前20题)
- STM32工作笔记0082---UCOSIII系统中的OSIntEnter() 与 OSIntExit()
- 如何用更短时间写出高质量的博客文章经验分享
- 智能优化算法论文python复现,附代码--鲸鱼优化算法(WOA)-1
- 用you-get下载JayChou专辑
- mysql 数据脱敏
- c语言输出整型量格式符,C语言输出格式(详细)
- 网易云音乐 网络错误 linux,archlinux下网易云音乐netease-cloud-music启动报错,无法打开...
- mysql数据生成词云图,7个好用的在线词云生成工具
- 微信小游戏上传设置成体验版或者提交审核
- office 2010 在安装过程中出错
- 安卓作业—Fragment界面跳转
热门文章
- 如何避免点击事件连续操作时元素变蓝
- vc 控制台添加托盘显示_VC添加托盘图标
- 分治法——查找问题 —— 寻找一个序列中第k小的元素和查找最大和次大元素
- C#基础1:输入输出+变量定义
- 看了这篇c语言结构体精讲解,你难道还怕你不会吗?
- c#图像处理、图片拼接、图片裁剪、图片缩放、图上添加形状、屏幕截图、图片反色、改变图片色彩度全解
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单
- 同一界面放两个TTIWDBAdvWebGrid的问题(delphi IW TMS)
- 记一次工作中的小坑(关于celery)
- Js面向对象学习之function