【转】详解JavaScript中的异常处理方法

有三种类型的编程错误:(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标记错误的情况下显示相应的信息。

您可能感兴趣的

  1. 详解1000+项目数据分析出来的10大JavaScript错误
  2. 10个用Console来Debug的高级技巧
  3. 有浏览器的地方就有Fundebug
  4. Debug前端HTML/CSS

原文地址:https://www.cnblogs.com/curationFE/p/handle_javascript_exception.html

时间: 2024-10-09 03:31:31

【转】详解JavaScript中的异常处理方法的相关文章

详解javascript中的this对象

详解javascript中的this对象 前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的设计模式来实现面向对象的编程,其中this "指针"就是实现面向对象的一个很重要的特性.但是this也是Javascript中一个非常容易理解错,进而用错的特性.特别是对于接触静态语言比较久了的同志来说更是如此. 示例说明 我们先来看一个最简单的示例: <script type=&q

详解JavaScript中的arc的方法

今天说说JavaScript在网页中画圆的函数arc! 一.arc所需要的参数设置 1 arc(x, y, radius, startAngle, endAngle, counterclockwise); 其中x,y,radius都很容易理解,那么重点说说startAngle,endAngle和counterclockwise三个参数!    二.arc参数详解 1,startAngle和endAngle分别指圆开始的角度和结束的角度,手册上面说的是开始的角度为0,结束的角度为Math.PI*2

详解 JavaScript 中 splice() 方法

splice() 方法是一个比较少用的方法,但是功能确实很好,并且在我们 coding 的时候,经常有需要 splice() 方法,先介绍一下该方法. 在 JavaScript 中 splice() 方法,是一个很强的数组方法,它有多种用法. splice() 方法主要用来向数组中添加新的值. 1.删除(需要2个参数,第一个参数为"起始位",第二个参数表示删除多少个) 1 //创建数组 2 var array = []; 3 //添加值 4 array.push(1); 5 array

sort方法实际应用详解---javascript中对一个对象数组按照对象某个属性进行排序

转载: 查看原文 在javascript中,对象和数组是两种不同的类型,这和php中的数组概念不同.在javascript中,也有一些精妙的算法,用来对一些对象进行排序.我在面试迅雷的时候,也拿到一道题,当时做题的时候考虑到时间,没有去仔细研究,回来后再读了一些方法,就知道真正的考点在哪里了. 我们现在有一组"学生"对象,包含"名字,年龄"等属性,现在要求一个算法,把这些对象放在一个数组里,可以实现按照年龄对这些对象进行排序. var sdts = [ { name

详解JavaScript中的replace()函数

Javascript中字符串对象有一个方法replace(),它的作用非常强大.这里把它的用法整理一下.  一.方法简介 该方法的签名是:replace([RegExp|String],[String|Function]). 该方法 返回一个新的字符串,但并不改变字符串本身. 该方法接收2个参数,第一个参数可以是字符串,也可以是一个正则表达式:第二个参数可以是一个字符串,也可以是一个函数.其中第2个参数如果是函数,那么用起来是十分强大而且灵活的,不过相对来说也比较难掌握.下面就其用法进行详细说明

详解JavaScript中的Url编码/解码,表单提交中网址编码

本文主要针对URI编解码的相关问题做了介绍,对Url编码中哪些字符需要编码.为什么需要编码做了详细的说明,并对比分析了Javascript 中和 编解码相关的几对函数escape / unescape,encodeURI / decodeURI和 encodeURIComponent / decodeURIComponent. 预备知识 foo://example.com:8042/over/there?name=ferret#nose \_/ \______________/ \_______

详解JavaScript中的this

JavaScript中的this总是让人迷惑,应该是js众所周知的坑之一. 个人也觉得js中的this不是一个好的设计,由于this晚绑定的特性,它可以是全局对象,当前对象,或者…有人甚至因为坑大而不用this. 其实如果完全掌握了this的工作原理,自然就不会走进这些坑.来看下以下这些情况中的this分别会指向什么: 1.全局代码中的this alert(this)//window 全局范围内的this将会指向全局对象,在浏览器中即使window. 2.作为单纯的函数调用 function f

详解Javascript中的Object对象

Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的.虽说我们平时只是简单地使用了Object对象来存储数据,并没有使用到太多其他功能,但是Object对象其实包含了很多很有用的属性和方法,尤其是ES5增加的方法,因此,本文将从最基本的介绍开始,详细说明了Object的常用方法和应用. 基础介绍 创建对象 首先我们都知道,对象就是一组相似数据和功能的集合,我们就是用它来模拟我们现实世界中的对象的.那在Javascript中,创建对象的方

this详解:JAVASCRIPT中的this到底是谁?

语法 this 全局对象 在全局执行上下文(函数之外),this引用的是全局对象. console.log(this.document === document); // true // In web browsers, the window object is also the global object: console.log(this === window); // true this.a = 37; console.log(window.a); // 37 函数 在函数里面,this这