参数构造错误 微信_快速掌握前端开发中的常见错误
前言
今天我们来了解一下现在浏览器中支持的一些Error对象,如果你还在经常在捕获到错误的时候不知道该用哪个类型,总是习惯于去throw new Error('xx')的话,相信本文会帮你对error有更进一层的了解~
定义
首先,我们要知道的关于Error的内容如下:
- Error对象是JavaScript的一个内置对象,也就是说所有的js引擎都会默认支持这个对象;
- 当我们以函数的形式去使用Error的时候,Error('xx err') 和 new Error('xx err')得到的结果是一样的,所以你大可以省略掉new关键字(注意这跟String,Number等内置对象是不一样的,后者使用new和不使用new的场景返回的类型是不同的~);
- 通过Error的构造器可以创建一个错误对象。当运行时错误产生时,Error的实例对象会被抛出;
我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。
获取浏览器支持的所有Errors对象
这里以chrome为例,打开chrome,在console中复制下面的代码,然后回车拿到结果
Object.getOwnPropertyNames(window).filter(err => err.endsWith ('Error'))
得到结果如下:
下面我们分别介绍这些错误类型的详情;
Error
关注指数: 5
- Error代表一个js中的错误对象,当运行时候有错误发生,Error的实例对象会被抛出,当然我们也可以利用此对象去构造一些自定义的错误对象。
- 参数,从caniuse上可以查到,大部分的浏览器都支持了message 和 filename 和lineno(发生错误的代码行数),所以我们使用的时候可以放心大胆的用~
- 通过Error可以扩展JavaScript错误类型,举个例子,定义一个BusinessError如下:
class BusinessError extends Error { constructor({message, filename, lineno, ...params}){ super(message, filename, lineno); this.name = 'BusinessError'; // 设置name可以修改抛出错误的name // TODO: 假装有代码。。 }}
- 控制台输入
Object.getOwnPropertyNames(window).filter(err => err.endsWith('Error')).map(el => window[el].prototype.__proto__.constructor)
可以看到输出结果:
除了第一个,从index 1-6 log出来的原型的构造函数都是Error函数,说明这几个错误类型都是继承自Error,下面分别了解一下这几个错误类型的详细内容。
按照关注指数等级从高(5)到低(0)来排序
ReferenceError
关注指数: 5
ReferenceError,当尝试引用一个未被定义的变量时,将会抛出一个 ReferenceError 相对而言,这个错误类型还是一个比较重要的错误类型,我们都知道js里面有一个关键字叫undefined,但是要搞清楚的是,undefined的真正意义并非“未定义”,更贴切的说应该一个变量被声名了,但是未初始化时候的值是undefined,如果真的去直接使用一个未声名的变量,就会出现 ReferenceError
控制台输入 eeee [一个根本未声名过的变量],直接回车就可以看到报错信息:
这个错误类型在平时开发过程中还是比较常见的,如果下次在遇到,就找找是不是哪个变量没有声名就直接使用了~
SyntaxError
关注指数:5
SyntaxError, 字面意思语法错误,官方解释是-对象代表尝试解析语法上不合法的代码的错误,我们知道js是一个解释性语言,在正真运行的过程中会按照 词法分析[解析成tokens] => 语法分析[转为ast语法树] => 解释执行的过程,转为ast的过程中,js的引擎会同时校验tokens,当它发现不合规范的tokens或者顺序不正确的token的时候,就会报出SyntaxError这个错误;
控制台输入 []{} 和 1.toFixed() ,回车看报错信息:
可以看到一半都会带上是解析到哪个token的时候出的问题,所以当我们写了一些不符合js语法规范的代码,开发过程中还是要注意一些基本语法的正确性的。
TypeError
关注指数:5
TypeError,字面意思类型错误,官方解释-对象用来表示值的类型非预期类型时发生的错误,实际的意思其实就是当给了一个错误的参数,或者调用了一个错误的,并不存在的方法的时候,就会出现这个错误,看例子:
当我们调用了一个不存在方法的时候,就会出现TypeError,所以当我们写代码的时候,一定要注意变量的类型,我们知道xx()会去调用这个方法,但是实际上它并不是一个真正function的时候就会报这个错。
RangeError
关注指数:3
RangeError 表示数值变量或参数超出其有效范围,有一种非常常见的场景:[ERROR] : RangeError: Maximum call stack size exceeded.,想必大家都知道这种情况一般是递归过深或者死循环的时候会出现,还有一种比较常见的是new Array的时候给了错误的参数,如下:
还有一些特殊的情况会导致这个错误,有兴趣的同学可以去自行了解一下~
URLError
关注指数:1
URLError,是一个比较固定场景下会出现的错误,decodeURI, encodeURI, encodeURIComponent, decodeURIComponent当这几个方法在处理url过程中出现错误导致decode或者encode失败的情况下,就会抛出这个类型的错误,这个场景只要记住看到这个类型,就说明是这几个api的问题就可以了。
EvalError
关注指数:0
EvalError 代表了一个关于eval函数报错的类型,但是目前大部分场景下已经用不到这个类型了,JavaScript不会再抛出此类型的错误,但是会保持这个类型的兼容性,所以对这个错误类型可以不必给与太多的关系。
Error以外的一些错误类型
以上我们就把所有继承自Error的错误都了解完了,下面我们整理一下剩余的一些错误,虽然不是很常见,但是留个印象,遇到的时候能想起来就可以了。
RTCError
这个就不给关注指数了,这个是在使用rtc(网页即时通讯)技术过程中可能会出现的一个错误类型,它是继承自DOMException这个类型的,所以如果你正在从事相关内容开发的话还是需要关注一下的,而我们平常不涉及到的,我觉得等你用的时候再去关注也是没啥问题的。
OverconstrainedError
这个也不给关注指数,同样是一个特定场景才需要关注的问题,浏览器提供了让开发者向用户获取音频和视频权限的api,通过调用MediaDevices.getUserMedia(param)即可,其中param中可以同配置来决定是要音频的权限(录音)还是视频的权限(摄像头),如果是摄像头,甚至可以配置需要的分辨率等配置,当配置的分辨率用户机器上没有,或者达不到的时候,就会报这个错误类型,如果有需要的小伙伴可以自行去查阅这部分的资料~,我附上mdn的地址:https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
DOMError
关注指数:-1
这个API已经被Deprecated了,不要在关注了~
MediaError
关注指数:4
MediaError,用在基于HTMLMediaElement的标签,比如
webkitSpeechRecognitionError
这个也不给关注指数,这个错误首先是基于一个浏览器的实验特性-语音识别来的,因为是在chrome中所以会有webkit前缀,实际上应该是不带私有前缀的,这个错误会在语音识别本身过程出错的时候被抛出,有需要的小伙伴可以到这里:https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition去查看相关的内容
总结
以上,就把所有chrome浏览器中支持的错误类型都讲完了,可能在日常开发中需要关注的还是Error以及继承自Error的一些错误,至少要做到错误发生的时候知道是什么问题导致的,也好快速定位相关的问题代码所在,如果你有什么好的想法或者建议,欢迎评论留言~
作者:Guokai
链接:https://juejin.im/post/5ddf2c6a5188256ed7367387
参数构造错误 微信_快速掌握前端开发中的常见错误相关推荐
- cropper.js 图像旋转问题_快速提高前端开发效率:10个JavaScript图像处理库
用JavaScript处理图像可能非常困难且繁琐.幸运的是,有许多库可以使事情变得简单得多.以下就是一些前端开发经常要使用到的图片处理库,和千锋广州前端小编一起来看看吧! 如果发现有用的东西,请尝试将 ...
- Hadoop-2.8.0集群搭建、hadoop源码编译和安装、host配置、ssh免密登录、hadoop配置文件中的参数配置参数总结、hadoop集群测试,安装过程中的常见错误
25. 集群搭建 25.1 HADOOP集群搭建 25.1.1集群简介 HADOOP集群具体来说包含两个集群:HDFS集群和YARN集群,两者逻辑上分离,但物理上常在一起 HDFS集群: 负责海量数据 ...
- aop执行跳过某个方法_简谈前端开发中的AOP(一) -- 前端AOP的实现思路
前言 本意不想用太长的篇幅,来阐述这个话题.但是有些概念和设计思路有必要讲清楚,以便于搞清楚其深层次的内在逻辑.这是我一直遵从的"知其然,知其所以然"的原则.首先,本文将简单的阐述 ...
- MVC开发中的常见错误-06-无法在发送 HTTP 标头之后进行重定向。
通过监视可以看到: 原来是跳转到登录页面后,登录页面中又发送了一个GeMneuItems的请求,用于加载页面图片 转载于:https://www.cnblogs.com/YK2012/p/667254 ...
- MVC开发中的常见错误-04-“System.NullReferenceException”类型的异常在 BBFJ.OA.WebApp.dll 中发生,但未在用户代码中进行处理...
未将对象引用设置到对象实例,又名空指针异常,伴随程序员开发的一生. 查看详细信息得知: SetUserRoleInfo() 首先想到的是 IBLL.IRoleInfoService RoleInfo ...
- MVC开发中的常见错误-02-在应用程序配置文件中找不到名为“OAEntities”的连接字符串。...
在应用程序配置文件中找不到名为"OAEntities"的连接字符串. 分析原因:由于Model类是数据库实体模型,通过从数据库中引用的方式添加实体,所以会自动产生一个数据库连接字符 ...
- “前端开发中的三种定时任务及其应用“
前端定时任务是指在一定时间间隔内,自动执行指定的操作或函数.在前端开发中,定时任务被广泛应用于诸如数据更新.定时提醒.定时刷新页面等方面.在本文中,我们将介绍前端中常见的三种定时任务,分别是 setT ...
- python移动端web开发代码_移动web前端开发,前端开发工作总结,移动端页面开发-我主页-一个前端程序猿的博客...
热门推荐 html/css 一.escape和它们不是同一类简单来说,escape是对字符串(string)进行编码(而另外两种是对URL),作用是让它们在所有电脑上可读.编码之后的... 标签: 0 ...
- 中虚数怎么表示_英文论文写作中的常见错误
之前写过一篇如何写中文论文,这次就写个英文论文写作中的常见错误吧.都是平时自己整理总结的,也是一路摸爬滚打的见证吧.如有错误,欢迎批评指正.未完待续...... 1.逗号粘连: 两个独立的句子间要用句 ...
最新文章
- 大牛实战归纳——Kafka架构原理
- R语言读取excel文件实战(read.xlsx函数、read_excel函数、read.xlsx函数、Write函数)
- WebBrowser脚本错误的完美解决方案
- IE6 下图片少一块
- Linux字符界面和图形界面
- python 连通区域_python skimage 连通性区域检测方法
- 从职业方向,谈程序员如何突破成长瓶疾,我们该怎么去学习?
- nginx 1.11.0实现http和https正向代理
- [2018.07.14 T1] B君的第四题
- pos 指令集 linux,Linux系统下10大开源POS系统
- 加班又如何,我要薅资本家羊毛《打工人的那些事》
- 2021腾讯校招前端一面
- 使用 VS 打开 VC++6.0 创建的 MFC 项目
- 京东商品详情数据接口(APP端,H5端),实时了解商品价格走势,接口代码教程
- [玩转北京] 北京最值得你一看的博物馆大全
- 快速开发分享功能,一键分享到微博、微信等平台。
- 【Bug修复】Room数据库 The columns returned by the query does not have the fields......
- 如何用matlab画圆环,利用内外径画圆环
- IA32 gnu assembly 32 bit instruction pretend to be 64 bit instruction
- 暴走gif失落的出处_暴走gif表情包 - 暴走gif微信表情包 - 暴走gifQQ表情包 - 发表情 fabiaoqing.com...
热门文章
- TensorFlow如何充分使用所有CPU核数,提高TensorFlow的CPU使用率,以及Intel的MKL加速
- pip 系统无法将文件移到不同的磁盘驱动器 的问题
- Keras中几个重要函数用法
- servlet中的session不一定会被创建
- Ubuntu 14.04 上使用 Nginx 部署 Laravel 4.2
- IP协议号(TCP协议号/UDP协议号)
- Cissp-【第3章 安全工程】-2021-2-18(237页-248页)
- mysql int长度能到100嘛_MySQL int 类型不是最多只能到 4,294,967,295 么,怎么会有 int(11)?...
- neo4j中文社区 php,neo4j 社区版搭建教程
- 输出nginx执行过程中函数调用关系