7个你应该知道的JS原生错误类型


Posted in Javascript onApril 29, 2021

概述

从浏览器控制台到运行 Node.js的终端,我们到处都会看到错误。本文的重点是概述我们在js开发过程中可能遇到的错误类型。

提示:良好的错误提示会导致快速而无痛的发展经历与缓慢而痛苦的发展经历之间的区别。在编写可重用的代码时,请确保自己在编写清晰易懂的错误处理代码。

1. RangeError

当数字超出允许的值范围时,将会抛出此错误。

例如

const l = console.logconst arr = [90,88]
arr.length=90**99

我们有一个数组,带有两个元素的 arr。接下来,尝试将数组扩展为包含90**99 == 2.9512665430652753e+193个元素。

这个数字超出了数组大小可以增长的范围。运行它会抛出 RangeError:

$ node errors

errors.js:4

arr.length=90**99

 ^RangeError: Invalid array length

因为我们要增加 arr 数组的大小超出了 JS 指定的范围。

2. ReferenceError

当对变量或项目的引用被破坏时,将会引发此错误。那是变量或项目不存在。

例如

const l=console.logconst cat = "cat"
cat
dog

有一个变量cat被初始化为 “cat”。接下来引用了cat变量和dog变量。cat变量存在,而dog变量不存在。

cat将返回 “cat”,而dog将引发引用错误,因为在环境记录中找不到名称dog。

$ node errors

errors.js:3

dog

^ReferenceError: dog is not defined

每当我们创建或定义变量时,变量名称都会写入环境记录中。环境记录就像键值存储一样,

+-------------+

| Key | Value |

---------------

| cat | "cat" |

+-------------+

每当我们引用变量时,它都会存储程序中定义的变量。当在记录中找到环境值并提取并返回值时,将以该变量的名称作为关键字在环境记录进行搜索。调用尚未定义的函数。

现在,当我们创建或定义一个没有赋值的变量时。变量将其键作为变量名写入环境记录,但其值将会保持未定义的状态。

var catenv record

+-----------------+

| Key | Value |

-------------------

| cat | undefined |

+-----------------+

稍后为变量分配值时,将在环境记录中搜索该变量,当发现它未定义值时,该赋值将被覆盖。

var cat

cat = "cat"env record

+-------------+

| Key | Value |

---------------

| cat | "cat" |

+-------------+

所以当在环境记录中找不到变量名时,JS 引擎将引发 RefernceError。

+-------------+

| Key | Value |

---------------

| cat | "cat" |

+-------------+cat // "cat", yes, :) it's there

dog // :( what's this? can't find it

注意:未定义的变量不会抛出 ReferenceError,因为它在于环境记录中的值尚未设置。

3. SyntaxError

这是最常见的错误。当我们输入 JS 引擎不能理解的代码时,就会发生这个错误。

JS 引擎在解析期间捕获了这个错误。在 JS 引擎中,我们的代码经历了不同的阶段,然后才能在终端上看到结果。

  • 标记化
  • 解析
  • 解释

标记化将代码的源分解为各个单元。在此阶段,将对数字、关键字、文字、运算符进行分类并分别标记。

接下来,生成的标记流将会传递到解析阶段,由解析器处理。这是从标记流生成 AST 的地方。 AST 是代码结构的抽象表示。

在标记化和解析这两个阶段,如果我们代码的语法不符合 JS 的语法规则,则会使该阶段失败并引发 SyntaxError。例如:

const l = console.loglet cat h = "cat"

代码中的 “h” 代表什么?这个 “h” 破坏了代码。

$ node errors

errors.js:3

let cat h = "cat"

 ^SyntaxError: Unexpected identifier

看,Node.js 指出了问题的所在。它说 “h” 是意外的,它破坏了cat 变量的声明。

因此,可以说语法错误在解析或编译期间发生。

4. TypeError

当其他 NativeError 对象中没有适当的失败原因的指示时,TypeError 用于指示操作失败。

对错误的数据类型执行操作时会发生 TypeError,例如:

如果我们尝试将数字转换为大写,如下所示:

const num = 123
num.toUpperCase()

这将引发TypeError

$ node errors

errors.js:4

num.toUpperCase()

 ^TypeError: num.toUpperCase is not a function

因为toUpperCase函数需要字符串数据类型。toUpperCase函数是有意通用的;它不需要其this值是String对象。因此,可以将其转移到其他种类的对象中用作方法。

只有字符串才会转换为大写或小写形式,如果我们在 Objects、Boolean、Symbol、null、undefined 数据类型上调用toUpperCase函数,则将会得到 TypeError,因为它操作的数据类型错误。

5. URIError

这表明使用了一种与其定义不兼容的全局 URI 处理函数。

JS 中的 URI(统一资源指示符)具有以下功能:decodeURI、decodeURIComponent 等。

如果我们用错误的参数去调用其中任何一个,将得会到一个 URIError。

decodeURI("%")
^URIError: URI malformed

encodeURI用于获取 URI 的未编码版本。 “%” 不是正确的 URI,因此引发了URIError。

当 URI 编码或解码出现问题时,会引发 URIError。

6. EvalError

当使用全局eval()函数时,这用于识别错误。

根据 EcmaSpec 2018 版:

此规范当前未使用此异常。保留它目的是为了与本规范的先前版本兼容。

7. InternalError

该错误在 JS 引擎内部发生,特别是当它有太多数据要处理并且栈增长超过其关键限制的时侯。

当 JS 引擎被过多的递归和切换情况等淹没时,就会发生这种问题

switch(num) {
 case 1:
 ...
 break
 case 2:
 ...
 break
 case 3:
 ...
 break
 case 4:
 ...
 break
 case 5:
 ...
 break
 case 6:
 ...
 break
 case 7:
 ...
 break
 ... up to 1000 cases
 }

以下是一个简单的过多递归的例子:

function foo() {
    foo()
}
foo()

总结

正如我们所说,谁都会犯错误。就我们敲代码这件事而言,这是一个稳定的事件。为了克服它,我们需要知道可以抛出的原生错误的类型。本文中列出了它们,并提供了一些示例来说明它们是如何引发的。

所以无论什么时候在终端或浏览器中引发错误,你都可以轻松发现错误产生的位置和方式,并能够编写更好、更不易出错的代码。

以上就是7个你应该知道的JS原生错误类型的详细内容,更多关于JS原生错误类型的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
如何使用JavaScript策略模式校验表单
Apr 29 #Javascript
react中props 的使用及进行限制的方法
Apr 28 #Javascript
React Hook用法示例详解(6个常见hook)
vue使用v-model进行跨组件绑定的基本实现方法
为什么node.js不适合大型项目
JavaScript控制台的更多功能
Apr 28 #Javascript
You might like
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
用PHP和ACCESS写聊天室(四)
2006/10/09 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
php中namespace及use用法分析
2016/12/06 PHP
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
深入解析Python中函数的参数与作用域
2016/03/20 Python
Python之reload流程实例代码解析
2018/01/29 Python
Python subprocess模块常见用法分析
2018/06/12 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
python 操作hive pyhs2方式
2019/12/21 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
毕业论文评语大全
2014/04/29 职场文书
导航工程专业自荐信
2014/09/02 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
民主生活会汇报材料
2014/12/15 职场文书
关于python中模块和重载的问题
2021/11/02 Python