阅读(4350) (13)

JavaScript 错误 & 异常处理

2016-08-12 22:04:49 更新

错误 & 异常处理

程序中存在三种错误: (a) 语法错误 (b) 运行期错误 (c) 逻辑错误:

语法错误

语法错误同样也被称为解析错误,对于传统的编程语言,该错误出现先编译的时候,对于 JavaScript 该错误出现在解释时期。例如,下面的代码会引起语法错误,因为在一行中缺少一个圆括号:

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

当在 JavaScript 中出现了语法错误的时候,仅仅只是在同一个包含该语法错误的进程才会受到影响,其他的进程中的代码执行不会受到影响,尽管他们依赖的代码中包含错误。

运行期错误

运行期错误也被称为异常,通常在编译或者解释之后运行时会出现。例如,下面的代码会造成运行期错误,因为它试图调用一个不存在的方法:

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

异常出现时会影响进程创建时的正常执行,但是允许对于其他的 JavaScript 进程则可以继续正常执行。

逻辑错误

逻辑错误是最难被追踪的错误类型。这些错误并不是语法或者运行时错误造成的, 而是由于你在程序运行的逻辑上出现错误,从而导致你的脚本程序并不能得到你想要的结果。

你并不能捕获这些错误,因为它取决于你的业务逻辑需求,你想要在你的程序中实现怎样的逻辑处理。

try...catch...finally 语句

JavaScript 的最新版本中添加了异常处理的功能。它实现了 try...catch...finally 结构和 throw 操作用来处理异常。你可以捕获程序员和运行期产生的异常,但是对于用户不能捕获 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 语句块被执行。而可选的 finally 语句块在 try/catch 之后一定会被执行。

例子

如下是一个例子,我们尝试调用一个不存在的方法,这个会导致异常的产生。我们首先看下没有 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 中添加的第一个为了方便错误处理的特性。无论任何时候在网页中产生了异常,窗口对象就会触发 error 事件。例如:

    <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 事件句柄提供了三个信息用来准确的表示错误的特性:

  • 错误消息。 浏览器显示给定错误的相关信息。
  • URL。 错误出现的文件。
  • 行数。 在指定的 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.')" />

如果程序中产生错误,你可以在很多的 HTML 标签中使用 onerror 来显示合适的消息。