JavaScript中的Error错误对象与自定义错误类型详解

 更新时间:2022年12月01日 11:27:49   作者:jimojianghu  
Error是JavaScript中最原始的错误对象,作为各种异常的基础对象,还有多个衍生的具体的错误类型,这些错误对象类型在nodejs中也可应用,这篇文章主要介绍了JavaScript中的Error错误对象与自定义错误类型,需要的朋友可以参考下

Error

Error是JavaScript语言中的一个标准的内置对象,专门用于处理JS开发中的运行时错误。
当我们的JS代码在运行过程中发生错误的话,就会抛出Error对象,整个程序将会中断在错误发生的代码处,不再继续执行,这也是错误类型必须重视的原因:它会导致页面无法显示或者功能失效。
Error是JavaScript中最原始的错误对象,作为各种异常的基础对象,还有多个衍生的具体的错误类型,这些错误对象类型在nodejs中也可应用。

Error作为内置对象,它本身数据类型是 function,但被引用时它的数据类型是 object,和 ObjectArray 类似,使用 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内置错误类型使用方式一致。

到此这篇关于JavaScript中的Error错误对象与自定义错误类型的文章就介绍到这了,更多相关js 错误对象error内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript 获取模态窗口的滚动位置代码

    javascript 获取模态窗口的滚动位置代码

    模态窗口的滚动位置获取办法还有不知道的吗?下面的方法或许对大家有所帮助,感兴趣的朋友可以了解下,希望对大家有所帮助
    2013-08-08
  • JavaScript Array Flatten 与递归使用介绍

    JavaScript Array Flatten 与递归使用介绍

    用 JavaScript 将 [1,2,3,[4,5, [6,7]], [[[8]]]] 这样一个 Array 变成 [1,2,3,4,5, 6,7,8] 呢?传说中的 Array Flatten
    2011-10-10
  • 一文带你快速理解JavaScript中call()函数的使用

    一文带你快速理解JavaScript中call()函数的使用

    这篇文章主要为大家详细介绍了JavaScript中call()函数的使用的相关知识,文中的示例代码讲解详细,具有一定的学习价值,需要的可以参考一下
    2023-03-03
  • 网页自动跳转代码收集

    网页自动跳转代码收集

    网页自动跳转代码收集
    2009-09-09
  • js+css3实现炫酷时钟

    js+css3实现炫酷时钟

    这篇文章主要为大家详细介绍了js+css3实现炫酷时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • JavaScript实现获取设备网络连接信息

    JavaScript实现获取设备网络连接信息

    作为前端开发,做好用户体验是很重要的,日常开发中我们经常可以遇到用户网速慢导致静态资源加载慢,从而给影响用户体验,所以本文来和大家分享一个有趣的API,可以实现获取网络信息
    2023-05-05
  • 基于JS实现带并发限制的异步调度器

    基于JS实现带并发限制的异步调度器

    这篇文章主要为大家详细介绍了如何基于JS实现带并发限制的异步调度器,文中的示例代码讲解详细,具有一定的学习价值,需要的可以参考下
    2023-05-05
  • RequireJS简易绘图程序开发

    RequireJS简易绘图程序开发

    这篇文章主要为大家详细介绍了使用RequireJS简易绘图程序开发,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • javascript 实现页面加载进度条代码

    javascript 实现页面加载进度条代码

    javascript 实现页面加载进度条代码,需要的朋友可以参考下。
    2010-04-04
  • js实现表单校验功能

    js实现表单校验功能

    这篇文章主要为大家详细介绍了js实现表单校验功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08

最新评论