深入了解JS之Javascript错误处理

毋庸置疑的是，在程序设计中，错误处理是很重要的一个环节。不管水平多高的软件开发人员，都或多或少地难以避免写出逻辑不是特别严谨的代码。另一方面来说，当我们的写的代码中带有错误处理的逻辑时，当出现了错误时可以及时通知到用户，这会带来用户体验上的提升。作为开发人员，我们要知道如何处理Javascript错误。

try-catch语句

在Javascript中，通过try-catch语句来实现异常的处理。该语句作为标准的一部分，其语法规则如下：

`try {`

`.....`

`} catch (error) {`

`.....`

`}`

在使用时，我们可以将所有可能会抛出错误的代码放在try语句块中，在catch语句块中是对错误的处理。 当try块中出现错误时，就会退出try块，从而执行catch中的错误处理代码。在上面的语法规则中，可以发现catch接受一个错误对象error.在error中主要存在两个属性：name属性 和 message属性。

这里要注意的是，如果在try块中执行代码时遇到错误，出现错误的语句后面的语句都不会再被执行。如果想要不管有没有遇到错误都执行一些语句，那么可以把这些语句放在finally子句中。

finally子句

标准中还引入了另一个子句：finally语句。它是搭配try-catch语句的一个可选的语句。但是，一旦使用，无论try-catch语句块中包含什么代码，finally中的代码都会执行。

• try中的代码正常执行，finally中的语句正常执行。

• try中的代码执行过程中出错从而执行catch语句， finally中的语句正常执行。

• try块中存在return语句，finally中的代码仍然正常执行。（只要包含finally语句，try-catch中的return都将被忽略！）

Javascript中的错误类型

• Error

基类型。其他的错误类型均继承自它。这个基类型的主要目的是供开发人员抛出自定义错误。

• EvalError

由于使用eval函数引发的错误。

• SyntaxError

语法错误。

• TypeError

类型错误。当错误使用变量或对象时，会抛出该错误。

• ReferenceError

引用错误。当引用一个不存在的对象或不存在的变量时会发生该错误。

• RangeError

范围错误。数值超出范围时触发。比如一个数组元素的取值为负值，就会抛出该错误。

• URIError

合理使用try-catch

当我们使用try-catch处理错误之后，浏览器就不会再对错误进行处理。浏览器如何处理错误，下面会讲到。**使用try-catch的情况一般为try块中的代码是我们无法控制的，也就是说我们不能确定它会不会出现错误，如果出现错误，是哪种错误。 比如，我们使用了第三方库或是别人写的工具函数之类的，我们无法确定这些函数会不会有意无意地抛出一些错误。**因此，在这种情况下使用try-catch来对使用的函数进行包裹，从而对可能出现的错误进行处理。

当我们明确知道代码会发生错误时，再使用try-catch就不是太合适了。而且，在上面我们也介绍了，Error对象是基类型，主要目的是用来抛出自定义错误。

Throw

在JS中，我们通过throw来抛出错误。而且，throw的使用情况为： 我们明确知道代码会发生错误的情况。 比如：

`function  test(arr)  {`

`// 此处应该传进来一个数组`

`alert(arr[0])`

`}`

对于这种情况，我们需要对参数arr进行一个处理。可以发现，我们在test函数里面，默认出进来的参数为数组，从而直接进行数组操作。但是如果传进来的不是数组呢？ 肯定会出错。这就需要我们对参数进行一个判断，如果不是数组，则抛出一个错误。

`function  test(arr) {`

 `if (!Array.isArray(arr))`

 `throw  new  Error("test(): arr must be an Array instance ")`

`    alert(arr[0])`

`}`

• 通过throw抛出的错误会被外层的catch语句块所捕获。如果没有catch语句块，则会被浏览器捕获，从而在浏览器控制台可以看到错误信息。

这里要注意，抛出的错误类型不一定非要是Error，也可以是上面所说的任何类型，甚至是自定义错误类型。

对于自定义错误类型，可以通过继承自Error来实现。

如何自定义错误类型

其实，我们可以不一定通过继承Error来实现自定义错误类型。

• 使用继承的好处就是可以通过obj instanceof Error 来识别这个一个错误对象。

`class  MyError  extends  Error  {`

 `constructor(message) {`

 `super(message);`

 `this.name = "MyError"`

`}`

`}`

这样的话，我们就可以在catch中对其进行判断。

`try {`

`.....`

`} catch (error) {`

 `if (error instanceof  Error) {`

`    .................`

`    }`

`}`
`// 更多详细的内容建议参考： https://zh.javascript.info/custom-errors`

我们还可以在catch中通过throw来抛出错误。这种情况发生在： 我们在catch中对收到的error做一个筛选，如果是特定的错误，对其进行处理。否则，表明出现了未知错误，将它继续抛出去。

错误对象（error）

上面说了，catch语句会收到关于错误信息的error对象。该对象主要有以下两种属性：

• Name 错误类型名称

• Message 关于error的描述

还有其他的一些属性，根据浏览器的不同而有所不同。不过，最广泛使用和支持的是：

• Stack 当前调用栈信息

Throw 与try-catch的说明

捕获错误是为了防止浏览器对其进行默认处理。抛出错误是为了提供错误发生的具体原因信息。

error事件

当代码中出现错误，而未使用try-catch进行捕获处理的情况下，浏览器会捕获到该错误。即： 任何没有通过try-catch处理的错误都会触发window的error事件。在任何浏览器中，onerror事件处理程序都不会接受一个event对象，相反，接受的是三个参数： message(错误信息), url（错误所在的URL） 和 line（行号）。

`window.onerror = function ( message, url, line ) {`

`........`

`}`

这里要注意的是，onerror事件只能通过上面的方式添加事件处理程序，不可以通过DOM2的addEventListener。

在事件处理程序中，通过return false可以阻止浏览器报告错误的默认行为。

`window.onerror = function (message, url, line ) {`

 `console.log(message)`

 `return  false;`

`}`

图像也支持error事件。只要图像的src指定的URL返回的图像格式不可被识别，就会触发error事件。但是他的事件处理程序会接收event对象。

常见错误类型

• 数据类型错误

• 其实就是指我们在编写代码的过程前没有确保使用的变量和函数参数的数据类型的正确性。因为JS是松散类型的，因此开发人员要编写适当的数据类型检测代码。要注意的一点是，当进行类型判断时，如果是基本类型，应该使用typeof来检测，而对象的值则应该使用instanceof来进行检测。

• 类型转换错误

• 这种错误比较常见的是== , === 和 if , while , for这些控制语句中的布尔条件判断。举一个常见的例子：

`function  test(arr, arr2)  {`

 `if (!arr2) {`

 `return arr;`

`}`

`}`

• 我们想的是，如果不存在arr2，就返回arr。如果arr2为undefined，满足条件。如果arr2存在，且为0的话，仍然会以arr2不存在进行处理。显然，这里就出现了逻辑上的错误。因此，要加上合适的判断。

`if ( typeof arr2 === 'undefined' ) return arr`

• 通信错误

• 格式不正确的URL有关。

• 服务器处理出现的错误。

错误上传服务器

很多时候，我们都需要把错误信息上传给服务器保存。那么，怎么上传就是一个问题。

正如上面所说，Image对象也会触发error事件，那么我们可以使用image的error事件。主要由以下几个好处：

• 支持度高。几乎所有的浏览器都支持Image对象。

• 可以避免跨域限制。

• 记录错误的过程中出问题的概率较低。