码迷,mamicode.com
首页 > 编程语言 > 详细

HTML5学习笔记(二十六):JavaScript的错误处理

时间:2017-04-17 21:06:14      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:event对象   listen   基类   function   范围   one   lis   str   学习   

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

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代码执行停止了。

HTML5学习笔记(二十六):JavaScript的错误处理

标签:event对象   listen   基类   function   范围   one   lis   str   学习   

原文地址:http://www.cnblogs.com/hammerc/p/6435355.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!