快速掌握前端开发中的常见错误

前言今天我们就来看看浏览器支持的一些Error对象。如果你在抓到错误的时候还经常不知道使用哪种类型，你总是习惯去ThrownewError('xx')，相信这篇文章能帮助你对错误有更好的理解~先定义总之，我们需要知道的Error的内容如下：Error对象是JavaScript的一个内置对象，也就是说所有的js引擎默认都会支持这个对象；当我们以函数的形式使用Error时，Error('xxerr')和newError('xxerr')得到的结果是一样的，所以可以省略去掉new关键字（注意这个和内置的不一样String、Number等对象，使用new和不使用new返回的类型不同~）；可以通过Error构造函数创建错误对象。发生运行时错误时会抛出一个Error实例。我本人是一个从事多年开发的老web前端程序员。目前正在辞职做自己的web前端私人定制课程。今年年初，我花了一个月的时间整理了一个最适合2019年学习的web前端学习干货，各种框架整理出来送给每一位前端小伙伴。想要获取的可以关注我的头条号，后台私信我：前端，即可免费获取。获取浏览器支持的所有Errors对象这里以chrome为例，打开chrome，在控制台中复制以下代码，回车即可得到结果。Object.getOwnPropertyNames(window).filter(err=>err.endsWith('Error'))得到如下结果：下面我们详细介绍这些错误类型。错误关注指数：5error表示js中的一个错误对象。当运行时发生错误时，会抛出Error的实例对象。当然，我们也可以使用这个对象来构造一些自定义的错误对象。参数可以从caniuse中找到。大多数浏览器都支持message、filename和lineno（发生错误的代码行数），所以我们在使用的时候可以放心使用~JavaScript的错误类型可以通过Error进行扩展，比如定义一个BusinessError如下：classBusinessErrorextendsError{constructor({message,filename,lineno,...params}){super(message,filename,lineno);this.name='BusinessError';//可以修改设置名称Throwingwrongname//TODO:假装有代码。.}}控制台输入：Object.getOwnPropertyNames(window).filter(err=>err.endsWith('Error')).map(el=>window[el].prototype.__proto__.constructor)查看输出：除了第一个，索引1-6日志的原型的构造函数都是Error函数，说明这些错误类型都是继承自Error。下面我们分别了解一下这些错误类型的细节。按注意力指数级别从高(5)到低(0)排序。ReferenceError注意指数：5ReferenceError，当试图引用一个未定义的变量时，会抛出一个ReferenceError。相对来说，这个错误类型还是比较重要的错误类型。我们都知道在js中有一个关键字叫做undefined。但需要明确的是，undefined的真正含义并不是“undefined”。更恰当地说，应该声明一个变量，但未初始化时的值是未定义的。如果你真的直接使用一个未声明的变量，你会出现一个ReferenceError控制台，输入eeee[一个根本没有被声明过的变量]，回车就可以看到错误信息：这种类型的错误在平时比较常见开发过程。下次遇到的话，找找是不是没有名字直接使用的变量~SyntaxError关注索引：5SyntaxError，字面语法错误，官方的解释是——对象代表了一个试图解析语法非法代码的错误，我们知道js是一种解释型语言，在常规的真正运行过程中，会根据词法分析[parseintotokens]=>文法分析[converttoastsyntaxtree]=>解释执行过程。在转成ast的过程中，js引擎会同时校验token，当它发现不合标准的token或者token的顺序不正确时，会报SyntaxError错误；在控制台输入[]{}和1.toFixed()，回车可以看到错误信息：可以看到其中一半会带上是解析哪个token的时候有问题，所以当我们写一些代码的时候不符合js语法规范，我们在开发过程中还是要注意一些基础语法的正确性。TypeError关注索引：5TypeError，字面意思类型错误，官方解释——当用来表示值的对象的类型不是预期的类型时发生的错误，实际的意思其实是给了一个错误的参数，或者一个错误的参数一个被调用，并且没有方法的时候，就会出现这个错误。看例子：当我们调用一个不存在的方法时，会出现TypeError，所以我们在写代码的时候，一定要注意变量的类型。我们知道xx()会调用这个方法，但实际上它不是真正的函数时会报这个错误。RangeError关注索引：3RangeError表示一个数值变量或参数超出了它的有效范围。有一个非常常见的场景：[ERROR]:RangeError:Maximumcallstacksizeexceeded。想必大家都知道，这种情况一般是因为递归太深，或者死循环，在使用newArray的时候才会出现。还有一个比较常见的就是newArray的时候给错了参数，如下：还有一些特殊情况会导致这个错误。有兴趣的同学可以自行了解~URLError关注指数：1URLError，是在相对固定的场景下会出现的错误。decodeURI,encodeURI,encodeURIComponent,decodeURIComponent在处理url过程中出现错误，decode或encode失败时会抛出此类错误。这只要你记得在场景中看到这个类型，就说明是这些API的问题。EvalError关注指数：0EvalError表示eval函数报错的一种类型，但是这种类型在大多数场景下已经不再使用了。JavaScript不会再抛出这种类型的错误，但它会保持这种类型的兼容性，所以你不必过多地相信这种错误类型。除了Error之外的一些错误类型上面我们已经了解了所有继承自Error的错误。接下来，我们整理一下遗留的一些错误。虽然他们不是很常见，但是我们在遇到他们的时候可以留下印象，记住他们。RTCError不关注索引。这是在使用rtc（webinstantmessaging）技术过程中可能出现的一种错误类型。它是继承自DOMException类型的，所以如果你是从事相关内容开发的，还是需要关注一下的，而我们一般不会涉及到，我觉得大家用的时候关注一下也无妨。OverconstrainedError不关注索引。也是在特定场景下需要注意的问题。浏览器提供API，允许开发者获取用户的音频和视频权限。只需调用MediaDevices.getUserMedia(param)，其中param可以使用相同的配置来决定是要音频权限（录音）还是视频权限（摄像头）。如果是摄像头，甚至可以配置需要的分辨率等配置。当配置的分辨率在用户机器上不存在，或者无法达到时，就会报这种错误类型。如果您需要，您可以自行查看这部分信息。附上mdn的地址：https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMediaDOMError关注指数：-1这个API已经被弃用，不用再关注了~MediaError关注指数：4MediaError，用在基于HTMLMediaElement的标签中，比如