JS中异常抛出和处理方法图文详解

目录
  • 抛出异常
  • 抛出的表达式类型
    • 基本数据类型
    • 对象
    • 类的实例对象
    • Error 类的实例对象
    • Error 的子类
  • 处理异常
  • js中常见的系统异常:
  • 总结

抛出异常

在 js 中,有时候我们需要处理一些异常或错误。比如编写的某个函数所接收的参数要求是 Number 类型的,如果在该函数被调用时传入的是字符串,就需要发出提醒。此时我们可以使用 throw 语句来抛出个异常:

// 例 1
function fn(num) {
  if (typeof num !== 'number') throw '需传入数字'
  console.log(num) // 不会打印
}

fn('0')
console.log('不会执行')

执行例 1 的代码结果如下:

因为第 7 行传入的是字符串,所以会导致第 3 行 throw 语句的执行,那么在函数 fn 内,之后的语句就不会执行了,这点和 return 一样。因为我们没有对第 7 行的 fn 函数的执行做异常捕获的操作,所以程序终止,其后的第 8 行也不会执行。

抛出的表达式类型

基本数据类型

例 1 中我们就是是抛出了一个基本数据类型 —— 字符串,当然还可以是数字等其它基本类型的数据。

对象

我们也可以抛出一个对象,这样可以传递更多的信息:

// 例 1.1
function fn(num) {
  if (typeof num !== 'number')
    throw {
      code: -1,
      msg: '类型错误'
    }
  console.log(num)
}

类的实例对象

如果每次抛出异常我们都像例 1.1 这样写个对象会比较繁琐,所以可以创建一个类,比如例 1.2 的 myError,帮我们创建包含了错误信息的对象:

// 例 1.2
class myError {
  constructor(code, msg) {
    this.code = code
    this.msg = msg
  }
}
function fn(num) {
  if (typeof num !== 'number') throw new myError(-1, '类型错误')
  console.log(num)
}

这样执行 fn 时,如果不做异常捕获就会打印如下的报错信息:

Error 类的实例对象

事实上我们并不需要自己定义一个类来创建错误对象,js 本身就为我们提供了这么一个类 Error,构建错误对象时传入错误的描述信息即可:

// 例 1.3
function fn(num) {
  if (typeof num !== 'number') throw new Error('类型错误')
  console.log(num)
}

fn('0')

在 node 中执行例 1.3,得到的结果会比我们自己定义的 myError多出函数的调用栈的信息:

我们可以直接通过 Error 实例对象的 stack 属性查看调用栈,还有 messagename

// 例 1.3.1
function fn(num) {
  if (typeof num !== 'number') {
    const err = new Error('类型错误')
    console.log('name:', err.name)
    console.log('message:', err.message)
    console.log('stack:', err.stack)
    throw err
  }
  console.log(num)
}
fn('0')

在 node 中执行例 1.3.1,第 5 ~ 7 的输出结果如下:

如果我们对例 1.3 进行些改造,不直接执行 fn('0') 而是让它在 bar 函数内被调用,然后在 foo 函数内调用 bar ,最后执行 foo()

// 例 1.3.2
function fn(num) {
  if (typeof num !== 'number') throw new Error('类型错误')
  console.log(num)
}
function foo() {
  bar()
}
function bar() {
  fn('0')
}
foo()

就可以看到调用栈信息又多了 2 条:

Error 的子类

Error 还有几个子类,比如上面的这些例子,因为属于类型错误,所以可以用更具体的 TypeError 类来生成错误对象:

// 例 1.4
function fn(num) {
  if (typeof num !== 'number') throw new TypeError('类型错误')
  console.log(num)
}
fn('0')

另外还有诸如引用错误 ReferenceError 和语法错误 SyntaxError 等。

处理异常

若一个异常被抛出而最终没有被捕获,那么会导致程序的终止执行。之所以加了“最终”两个字,是因为如果函数执行时抛出的异常没有被处理,异常会传递给执行了该函数的函数调用。以例 1.3.2 为例,第 10 行执行 fn('0') 导致抛出了异常,我们又没有在第 10 行对fn('0') 进行异常捕获,那么异常就会传给第 7 行的 bar(),再传给第 12 行,也就是最顶层的 foo(),此时还是没有对异常进行处理,才会导致报错并终止程序的运行。 只要我们在异常传递过程中的任何一处用 try...catch 语句对异常进行了捕获,比如下面的例 2,那么程序就不会被终止,异常会作为参数传递给 catch 子句,也就是第 15 行的 error

// 例 2
function fn(num) {
  if (typeof num !== 'number') throw new Error('类型错误')
  console.log(num) // 不会执行
}
function foo() {
  bar()
}
function bar() {
  fn('0')
}
try {
  foo()
  console.log('我不会继续执行')
} catch (error) {
  console.log('error:', error.message)
} finally {
  console.log('我无论是否有异常抛出都会执行')
}
console.log('我会继续执行')

