教程 > Javascript 教程 > Javascript 高级教程 阅读：52

Javascript 错误和异常

编程中存在三种类型的错误：(a) 语法错误，(b) 运行时错误，和 (c) 逻辑错误。

语法错误

语法错误，也称为解析错误，是在对源代码进行解析的时候发生的错误。

例如，以下行会导致语法错误，因为它缺少右括号。

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

当 JavaScript 中发生语法错误时，只有包含在与语法错误相同的线程中的代码会受到影响，而其他线程中的代码将被执行，假设它们中没有任何内容取决于包含错误的代码。

运行时错误

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

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

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

异常也会影响它们所在的线程的其他代码，但是对其他 JavaScript 线程的代码没有影响。

逻辑错误

逻辑错误可能是最难追踪的错误类型。这些错误不是语法或运行时错误的结果。 而是代码正常运行之后的结果不符合你的预期。

无法捕捉到逻辑错误，因为这取决于业务需求，取决于想在程序中放入什么类型的逻辑。

try...catch...finally 语句

最新版本的 JavaScript 添加了异常处理功能。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>点击下面按钮查看结果:</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>点击下面按钮查看结果:</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>点击下面按钮查看结果:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

尝试一下

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>点击下面按钮查看结果:</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>点击下面按钮查看结果:</p>
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>    
   </body>
</html>

尝试一下

onerror的事件处理程序提供了三条信息，方便我们找出错误

  • 错误消息- 浏览器为给定错误显示的详细的信息
  • 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>点击下面按钮查看结果:</p>     
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form> 
   </body>
</html>

尝试一下

你可以以任何您认为更好的方式显示提取的信息。

你可以使用如下所示的onerror方法来显示错误消息，以防加载图像时出现任何问题。

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

可以将onerror与许多 HTML 标记一起使用，以在出现错误时显示适当的消息，从而提供网页的用户体验。

查看笔记

扫码一下
查看教程更方便