JavaScript - 错误和异常处理

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

语法错误

语法错误，也称为解析错误，在传统编程语言中发生在编译时，在 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结构以及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 的情况下它的Behave如何-

现场演示

<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语句。

现场演示

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

错误消息- 浏览器针对给定错误显示的相同消息
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.')" />

您可以将onerror与许多 HTML 标记一起使用，以便在出现错误时显示适当的消息。