有三种类型的编程错误：(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

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

  1. 【转】详解JavaScript中的this

    ref:http://blog.jobbole.com/39305/ 来源:foocoder 详解JavaScript中的this JavaScript中的this总是让人迷惑,应该是js众所周知的坑 ...

  2. 详解javascript中的this对象

    详解javascript中的this对象 前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的 ...

  3. （转载）详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  4. 详解Java中的clone方法

    详解Java中的clone方法 参考:http://blog.csdn.net/zhangjg_blog/article/details/18369201/ 所谓的复制对象,首先要分配一个和源对象同样 ...

  5. 详解 javascript中offsetleft属性的用法（转）

    详解 javascript中offsetleft属性的用法 转载  2015-11-11   投稿:mrr    我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...

  6. 详解JavaScript中的原型

    前言 原型.原型链应该是被大多数前端er说烂的词,但是应该还有很多人不能完整的解释这两个内容,当然也包括我自己. 最早一篇原型链文章写于2019年07月,那个时候也是费了老大劲才理解到了七八成,到现在 ...

  7. 详解JavaScript中的arc的方法

    今天说说JavaScript在网页中画圆的函数arc! 一.arc所需要的参数设置 1 arc(x, y, radius, startAngle, endAngle, counterclockwise ...

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

    转载: 查看原文 在javascript中,对象和数组是两种不同的类型,这和php中的数组概念不同.在javascript中,也有一些精妙的算法,用来对一些对象进行排序.我在面试迅雷的时候,也拿到一道 ...

  9. 详解 JavaScript 中 splice() 方法

    splice() 方法是一个比较少用的方法,但是功能确实很好,并且在我们 coding 的时候,经常有需要 splice() 方法,先介绍一下该方法. 在 JavaScript 中 splice() ...

随机推荐

  1. 【面试笔试算法】牛客网一站通Offer编程题2016.4.19

    牛客网一站通offer (一)字符串变形 1. 题目: 对于一个给定的字符串,我们需要在线性(也就是O(n))的时间里对它做一些变形.首先这个字符串中包含着一些空格,就像"Hello Wor ...

  2. Leetcode_116_Populating Next Right Pointers in Each Node

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/43532817 Given a binary tree st ...

  3. Win8 HTML5与JS编程学习笔记（二）

    近期一直受到win8应用的Grid布局困扰,经过了半下午加半个晚上的奋斗,终于是弄明白了Grid布局方法的规则.之前我是阅读的微软官方的开发教程,书中没有详细说明CSS3的布局规则,自己鼓捣了半天也是 ...

  4. UML之对象图

    对象图对包含在类图中的事物的实例建模,对象图显示了在某一时间点上一组对象以及他们之间的关系.对象图用于对系统的静态设计视图或静态交互视图建模,这包括对某一时刻的系统快照建模,表示出对象集.对象的状态以 ...

  5. ADF BC New Features

      Examining ADF Business Components New Features Purpose In this tutorial, you create a series of si ...

  6. "《算法导论》之‘字符串’"：字符串匹配

    本文主要叙述用于字符串匹配的KMP算法. 阮一峰的博文“字符串匹配的KMP算法"将该算法讲述得非常形象,可参考之. 字符串‘部分匹配值’计算 KMP算法重要的一步在于部分匹配值的计算.模仿& ...

  7. PS 图像调整算法——黑白

    这个算法是参考自 阿发伯 的博客: http://blog.csdn.net/maozefa 黑白调整 Photoshop CS的图像黑白调整功能,是通过对红.黄.绿.青.蓝和洋红等6种颜色的比例调节 ...

  8. Sencha touch API

    Sencha touch  API http://docs.sencha.com/touch/2.3.1/#!/guide/getting_started

  9. git使用中checkout生成临时br的问题(吓出一身冷汗啊)

    git中几天前漫不经心的使用了git checkout ver_hash的命令,结果push到远程库都提示everything is up-to-date,实际神马都没提交上去啊!但看本地log中的确 ...

  10. 不容忽视的js面试题

    1.全局变量和局部变量(变量提升和连等赋值问题) (function() { var a = b = 5; })(); console.log(a); console.log(b); 上面代码运行结果 ...