错误相关的调试和处理在开发中是特别重要的一种技能。

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的错误处理相关推荐

  1. JVM 学习笔记二十六、JVM监控及诊断工具-GUI篇

    二十六.JVM监控及诊断工具-GUI篇 1.工具概述 使用上一张命令行工具或组合能帮您获取目标Java应用性能相关的基础信息,但他们存在下列局限: (1)无法获取方法级别的分析数据,如方法间的调用关系 ...

  2. Jenkins 持续集成 概念(学习笔记二十六)

    持续集成:提交.测试.构建.测试.部署 前不久接触了持续集成(Continuous Integration,CI). 一.持续集成是什么 首先说说"集成"的概念.在实际的软件开发中 ...

  3. 立创eda学习笔记二十六:手把手教你使用立创eda的官方教程

    可以通过以下办法找到教程: 1,在软件界面点帮助-使用教程 2,在网站首页-帮助-教程进入 如何使用教程: 这里是一级目录,其实对新手最有用的是前面3个部分,后面的仿真先不看. 常见问题里面不光是讲的 ...

  4. [傅里叶变换及其应用学习笔记] 二十六. 高维傅里叶变换的推导

    高维意味着函数中有多个变量,典型的高维傅里叶应用为图像处理. 一个二维图像的亮度(灰度)可以用$f(x_1,x_2)$来表示,以lena为例,图像平面作为$x_1,x_2$平面,灰度作为$z$轴,形成 ...

  5. Java学习笔记二十六:Java多态中的引用类型转换

    Java多态中的引用类型转换 引用类型转换: 1.向上类型转换(隐式/自动类型转换),是小类型到大类型的转换: 2.向下类型转换(强制类型转换),是大类型到小类型的转换: 3.instanceof运算 ...

  6. JavaScript学习(二十六)—事件处理程序的添加与删除

    JavaScript学习(二十六)-事件处理程序的添加与删除 一.什么是事件? 所谓事件就是指用户或页面自身的某些行为,如点击鼠标,敲击键盘都是属于事件. 二.事件处理程序 当事件被触发时会引起某些程 ...

  7. OpenCV学习笔记(十六)——CamShift研究 OpenCV学习笔记(十七)——运动分析和物体跟踪Video OpenCV学习笔记(十八)——图像的各种变换(cvtColor*+)imgproc

    OpenCV学习笔记(十六)--CamShift研究 CamShitf算法,即Continuously Apative Mean-Shift算法,基本思想就是对视频图像的多帧进行MeanShift运算 ...

  8. python数据挖掘学习笔记】十六.逻辑回归LogisticRegression分析鸢尾花数据

    但是很多时候数据是非线性的,所以这篇文章主要讲述逻辑回归及Sklearn机器学习包中的LogisticRegression算法 #2018-03-28 16:57:56 March Wednesday ...

  9. python分析鸢尾花数据_python数据挖掘学习笔记】十六.逻辑回归LogisticRegression分析鸢尾花数据...

    但是很多时候数据是非线性的,所以这篇文章主要讲述逻辑回归及Sklearn机器学习包中的LogisticRegression算法 #2018-03-28 16:57:56 March Wednesday ...

  10. OpenCV学习笔记(十六):直方图均衡化:equalizeHist()

    OpenCV学习笔记(十六):直方图均匀化:equalizeHist() 参考博客: 直方图均衡化的数学原理 直方图匹配的数学原理 直方图均衡化广泛应用于图像增强中: 直方图均衡化处理的"中 ...

最新文章

  1. 皮一皮:男生的求生欲,以及神回复...
  2. springboot集成swagger2构建RESTful API文档
  3. 轻松掌控全链路监控:方案概述与对比 | 真的很干!
  4. superobject内存泄漏
  5. oracle更改语句用 怎么站位,Oracle 数据库如何修改控制文件的位置
  6. FastReport的动态页面设置
  7. 统一建模语言UML轻松入门(1)――基本概念
  8. mysql事务与锁_mysql之事务和锁
  9. 网络流20+4题解题报告(已更前20题)
  10. STM32工作笔记0082---UCOSIII系统中的OSIntEnter() 与 OSIntExit()
  11. 如何用更短时间写出高质量的博客文章经验分享
  12. 智能优化算法论文python复现,附代码--鲸鱼优化算法(WOA)-1
  13. 用you-get下载JayChou专辑
  14. mysql 数据脱敏
  15. c语言输出整型量格式符,C语言输出格式(详细)
  16. 网易云音乐 网络错误 linux,archlinux下网易云音乐netease-cloud-music启动报错,无法打开...
  17. mysql数据生成词云图,7个好用的在线词云生成工具
  18. 微信小游戏上传设置成体验版或者提交审核
  19. office 2010 在安装过程中出错
  20. 安卓作业—Fragment界面跳转

热门文章

  1. 如何避免点击事件连续操作时元素变蓝
  2. vc 控制台添加托盘显示_VC添加托盘图标
  3. 分治法——查找问题 —— 寻找一个序列中第k小的元素和查找最大和次大元素
  4. C#基础1:输入输出+变量定义
  5. 看了这篇c语言结构体精讲解,你难道还怕你不会吗?
  6. c#图像处理、图片拼接、图片裁剪、图片缩放、图上添加形状、屏幕截图、图片反色、改变图片色彩度全解
  7. 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单
  8. 同一界面放两个TTIWDBAdvWebGrid的问题(delphi IW TMS)
  9. 记一次工作中的小坑(关于celery)
  10. Js面向对象学习之function