ES6 - 錯誤處理

程式設計中存在三種類型的錯誤：語法錯誤、執行時錯誤和邏輯錯誤。

語法錯誤

語法錯誤，也稱為解析錯誤，在傳統的程式語言中發生在編譯時，在 JavaScript 中發生在解釋時。當 JavaScript 中發生語法錯誤時，只有包含語法錯誤的同一執行緒中的程式碼受到影響，其他執行緒中的其餘程式碼將繼續執行，假設其中沒有任何內容依賴於包含錯誤的程式碼。

執行時錯誤

執行時錯誤，也稱為異常，發生在執行期間（編譯/解釋之後）。異常也會影響其發生的執行緒，允許其他 JavaScript 執行緒繼續正常執行。

邏輯錯誤

邏輯錯誤可能是最難追蹤的錯誤型別。這些錯誤不是語法或執行時錯誤的結果。相反，當你在驅動指令碼的邏輯中犯錯並且沒有得到預期的結果時，就會發生這些錯誤。

你無法捕獲這些錯誤，因為這取決於你的業務需求，你想在程式中使用哪種型別的邏輯。

當發生執行時錯誤時，JavaScript 會丟擲 Error 物件的例項。下表列出了 Error 物件的預定義型別。

序號	Error 物件及描述
1	EvalError 建立一個表示與全域性函式eval()相關的錯誤發生的例項。
2	RangeError 建立一個表示數值變數或引數超出其有效範圍時發生的錯誤的例項。
3	ReferenceError 建立一個表示解除對無效引用的引用時發生的錯誤的例項。
4	SyntaxError 建立一個表示在解析程式碼時發生的語法錯誤的例項。
5	TypeError 建立一個表示變數或引數型別無效時發生的錯誤的例項。
6	URIError 建立一個表示encodeURI()或decodeURI()傳遞無效引數時發生的錯誤的例項。

丟擲異常

可以使用throw 語句引發錯誤（預定義或使用者定義）。稍後可以捕獲這些異常，並可以採取適當的操作。以下是相同語法的示例。

語法：丟擲一個通用異常

throw new Error([message]) 
OR 
throw([message])

語法：丟擲一個特定異常

throw new Error_name([message])

異常處理

異常處理是透過try...catch 語句完成的。當程式遇到異常時，程式將以不友好的方式終止。為了防止這種意外錯誤，我們可以將程式碼包裝在 try...catch 語句中。

try 塊後面必須緊跟一個 catch 塊或一個 finally 塊（或兩者之一）。當 try 塊中發生異常時，異常將放在 e 中，並執行 catch 塊。可選的 finally 塊在 try/catch 後無條件執行

以下是相同語法的示例。

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  
}]

示例

var a = 100; 
var b = 0; 
try { 
   if (b == 0 ) { 
      throw(“Divide by zero error.”); 
   } else { 
      var c = a / b; 
   } 
} 
catch( e ) { 
   console.log("Error: " + e ); 
}

輸出

在上述程式碼成功執行後，將顯示以下輸出。

Error: Divide by zero error

注意 - 注意：你可以在一個函式中引發異常，然後可以使用try...catch塊在同一函式或呼叫函式中捕獲該異常。

onerror( ) 方法

onerror 事件處理程式是第一個促進 JavaScript 中錯誤處理的功能。每當頁面上發生異常時，都會在 window 物件上觸發 error 事件。

示例

<html> 
   <head> 
      <script type = "text/javascript"> 
         window.onerror  =  function () {  
            document.write ("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) {  
            document.write ("Message : " + msg );  
            document.write ("url : " + url );  
            document.write ("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>

自定義錯誤

JavaScript 支援自定義錯誤的概念。以下示例說明了這一點。

示例 1：帶有預設訊息的自定義錯誤

function MyError(message) { 
   this.name = 'CustomError'; 
   this.message = message || 'Error raised with default message'; 
} 
try { 
   throw new MyError(); 
} catch (e) {  
   console.log(e.name);      
   console.log(e.message);  // 'Default Message' 
}

在上述程式碼成功執行後，將顯示以下輸出。

CustomError 
Error raised with default message

示例 2：帶有使用者定義錯誤訊息的自定義錯誤

function MyError(message) { 
   this.name = 'CustomError'; 
   this.message = message || 'Default Error Message';  
} try { 
   throw new MyError('Printing Custom Error message'); 
} 
catch (e) { 
   console.log(e.name);      
   console.log(e.message);  
}

在上述程式碼成功執行後，將顯示以下輸出。

CustomError 
Printing Custom Error message

列印頁面