首頁 > web前端 > js教程 > JavaScript錯誤處理_javascript技巧

JavaScript錯誤處理_javascript技巧

WBOY
發布: 2016-05-16 16:16:02
原創
1632 人瀏覽過

一.錯誤分類

1. 文法錯誤

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

2. 運行時錯誤

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

window.openMyFile();

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

二.處理錯誤

1.       onerror事件處理函數

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

複製程式碼 程式碼如下:

                       
   
           onerror範例
          
      
      
      

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

複製程式碼 程式碼如下:


1) 取出錯誤訊息

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

 i)錯誤訊息-對於給定錯誤,瀏覽器會顯示相同的訊息;

 ii)URL-在哪個文件中發生了錯誤;

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

訪問方法見下列範例:

複製程式碼 程式碼如下:


2) 影像載入錯誤

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

JavaScript錯誤處理_javascript技巧

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

複製程式碼 程式碼如下:


   
           Image錯誤檢定
       
      
      
              JavaScript錯誤處理_javascript技巧
      

注意:與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);
}
}

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板