JavaScript - 错误 & 例外处理

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

语法错误

语法错误,也称为解析错误,在传统编程语言的编译时和JavaScript中的解释时发生。

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

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


当JavaScript中出现语法错误时,只有与语法错误相同的线程中包含的代码才会受到影响,而其他线程中的其余代码将被执行,假设它们中的任何内容都不依赖于包含错误的代码。

运行时错误

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

例如,以下行会导致运行时错误,因为此处语法正确,但在运行时,它正在尝试调用不存在的方法。

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


异常也会影响它们出现的线程,允许其他JavaScript线程继续正常执行。

逻辑错误

逻辑错误可能是最难追踪的错误类型。这些错误不是语法或运行时错误的结果。相反,当你在驱动你的脚本的逻辑中犯了错误并且你没有得到你期望的结果时,它们会发生。

你无法捕获这些错误,因为它取决于你的业务需求你希望在你的程序中放置什么类型的逻辑。

try ... catch ... finally Statement

最新版本的JavaScript添加了异常处理功能。 JavaScript实现 try ... catch ... finally 构造以及 throw 运算符来处理异常。

你可以 catch 程序员生成和运行时异常,但你不能捕获 JavaScript语法错误。

这是尝试...捕捉......最后阻止语法&减去;

 < script type ="text/的javascript"&GT; 
<!--  
 try {
    //代码运行
 [break;] 
} 
 catch(e){ 
    //发生异常时运行的代码
 [break;] 
} 
 [finally {
    //始终执行的代码,无论
    //发生异常
}] 
//--> 
</script>


尝试块必须紧跟一个 catch 块或最后一个 阻止(或两者之一)。当 try 块中发生异常时,异常将放在 e 中,并执行 catch 块。在try/catch之后无条件执行可选的 finally 块。

示例

以下是我们尝试的示例调用一个不存在的函数,这反过来又会引发异常。让我们看看如果没有尝试...捕获 :

在线演示

 <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事件处理程序提供三条信息来识别错误的确切性质:

  • Error message : 浏览器将针对给定错误显示的相同消息

  • URL : 发生错误的文件

  • Line number : 给定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 来显示错误的相应消息。