双10期|基本对象Error及8种错误类型
发布网友
发布时间：6小时前
共1个回答
热心网友
时间：4小时前
双10期|基本对象Error及8种错误类型
tips：每个技术点都值得优学优写：10期
好文推荐：
约2万字-Vue源码解读汇总篇(续更)
前端要会打组合拳，复盘30+技术点打出的功能
写在前面错误对象是一种特殊的基本对象。它们拥有基本的Error类型，同时也有多种具体的错误类型。认识他们，对于我们合理的处理异常，抛出异常，可能是有帮助的，对于深入认识JavaScript也是有帮助的，错误对象（错误类型）通常也是编程语言的重要组成部分。
JavaScript种标准的具体的错误类型，主要有8种：
AggregateError(实验中)
EvalError
InternalError
RangeError
ReferenceError
SyntaxError
TypeError
URIError
基本对象ErrorError简述通过Error的构造器可以创建一个错误对象。当运行时错误产生时，Error的实例对象会被抛出。Error对象也可用于用户自定义的异常的基础对象。
下面是一个使用Error的示例：
try{thrownewError('遇到了基本错误!')}catch(e){console.error(e.name+':'+e.message)//打印结果：Error:遇到了基本错误!}Error的语法是：
//中括号括起来的都是可选参数，//message：人类可阅读的关于错误的描述//fileName(非标准)：代码中导致异常的文件的文件名//lineNumber(非标准)：代码中导致异常的代码的行号newEvalError([message[,fileName[,lineNumber]]])正是因为一些js框架，合理使用了错误类型，我们在辨析错误的时候才方便了许多，例如message：错误描述，fileName：发生错误的文件名，lineNumber：代码中导致异常的代码的行号。这些错误信息的提供，大大方便了定位排查。
下面是一个包含了基本的错误信息的控制台报错截图：
自定义异常类型如果你想要自定义基于Error的异常类型也是被支持的，但需要注意，在FireFox中抛出自定义类型的异常可能会显示不正确的行号和文件名。
下面是一个示例：
functionMyError(message){this.name='MyError';this.message=message||'DefaultMessage';this.stack=(newError()).stack;}MyError.prototype=Object.create(Error.prototype);MyError.prototype.constructor=MyError;try{thrownewMyError();}catch(e){console.log(e.name);//'MyError'console.log(e.message);//'DefaultMessage'}try{thrownewMyError('custommessage');}catch(e){console.log(e.name);//'MyError'console.log(e.message);//'custommessage'}AggregateError当多个错误需要包装在一个错误中时，可以考虑使用AggregateError。
tips：这是一个实验中的功能.此功能某些浏览器尚在开发中，请参考浏览器兼容性,在不同浏览器中使用适合的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
语法：
//errors错误的描述，默认为空。//message错误的提示信息。newAggregateError(errors[,message])tips：语法习惯上使用[]把可选内容包裹起来，例如上面，包括那个逗号都是可选的，都被[]包裹了。这不仅仅是javascript这样做，所以什么是可选的，通常只要看是否被[]即可，当然这是在遵守规范或约定的前提下。
下面是一个创建AggregateError的示例
try{thrownewAggregateError([newError("someerror"),],'Hello');}catch(e){console.log(einstanceofAggregateError);//trueconsole.log(e.message);//"Hello"console.log(e.name);//"AggregateError"console.log(e.errors);//[Error:"someerror"]}下面是一个捕获AggregateError的示例
Promise.any([Promise.reject(newError("someerror")),]).catch(e=>{console.log(einstanceofAggregateError);//trueconsole.log(e.message);//"AllPromisesrejected"console.log(e.name);//"AggregateError"console.log(e.errors);//[Error:"someerror"]});EvalErrorEvalError表示一个关于eval函数的错误。EvalError不在当前ECMAScript规范中使用，因此不会被运行时抛出.但是对象本身仍然与规范的早期版本向后兼容。
语法：
//message：错误描述//fileName：代码中导致异常的文件的文件名//lineNumber：代码中导致异常的代码的行号newEvalError([message[,fileName[,lineNumber]]])下面是一个创建EvalError的示例
try{thrownewEvalError('Hello','someFile.js',10);}catch(e){console.log(einstanceofEvalError);//trueconsole.log(e.message);//"Hello"console.log(e.name);//"EvalError"console.log(e.fileName);//"someFile.js"console.log(e.lineNumber);//10console.log(e.columnNumber);//0console.log(e.stack);//"@Scratchpad/2:2:9\n"}tips：全局的EvalError对象本身不包含任何方法,然而它通过原型链继承了一些方法。也支持通过prototype向EvalError对象中添加自定义属性。
InternalErrorInternalError对象表示出现在JavaScript引擎内部的错误。当JavaScript引擎出现内部错误时将会抛出InternalError。例如："InternalError:toomuchrecursion"（内部错误：递归过深）。
tips：需要特别注意的是该特性是非标准的，所以应该谨慎在生产环境中使用它。
语法：
newInternalError([message[,fileName[,lineNumber]]])一些适用场景：
"toomanyswitchcases"（过多case子句）；
"toomanyparenthesesinregularexpression"（正则表达式中括号过多）；
"arrayinitializertoolarge"（数组初始化器过大）；
"toomuchrecursion"（递归过深）。
RangeErrorRangeError对象表示范围越界错误，当一个值不在其所允许的范围或者集合中，可考虑使用它。
例如，试图传递一个number参数给一个范围内不包含该number的函数时则会引发RangeError。当传递一个不合法的length值作为Array构造器的参数创建数组，或者传递错误值到数值计算方法（Number.toExponential()，Number.toFixed()，Number.toPrecision()），会出现RangeError。
语法：
newRangeError([message[,fileName[,lineNumber]]])下面是一个使用RangeError的示例：
//中括号括起来的都是可选参数，//message：人类可阅读的关于错误的描述//fileName(非标准)：代码中导致异常的文件的文件名//lineNumber(非标准)：代码中导致异常的代码的行号newEvalError([message[,fileName[,lineNumber]]])0ReferenceErrorReferenceError用来表示引用类错误，ReferenceError对象代表当一个不存在的变量被引用时发生的错误。例如，当你尝试引用一个未被定义的变量时，将会抛出一个ReferenceError。
语法：
//中括号括起来的都是可选参数，//message：人类可阅读的关于错误的描述//fileName(非标准)：代码中导致异常的文件的文件名//lineNumber(非标准)：代码中导致异常的代码的行号newEvalError([message[,fileName[,lineNumber]]])1下面是一个创建ReferenceError的示例
//中括号括起来的都是可选参数，//message：人类可阅读的关于错误的描述//fileName(非标准)：代码中导致异常的文件的文件名//lineNumber(非标准)：代码中导致异常的代码的行号newEvalError([message[,fileName[,lineNumber]]])2一个捕获ReferenceError的示例
//中括号括起来的都是可选参数，//message：人类可阅读的关于错误的描述//fileName(非标准)：代码中导致异常的文件的文件名//lineNumber(非标准)：代码中导致异常的代码的行号newEvalError([message[,fileName[,lineNumber]]])3JavaScript种有一个“奇怪”的现象，就是“变量提升”，但这种提升又是有区别的，例如在使用let声明一个变量前就使用它会被抛出一个ReferenceError异常，而使用var则不会抛出ReferenceError。
下面是一个会抛出ReferenceError的示例。
//中括号括起来的都是可选参数，//message：人类可阅读的关于错误的描述//fileName(非标准)：代码中导致异常的文件的文件名//lineNumber(非标准)：代码中导致异常的代码的行号newEvalError([message[,fileName[,lineNumber]]])4SyntaxErrorSyntaxError语法错误，代表尝试解析语法上不合法的代码的错误。当Javascript语言解析代码时，Javascript引擎发现了不符合语法规范的的代码时时抛出SyntaxError。
语法：
//中括号括起来的都是可选参数，//message：人类可阅读的关于错误的描述//fileName(非标准)：代码中导致异常的文件的文件名//lineNumber(非标准)：代码中导致异常的代码的行号newEvalError([message[,fileName[,lineNumber]]])5下面是一个捕获SyntaxError的示例
//中括号括起来的都是可选参数，//message：人类可阅读的关于错误的描述//fileName(非标准)：代码中导致异常的文件的文件名//lineNumber(非标准)：代码中导致异常的代码的行号newEvalError([message[,fileName[,lineNumber]]])6TypeErrorTypeError表示类型错误，表示值的类型不是预期类型时发生的错误。例如，当传入函数的操作数或参数的类型并非操作符或函数所预期的类型时，将抛出一个TypeError类型错误。
语法：
//中括号括起来的都是可选参数，//message：人类可阅读的关于错误的描述//fileName(非标准)：代码中导致异常的文件的文件名//lineNumber(非标准)：代码中导致异常的代码的行号newEvalError([message[,fileName[,lineNumber]]])7下面是一个捕获TypeError的示例
//中括号括起来的都是可选参数，//message：人类可阅读的关于错误的描述//fileName(非标准)：代码中导致异常的文件的文件名//lineNumber(非标准)：代码中导致异常的代码的行号newEvalError([message[,fileName[,lineNumber]]])8下面是一张关于先使用函数表达式，再去声明会被抛出TypeError的截图。
URIErrorURIError对象用来表示，以一种错误的方式使用全局URI处理函数，而产生的错误。当向全局URI处理函数传递一个不合法的URI时，URIError错误会被抛出。
语法：
//中括号括起来的都是可选参数，//message：人类可阅读的关于错误的描述//fileName(非标准)：代码中导致异常的文件的文件名//lineNumber(非标准)：代码中导致异常的代码的行号newEvalError([message[,fileName[,lineNumber]]])9下面是一个使用URIError的示例
functionMyError(message){this.name='MyError';this.message=message||'DefaultMessage';this.stack=(newError()).stack;}MyError.prototype=Object.create(Error.prototype);MyError.prototype.constructor=MyError;try{thrownewMyError();}catch(e){console.log(e.name);//'MyError'console.log(e.message);//'DefaultMessage'}try{thrownewMyError('custommessage');}catch(e){console.log(e.name);//'MyError'console.log(e.message);//'custommessage'}0写在后面关于error的使用，可能在一些应用的常规页面开发未必用得上，但JavaScript是高级编程语言，它能做更多的事。就像是在写java接口时处理业务逻辑，抛出适当的异常和捕获异常，可能是比较常见的事。如果JavaScript也做那样的事情，那么Error相关的知识，结合throw语句抛出一个异常并且用try...catch语句捕获处理它，就是常见的事了。
即使用得比较少，学习它，对于我们理解JavaScript和查看一些错误信息，排查定位bug也是有帮助的。
下面是一些在vue3源码库vue-next种检索到的错误类型的应用的截图。我曾写过约2万字-Vue源码解读汇总篇(续更)，而做这个的目的除了了解vue，就是学习如何设计代码。例如本文的主角Error应该如何使用，我也会去该库检索学习。
原文：https://juejin.cn/post/7100160801528365070