执行例 2 的结果如下:

可以看到例 2 第 17 行还有个 finally 子句,无论是否有异常抛出或捕获它总是执行。

P.S. 从 ES10(ES2019)开始,第 15 行的 catch 子句可以省略掉 (error),也就是不去获取错误信息。

js中常见的系统异常:

  • EvalError: raised when an error occurs executing code in eval()   当一个错误发生在()执行的代码
  • RangeError: raised when a numeric variable or parameter is outside of its valid range  当一个数值变量或参数超出其有效范围时引发的
  • ReferenceError: raised when de-referencing an invalid reference  无效的饮用
  • SyntaxError: raised when a syntax error occurs while parsing code in eval()  当发生语法错误在()解析代码,而
  • TypeError: raised when a variable or parameter is not a valid type  当一个变量或参数不是一个有效的类型时引发
  • URIError: raised when encodeURI() or decodeURI() are passed invalid parameters  当encodeuri()或decodeuri()传递了无效的参数

注:上面的六种异常对象都继承自Error对象:

try {
  throw new Error("Whoops!");
} catch (e) {
  console.log(e.name + ": " + e.message);
}

总结

到此这篇关于JS中异常抛出和处理方法的文章就介绍到这了,更多相关JS异常抛出与处理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • javascript中的try catch异常捕获机制用法分析

    本文实例讲述了javascript中的try catch异常捕获机制用法.分享给大家供大家参考,具体如下: 1.跟Java一样,JavaScript也具有try catch块,进行异常捕获的机制. (1)典型的try catch语句 try{ } catch{ } finally{ } 跟java中一样,JS中最为典型的try catch语句也同样分为了三个部分,try用于捕获异常,catch用于处理异常,而finally用于关闭资源等后续操作. 举例: try{ throw "error&qu

  • JS中的异常处理方法分享

    js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要不用户体验不好) 复制代码 代码如下: window.onerror=function(){return true;} 下面是为了获取js异常信息,方便开发者找回问题 1,try...catch... 复制代码 代码如下: <script type="text/javascript">var txt=""function message(){try   {   adddlert

  • 详解JavaScript中的异常处理方法

    有三种类型的编程错误:(1)语法错误和(2)运行时错误(3)逻辑错误: 语法错误: 语法错误,也被称为解析错误,在编译时进行传统的编程语言,并出现在JavaScript解释时. 例如,下面一行将导致一个语法错误,因为它缺少一个右括号: <script type="text/javascript"> <!-- window.print(; //--> </script> 当一个语法错误在JavaScript中出现,只有在同一个线程中包含的语法错误的影响

  • js中的异常处理try...catch使用介绍

    在JavaScript可以使用try...catch来进行异常处理.例如: 复制代码 代码如下: try { foo.bar();} catch (e) { alert(e.name + ": " + e.message);} 目前我们可能得到的系统异常主要包含以下6种: EvalError: raised when an error occurs executing code in eval() RangeError: raised when a numeric variable o

  • 详解js前端代码异常监控

    阅读目录 什么是前端代码异常 window.onerror 写一个js报错的上报库 注意点: 缺点: 在平时的工作,js报错是比较常见的一个情景,尤其是有一些错误可能我们在本地测试的时候测试不出来,当发布到线上之后才可以发现,如果抢救及时,那还好,假如很晚才发 现,那就可能造成很大的损失了.如果我们前端可以监控到这种报错,并及时上报的话,那我们的问题就比较好解决了.所以我们今天来聊聊前端代码的异常监控 什么是前端代码异常  一般语法错误以及运行时错误,浏览器都会在console里边体现出错误信息

  • javascript 异常处理使用总结

    JavaScript中的异常可以用try..catch..finally语句来处理,也可以手动的来抛出异常. 1.使用try..catch..finally语句来处理异常 js代码在执行过程中如果出现异常,会手动创建一个异常类对象,该异常类对象将被提交给浏览器,这个过程称为"抛出异常".当浏览器接收到一场对象时,会寻找能处理这一异常的代码并把当前异常对象提交给其处理,这一过程被称为"捕获异常".try..catch..finally语句的基本语法格式为: 复制代码

  • js异常捕获方法介绍

    复制代码 代码如下: <script type="text/javascript"> try{ ...some code... }catch(e){ ...some code... //处理错误 throw(e.name); //抛出异常 }finally{<BR> // 完成后执行的语句块,非必须<BR>} </script> javascript Error 对象: name: 错误名称number: 错误号description:

  • JS中异常抛出和处理方法图文详解

    目录 抛出异常 抛出的表达式类型 基本数据类型 对象 类的实例对象 Error 类的实例对象 Error 的子类 处理异常 js中常见的系统异常: 总结 抛出异常 在 js 中,有时候我们需要处理一些异常或错误.比如编写的某个函数所接收的参数要求是 Number 类型的,如果在该函数被调用时传入的是字符串,就需要发出提醒.此时我们可以使用 throw 语句来抛出个异常: // 例 1 function fn(num) { if (typeof num !== 'number') throw '需

  • node.js中fs文件系统模块的使用方法实例详解

    本文实例讲述了node.js中fs文件系统模块的使用方法.分享给大家供大家参考,具体如下: node.js中为我们提供了fs文件系统模块,实现对文件或目录的创建,修改和删除等操作. fs模块中,所有的方法分为同步和异步两种实现. 有 sync 后缀的方法为同步方法,没有 sync 后缀的方法为异步方法. 一.文件的整个读取 const fs = require('fs'); //参数一表示读取的文件 //参数二表示读取的配置,{encoding:'null', flag:'r'} //encod

  • JS中的Replace()传入函数时的用法详解

    replace方法的语法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),reExp可以是正则表达式对象(RegExp)也可以是字符串(string),replaceText是替代查找到的字符串.. 废话不多说了,直接给大家贴代码了,具体代码如下所示: <script> var str = "a1ba2b"; var reg = /a.b/g; str = str.replace(reg,func

  • JS中获取 DOM 元素的绝对位置实例详解

    在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

  • vue 中动态绑定class 和 style的方法代码详解

    先列举一些例子 class="['content',{'radioModel':checkType}]" class="['siteAppListDirNode',{open:appitem.open==true}]" class="['portalCenterMenu',{showNav:!showHideNav,hideNav:showHideNav}]" class="{shortcutMenuShow:!showHideNav,

  • 在vue项目中优雅的使用SVG的方法实例详解

    1.基础介绍 本文旨在介绍如何在项目中配置和方便的使用svg图标. 本文以vue项目为例,当然在react中的使用原理基本相似. svg图标可以直接通过img标签来使用,也可当做icon来使用. 本文是参考了鑫旭大佬的文章:SVG Sprite技术介绍. 2.配置 安装svg-sprite-loader.通过vue-cli脚手架创建的项目默认情况下会使用 url-loader 对svg进行处理,所以需要处理下: { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, l

  • Android Studio 中运行 groovy 程序的方法图文详解

    Groovy简介 Groovy是一种基于JVM(Java虚拟机)的敏捷开发语言,它结合了Python.Ruby和Smalltalk的许多强大的特性,Groovy 代码能够与 Java 代码很好地结合,也能用于扩展现有代码.由于其运行在 JVM 上的特性,Groovy也可以使用其他非Java语言编写的库. Groovy 是 用于Java虚拟机的一种敏捷的动态语言,它是一种成熟的面向对象编程语言,既可以用于面向对象编程,又可以用作纯粹的脚本语言.使用该种语言不必编写过多的代码,同时又具有闭包和动态语

  • java 中枚举类enum的values()方法的详解

    java 中枚举类enum的values()方法的详解 前言: 关于枚举,相信使用的已经很普遍了,现在主要写的是枚举中的一个特殊方法,values(), 为什么说特殊呢,因为在Enum 的 API 文档中也找不到这个方法.接下来就看看具体的使用. 理论上此方法可以将枚举类转变为一个枚举类型的数组,因为枚举中没有下标,我们没有办法通过下标来快速找到需要的枚举类,这时候,转变为数组之后,我们就可以通过数组的下标,来找到我们需要的枚举类.接下来就展示代码了. 首先是我们自己的枚举类. public e

  • Unity中协程IEnumerator的使用方法介绍详解

    在Unity中,一般的方法都是顺序执行的,一般的方法也都是在一帧中执行完毕的,当我们所写的方法需要耗费一定时间时,便会出现帧率下降,画面卡顿的现象.当我们调用一个方法想要让一个物体缓慢消失时,除了在Update中执行相关操作外,Unity还提供了更加便利的方法,这便是协程. 在通常情况下,如果我们想要让一个物体逐渐消失,我们希望方法可以一次调用便可在程序后续执行中实现我们想要的效果. 我们希望代码可以写成如下所示: void Fade() { for (float f = 1f; f >= 0;

  • .NET 中配置从xml转向json方法示例详解

    目录 一.配置概述 二.配置初识 三.选项模式 四.选项依赖注入 五.其它配置 六.托管模式 一.配置概述 在.net framework平台中我们常见的也是最熟悉的就是.config文件作为配置,控制台桌面程序是App.config,Web就是web.config,里面的配置格式为xml格式. 在xml里面有系统生成的配置项,也有我们自己添加的一些配置,最常用的就是appSettings节点,用来配置数据库连接和参数. 使用的话就引用包System.Configuration.Configur

随机推荐