JavaScript錯誤和例外處理


有三種型別的程式設計錯誤:(1)語法錯誤和(2)執行時錯誤(3)邏輯錯誤:

語法錯誤:

語法錯誤,也被稱為解析錯誤,在編譯時進行傳統的程式設計語言,並出現在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結構以及丟擲操作來處理異常。

你可以捕獲程式員生成和執行時異常,但不能捕獲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塊被執行。 try/catch語句後的可選finally塊無條件地執行。

範例:

下面是一個例子,我們正試圖呼叫一個不存在的函式,這將引發異常。讓我們來看看它的行為,不具有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處理錯誤。錯誤事件被觸發視窗物件,每當一個異常頁面上出現。例如:

<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標記錯誤的情況下顯示相應的資訊。