详解JavaScript中的异常处理方法


Posted in Javascript onJune 16, 2015

 有三种类型的编程错误:(1)语法错误和(2)运行时错误(3)逻辑错误:
语法错误:

语法错误,也被称为解析错误,在编译时进行传统的编程语言,并出现在JavaScript解释时。

例如,下面一行将导致一个语法错误,因为它缺少一个右括号:

<script type="text/javascript">
<!--
window.print(;
//-->
</script>

当一个语法错误在JavaScript中出现,只有在同一个线程中包含的语法错误的影响,在其他线程的代码被执行;代码依赖于包含错误的代码不会被执行。
运行时错误:

执行(编译/解释后)在运行时错误,也被称为异常,会引发。

例如,下面一行将导致运行时错误,因为这里的语法是正确的,但在运行时它正试图调用非存在的方法:

<script type="text/javascript">
<!--
window.printme();
//-->
</script>

例外情况也影响到它们发生的线程,允许其他JavaScript线程继续正常执行。
逻辑错误:

逻辑错误可能是最困难的类型的错误跟踪。这些错误是不是一个语法或运行时错误的结果。相反,当发生一个错误的驱动脚本逻辑,你没有得到所期望的结果。

你可能无法抓到这些错误,因为这取决于程序是什么类型的逻辑是基于业务需求。
try...catch...finally 语句:

JavaScript的最新版本中添加的异常处理能力。JavaScript实现 try ... catch... finally结构以及抛出操作来处理异常。

你可以捕获程序员生成和运行时异常,但不能捕获JavaScript语法错误。

这里是 try...catch...finally 块语法:

<script type="text/javascript">
<!--
try {
  // Code to run
  [break;]
} catch ( e ) {
  // Code to run if an exception occurs
  [break;]
}[ finally {
  // Code that is always executed regardless of 
  // an exception occurring
}]
//-->
</script>

try块必须后跟只有一个catch块或者一个finally块(或两者之一)。当一个异常在try块时,除被放置在e和catch块被执行。 try/catch语句后的可选finally块无条件地执行。
示例:

下面是一个例子,我们正试图调用一个不存在的函数,这将引发异常。让我们来看看它的行为,不具有try ... catch:

<html>
<head>
<script type="text/javascript">
<!--
function myFunc()
{
  var a = 100;

  alert("Value of variable a is : " + a );
 
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

现在,让我们尝试使用 try ... catch 捕获这个异常,并显示一个用户友好的消息。也可以取消此消息,如果要隐藏从用户这个错误。

<html>
<head>
<script type="text/javascript">
<!--
function myFunc()
{
  var a = 100;
  
  try {
   alert("Value of variable a is : " + a );
  } catch ( e ) {
   alert("Error: " + e.description );
  }
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

可以使用finally块将永远try/catch语句后,无条件地执行。下面是一个例子:

<html>
<head>
<script type="text/javascript">
<!--
function myFunc()
{
  var a = 100;
  
  try {
   alert("Value of variable a is : " + a );
  }catch ( e ) {
   alert("Error: " + e.description );
  }finally {
   alert("Finally block will always execute!" );
  }
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

throw 语句:

可以使用throw语句来提高你的内置异常或自定义异常。后来这些异常可以被捕获并可以采取适当的行动。

以下是表示throw语句的用法的例子。

<html>
<head>
<script type="text/javascript">
<!--
function myFunc()
{
  var a = 100;
  var b = 0;
  
  try{
   if ( b == 0 ){
     throw( "Divide by zero error." ); 
   }else{
     var c = a / b;
   }
  }catch ( e ) {
   alert("Error: " + e );
  }
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

您可以使用字符串,整数,布尔或对象在一个函数抛出一个异常,那么可以捕捉例外在相同的函数,我们在上面做了,或者使用try ... catch块在其他的函数。
onerror() 语法

onerror事件处理程序是第一个特点,方便JavaScript处理错误。错误事件被触发窗口对象,每当一个异常页面上出现。例如:

<html>
<head>
<script type="text/javascript">
<!--
window.onerror = function () {
  alert("An error occurred.");
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

onerror事件处理程序提供了三条信息,以找出错误的确切性质:

  1.     错误消息 . 浏览器将显示给定的错误相同的消息
  2.     URL . 在发生错误的文件
  3.     行号. 在导致错误的URL给出的行号

这里是例子来说明如何提取此信息

<html>
<head>
<script type="text/javascript">
<!--
window.onerror = function (msg, url, line) {
  alert("Message : " + msg );
  alert("url : " + url );
  alert("Line number : " + line );
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

可以显示在任何方式,你觉得这是更好的提取信息。

可以使用onError方法来显示错误消息的情况下没有在如下加载图像的任何问题:

<img src="myimage.gif"
  onerror="alert('An error occurred loading the image.')" />

可以使用的onerror许多HTML标记错误的情况下显示相应的信息。

Javascript 相关文章推荐
对象特征检测法判断浏览器对javascript对象的支持
Jul 25 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
vue实现抽屉弹窗效果
Nov 15 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 #Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 #Javascript
jQuery封装的tab选项卡插件分享
Jun 16 #Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 #Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 #Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 #Javascript
Bootstrap基础学习
Jun 16 #Javascript
You might like
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
JS变量及其作用域
2017/03/29 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
pytorch permute维度转换方法
2018/12/14 Python
opencv与numpy的图像基本操作
2019/03/08 Python
python实现远程控制电脑
2019/05/23 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
2014年党支部承诺书
2014/05/30 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android