JavaScript 错误和异常处理

时间:2019-08-20 13:50:45  来源:igfitidea点击:

编程中有三种类型的错误:(a)语法错误,(b)运行时错误,(c)逻辑错误。

语法错误

语法错误,也称为解析错误。
在传统编程语言(c,c++等)的编译时发生,
在JavaScript的解释时发生。

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

window.print(;

当JavaScript中出现语法错误时,只有包含在与语法错误相同的线程中的代码受到影响,
而其他线程中的其余代码没有任何内容依赖于错误的代码,那么他们将执行。

运行时错误

运行时错误,也称为异常,发生在执行期间(在编译/解释之后)。

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

window.printme();

异常还会影响发生异常的线程,从而允许其他JavaScript线程继续正常执行。

逻辑错误

逻辑错误可能是最难追踪的错误类型。
这些错误不是语法或运行时错误的结果。
而是脚本的逻辑出错,导致无法得到预期的结果,就会出现这种情况。

这些错误程序是无法捕获的,因为它取决于业务需求,
只有通过业务测试才能测出来。大多数bug都属于业务类的。

try...catch...finally语句

最新版本的JavaScript增加了异常处理能力。
JavaScript实现了 try...catch...finally结构以及throw操作符来处理异常。

try...catch...finally 语法

try {
   // 要运行的业务代码
   [break;]
} 

catch ( e ) {
   // 发生异常时要运行的代码
   [break;]
}

[ finally {
   // 无论是否发生异常,这里的代码都会执行
}]

当try块中发生异常时,该异常被放置在e中,并执行catch块。

try...catch...finally 示例

我们试图访问一个未定义的变量,这会引发了一个异常。

function myFunc() {
   var a = 100;
   alert("变量的值是: " + b );
}
myFunc();

现在使用 try…来捕获这个异常。

function myFunc() {
   var a = 100;
   try {
      alert("变量的值是: " + b );
   } 
   catch ( e ) {
      alert("错误: " + e.description );
   }
}
myFunc();

我们可以使用finally块,它总是在try/catch之后无条件地执行。
一般用于回滚,清理资源等操作。比如try中打开了文件,在finally中关闭文件。

function myFunc() {
   var a = 100;
   try {
      alert("变量的值是: " + b );
   } 
   catch ( e ) {
      alert("错误: " + e.description );
   }
   finally {
      alert("Finally块的代码总是会被执行" );
   }
}
myFunc();

throw抛出语句

可以使用throw语句引发内置异常或自定义异常。
之后就可以捕获这些异常,并可以采取适当的操作。

JavaScript throw抛出语句示例

function myFunc() {
   var a = 100;
   var b = 0;
   
   try {
      if ( b == 0 ) {
         throw( "0不能做除数" ); 
      } else {
         var c = a / b;
      }
   }
   catch ( e ) {
      console.log("错误: " + e );
   }
}

onerror()方法

onerror事件处理程序是帮助JavaScript进行错误处理的第一个特性。
每当页面上出现异常时,就会在窗口对象上触发错误事件。

下面的代码中,我们定义了一个不存在的myFunc1函数,从而导致错误。

<html>
   <head>
      <script type = "text/javascript">
         window.onerror = function () {
            alert("发生了错误");
         }
      </script>
   </head>
   <body>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc1();" />
      </form>
      
   </body>
</html>

onerror事件处理程序提供了三条信息来确定错误的确切性质

  1. 错误信息-浏览器对给定错误显示的信息相同

  2. URL-发生错误的文件

  3. 行号-在给定URL中导致错误的代码的行号

下面的示例展示了如何提取这些信息。

JavaScript onerror()方法示例

<html>
   <head>
      <script type = "text/javascript">
         window.onerror = function (msg, url, line) {
            alert("错误信息 : " + msg );
            alert("url : " + url );
            alert("行号 : " + line );
         }
      </script>
   </head>
   <body>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc1();" />
      </form>
      
   </body>
</html>

我们可以将onerror与许多HTML标记一起使用,以便在出现错误时进行提示。

比如在加载图像时出现任何问题时显示错误消息。如下所示

<img src="myimage.gif" onerror="alert('图片加载出错')" />