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内置错误类型使用方式一致。