js错误处理机制（JavaScript中的Error错误对象与自定义错误类型）

Error

Error是JavaScript语言中的一个标准的内置对象
    
    
    
，专门用于处理JS开发中的运行时错误    
    
    
 。

当我们的JS代码在运行过程中发生错误的话     


     


     


 ，就会抛出Error对象 




 




 




 ，整个程序将会中断在错误发生的代码处

   

   

   

，不再继续执行     

     

     

，这也是错误类型必须重视的原因：它会导致页面无法显示或者功能失效 


     


     


     。

Error是JavaScript中最原始的错误对象  




  




  




  ，作为各种异常的基础对象


  


  


  

，还有多个衍生的具体的错误类型     
     
     
，这些错误对象类型在nodejs中也可应用

 




 




 




。

Error作为内置对象   




   




   




  ，它本身数据类型是 function



 



 



 

，但被引用时它的数据类型是 object               ，和 Object    
    
    
 、Array 类似    




    




    




  ，使用 typeof 进行判断如下：

typeof Error // function typeof Error() // object typeof new Error() // object

关于typeof的详细知识
















，可参考本博前文一文搞懂js中的typeof用法

Error语法

下面介绍下Error对象基本的语法知识   

   

   

。

Error对象既可以当作构造函数使用               ，也可以当作方法     



     



     



  ，一般有两个可选参数： new Error(message, options) Error(message, options)

可选参数说明如下：

message：错误信息描述 options：属性对象 cause：指定错误的具体原因 Error属性和方法

Error实例必然包含 message 属性















，除此外一般还提供 name 和 stack 属性
    
    
    
，而 cause 属性则根据定义来确定  

     

     

     。

message：错误信息描述 name：错误的类型名字 stack：错误的堆栈轨迹     


     


     


 ，用于堆栈追踪 cause：当前错误被抛出的具体原因

下面通过一个示例 




 




 




 ，看下具体的属性信息：

const err = new Error(发生错误！, { cause: 333 }) console.log(err) // Error: 发生错误！ // at <anonymous>:1:13 console.log(err.message) // 发生错误！ console.log(err.cause) // 333 console.log(err.stack) // Error: 发生错误！ // at <anonymous>:1:13

如上代码

   

   

   

，定义了一个错误对象     

     

     

，并赋予两个参数  




  




  




  ，在控制台输出


  


  


  

，可以看到该错误对象具体的属性信息


  




  




  



。

需要注意的是     
     
     
，只有定义了cause属性的Error实例   




   




   




  ，才有该属性



 



 



 

，否则cause属性不存在               ，如下所示： const err2 = new Error(发生错误！) console.log(err2.cause) // undefined

err2.cause的输出为undefined    




    




    




  ，因为构造函数并没有定义该属性  


  


  


。

Error对象没有自己特有的实例方法
















，只有继承自Object对象的               ，这里略过   
     
     
    。

六种常见错误类型

Error对象衍生有六种常见的错误类型     



     



     



  ，属于Error的派生类















，属性和方法也都继承自Error
    
    
    
，下面一一介绍下这六种类型



   




   




   


。

SyntaxError

SyntaxError 语法错误     


     


     


 ，表示JS代码发生的语法上的错误 




 




 




 ，包括各种不符合语法规范 


     


     


     、书写错漏等情况 



 



 



。

如下变量名错误：

const 11 = 8 // Uncaught SyntaxError: Unexpected number

错误的代码语法：

Error(+) // Uncaught SyntaxError: Unexpected token )

SyntaxError语法错误无法被捕获

   

   

   

，因为语法错误不会被执行     

     

     

，直接抛出错误  




  




  




  ，所幸的是


  


  


  

，现在的IDE工具和各种插件     
     
     
，已可规避大部分的语法错误                 。

TypeError

TypeError 类型错误   




   




   




  ，当代码中的变量参数等类型不对时



 



 



 

，就会发生该类型错误




    




    




    

。

比如               ，把属性当方法使用：

window.location() // Uncaught TypeError: window.location is not a function // at <anonymous>:1:8

错误的构造函数使用：

new null() // Uncaught TypeError: null is not a constructor // at <anonymous>:1:1 ReferenceError

ReferenceError 引用错误    




    




    




  ，当引用一个并不存在的变量时会发生的错误














。

如直接在浏览器控制打印：

a // Uncaught ReferenceError: a is not defined // at <anonymous>:1:1 cons.log() // Uncaught ReferenceError: cons is not defined // at <anonymous>:1:1

错误的值分配
















，给 null 赋值：

null = 1 // Uncaught SyntaxError: Invalid left-hand side in assignment RangeError

RangeError 取值范围错误               ，当给某个对象指定一个不在取值范围内的特定值时发生的错误                 。

如给Array对象传入不合法的长度参数

Array(-1) Array(Infinity) // Uncaught RangeError: Invalid array length // at <anonymous>:1:1

数字类型方法的使用：

5..toFixed(200) // Uncaught RangeError: toFixed() digits argument must be between 0 and 100 // at Number.toFixed (<anonymous>) // at <anonymous>:1:4

toFixed() 参数取值范围在0到100之间     



     



     



  ，超过则会报错



     



     



     
。

URIError

URIError 当使用URI相关方法处理数据时















，当这些方法的参数不正确时导致的一些错误















。

主要常见于URI的解码等方法decodeURI()

 




 




 




、decodeURIComponent()等    
    
    
 。 decodeURI(%) decodeURIComponent(%) // Uncaught URIError: URI malformed // at decodeURIComponent (<anonymous>) // at <anonymous>:1:1 EvalError

EvalError 当在使用eval函数时
    
    
    
，发生的错误 


     


     


     。eval不被推荐使用     


     


     


 ，该错误类型一般很少见 




 




 




 ，处于半废弃状态

   

   

   

，为了兼容考虑才存在

 




 




 




。

自定义错误类型

除了JavaScript自带的常见错误类型以外     

     

     

，我们还可以自定义特殊的错误类型   

   

   

。

处理起来也很简单  




  




  




  ，使用继承Error对象的方式即可  

     

     

     。 class CharError extends Error { constructor(message = 字符错误) { super(message) this.name = CharError } }

以上代码使用es6的类继承方式


  


  


  

，自定义一个错误类型继承Error对象     
     
     
，后续就可以使用新的 CharError 类型


  




  




  



。

const ce = new CharError() console.log(ce) // CharError: 字符错误 // at error.html:26:16

如上   




   




   




  ，与JavaScript内置错误类型使用方式一致  


  


  


。