详解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 13 Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
浅析java线程中断的办法
Jul 29 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
在Chrome DevTools中调试JavaScript的实现
Apr 07 Javascript
javascript实现支付宝滑块验证码效果
Jul 24 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
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
javascript 面向对象编程基础:继承
2009/08/21 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
Vue常见面试题整理【值得收藏】
2018/09/20 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
外贸学院会计专业应届生求职信
2013/11/14 职场文书
应用心理学个人的求职信
2013/12/08 职场文书
创意活动策划书
2014/01/15 职场文书
亲子读书活动方案
2014/02/22 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
争做文明公民倡议书
2014/08/29 职场文书
合作协议书模板
2014/10/10 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP