JavaScript錯誤處理_javascript技巧

一．錯誤分類

1． 文法錯誤

也稱為解析錯誤，發生在傳統程式語言的編譯時，在JavaScript中發生在解釋時，這些錯誤是由程式碼中的意外字元直接引起的，然後就不能直接編譯/解釋，eg，在一行程式碼因缺少右括號，產生了語法錯誤。發生語法錯誤時，就不能繼續執行程式碼。在JavaScript中，只有在同一個執行緒中的程式碼會受語法錯誤的影響。在其他執行緒中的程式碼和其他外部引用的檔案中的程式碼，如果不依賴包含錯誤的程式碼，則可以繼續執行。

2． 運行時錯誤

也稱為異常（exception，在編譯期/解釋器後）。此時，問題並不出在程式碼的語法上，而是，嘗試完成的一個操作，在某些情況下是非法的。 eg.

window.openMyFile();

因不存在openMyFile()方法，瀏覽器會回傳一個異常。異常只會影響發生的線程，其他JavaScript線程即可繼續正常的執行。

二．處理錯誤

1.       onerror事件處理函數

它是第一個用來協助JavaScript處理錯誤的機制。頁面上出現異常時，error事件便在window物件上觸發。 Eg.

複製程式碼 程式碼如下:

                       
   
          
          
      
      
      

 在上述程式碼中，在頁面載入時嘗試呼叫不存在的函數，此時會引發一個異常。彈出「發生錯誤」的錯誤訊息。但是，瀏覽器的錯誤訊息也顯示出來了，如何在瀏覽器上隱藏它呢，只需onerror方法傳回一個true即可。

複製程式碼 程式碼如下:

1） 取出錯誤訊息

onerror處理函數提供了三種資訊來確定錯誤確切的性質：

 i）錯誤訊息－對於給定錯誤，瀏覽器會顯示相同的訊息；

 ii）URL－在哪個文件中發生了錯誤；

行號－給定URL中發生錯誤的行號。

訪問方法見下列範例：

複製程式碼 程式碼如下:

2） 影像載入錯誤

window對象並非唯一支援onerror事件處理函數的對象，它對圖像對像也提供支援。當一個影像因檔案不存在等原因未能成功載入時，error事件便在這個影像上觸發。讓我們來看一個例子：

上例直接在HTML中指派onerror事件處理函數。當然也可以透過腳本來分配事件處理函數，在設定影像的src特性前，必須等待頁面完全載入，程式碼如下：

複製程式碼 程式碼如下:

   
          
       
      
      
             
      

注意：與window物件的onerror事件處理函數不同，image的onerror事件任何的額外資訊的參數。

3） 處理文法錯誤

onerror還能處理文法錯誤。但有一點必須注意，事件處理函數必須是頁面中第一個出現的程式碼，因為如果語法錯誤出現在設定事件處理函數之前出現，事件處理函數就沒有用了。

注意：語法錯誤會完全停止程式碼的執行。

說明：使用onerror事件處理函數的主要的問題是，它是BOM的一部分，所以，沒有任何標準能控制它的行為。因此，不同的瀏覽器使用這個事件處理錯誤的方式有明顯的不同，eg，在IE中發生error事件時，正常的程式碼會繼續執行，所有的變數和資料都保留下來，並可透過onerror事件處理函數訪問。在Mozilla中，正常的程式碼執行都會結束，同時所有的錯誤發生之前的變數和資料都被銷毀。

2.       try…catch語句

ECMPScript第三版，引進了try…catch語句。 Eg.

複製程式碼 程式碼如下:

try {
        window.openFile1();
        alert("成功呼叫openFile1方法");
} catch (exception) {
        alert("發生異常！");
} finally {
        alert("try..catch測試結束!");
}

 與Java不同，ECMAScript標準在try…catch語句中只能有一個catch語句，因為JavaScript是弱型別的語言，沒辦法指明catch子句中異常的特定型別。不管錯誤是什麼類型，都由同一個catch語句處理。但Mozilla對其進行了擴展，可加多個catch語句，不建議這樣使用。

 finally用於包含無論是否有異常發生都要執行的程式碼，這對關閉開啟的連結和釋放資源很有用。

1） 巢狀try…catch語句

用來處理catch子句中的錯誤問題，讓我們來看一個例子，程式碼如下：

複製程式碼 程式碼如下:

try {
    eval("a b");
} catch(oException) {
    alert("發生錯誤！");
    try {
      var aError = new Array(100000000000000000000000000000000000000);
} catch(exception) {
      alert("在catch子句中發生錯誤!");
}
} finally{
       alert("完成")
}

2） Error物件

發生錯誤時，JavaScript有個Error基底類別用來拋出。它有兩個特性：

  i）name－表示錯誤類型的字串

  ii）message－實際的錯誤訊息。

Error物件的name對應於它的類，可以是以下值之一：

EvalError：錯誤發生在eval()函數中；

RangeError：數字值超出JavaScript可表示的範圍；

ReferenceError：使用了非法的引用；

SyntaxError：在eval()函數呼叫中發生了語法錯誤，其他的愈發錯誤由瀏覽器報告，無法透過try…catch處理；

TypeError：變數的型別不是預期所需的；

URIError：在encodeURI或decodeURI函數發生了錯誤。

3）判斷錯誤類型

可採取以下兩種方法來判斷錯誤類型，第一種根據異常的name屬性判斷，如下：

複製程式碼 程式碼如下:

try {
        eval("a b");
} catch(oException) {
        if (oException.name = "SyntaxError") {
       alert("發生SyntaxError!");
} else {
       alert("發生其他錯誤!");
}
}

 第二中採用instanceof操作符，程式碼如下：

複製程式碼 程式碼如下:

try {
        eval("a b");
} catch(oException) {
       if (oException instanceof SyntaxError) {
       alert("發生SyntaxError!");
} else {
       alert("發生其他錯誤!");
}
}

4） 拋出異常的throw語句

在ECMAScript第三版引入，用於有目的的拋出異常，拋出的錯誤對象可為字符串、數字、布爾值或實際的對象，也可以拋出Error對象（其構造函數只有一個函數，即錯誤訊息）。 eg1. throw new Error(“錯誤產生！”);

eg2.

複製程式碼 程式碼如下:

function addTwoNumber(a, b) {
       if (arguments.length        throw new Error("需要傳入兩個數字!");
}
}
try {
       result = addTwoNumber(90);
} catch(oException) {
       if (oException instanceof SyntaxError) {
       alert("SyntaxError：" oException.message);
} else if (oException instanceof Error){
       alert(oException.message);
}
}

以上就是本文所述的全部內容了，希望小夥伴們能夠喜歡。