JavaScript高階程式設計 閱讀筆記（二十） js錯誤處理_javascript技巧

一、錯誤分類

　　1、語法錯誤：也稱解析錯誤，發生在傳統語言的編譯時，在JavaScript中發生在解釋時。這些錯誤是由程式碼中的意外字元直接引起的，然後就不能直接編譯/解釋。發生語法錯誤時，就不能繼續執行程式碼。在JavaScript中，只有在同一個執行緒中的程式碼會受語法錯誤的影響。在其他執行緒中的程式碼和其他外部引用的檔案中的程式碼，如果不依賴包含錯誤的程式碼，則可以繼續執行。
　　2、運行時錯誤：也稱為異常（exception，在編譯期/解釋器後）。此時，問題並不出在程式碼的語法上，而是，嘗試完成的一個操作，在某些情況下是非法的。異常只會影響發生的線程，其他JavaScript線程即可繼續正常的執行。

二、錯誤處理

　　JavaScript提供了兩種處理錯誤的方式：BOM中的onerror事件處理函數方式和ECMAScript中的try...catch方式。
　　1、onerror事件處理函數
　　它是第一個用來協助JavaScript處理錯誤的機制。頁面上出現異常時，error事件便在window物件上觸發。例如：

複製程式碼 程式碼如下:

head>

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

複製程式碼 程式碼如下:

>
1.1 取出錯誤訊息

　　onerror處理函數提供了三種資訊來確定錯誤確切的性質：
　　i) 錯誤訊息－對於給定錯誤，瀏覽器會顯示相同的資訊
　　ii) URL－在哪個文件中發生了錯誤
　　iii) 行號－給定URL中發生錯誤的行號。

複製程式碼 程式碼如下:

window.onerror = function(>

window.onerror = function(sMessage, sU. {
alert("發生錯誤！ " sMessage "nURL:" sUrl "nLine Number:" iLine);
return true;
}

　　1.2 映像載入號並非唯一支援onerror事件處理函數的對象，它對圖像對像也提供支援。 >

複製程式碼 程式碼如下: 　　

上例直接在HTML中分配onerror事件處理函數。因為noexist.gif不存在，所以會彈出警告框提示用戶。當然也可以透過腳本來分配事件處理函數，在設定影像的src特性前，必須等待頁面完全載入，例如：

複製程式碼 程式碼如下:

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

　　1.3處理語法錯誤

　　onerror事件處理函數不僅可以處理異常，它還能處理語法錯誤，也只有它才能處理。
　　首先，事件處理函數必須是頁面中第一個出現的程式碼，因為如果語法錯誤出現在設定事件處理函數之前出現，事件處理函數就沒有用了。記住，語法錯誤會完全停止程式碼的執行。例如：

複製代碼 代碼如下:

return true;
}

因為突出顯示的那一行程式碼（裡面有錯誤語法）在分配onerror事件處理函數之前就出現了，所以瀏覽器直接報告這個錯誤。器也會報這個錯誤。的結果還是一樣的報兩個錯誤，並不顯示onerror事件中的信息。的行為。 onerror事件處理函數存取。 >　　ECMPScript第三版，引入了try…catch語句。 🎜>
try{
//code
[break;]
} catch ([exception]) {

//code [break;] } [finally { //code }]

例如：

複製程式碼



複製程式碼

複製程式碼

複製程式碼 程式碼如下:

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

與Java不同，ECMAScript標準在try…catch語句中只能有一個catch語句，因為JavaScript是弱類型的語言，沒辦法指明catch子句中異常的特定類型。多個catch語句，但因為只有Mozilla 可以使用，因此不建議使用。

　　2.1 巢狀try...catch 語句

　　在try...catch 語句中的catch 子句中，也會發生錯誤。 ....catch 語句。 >eval("a b");
} catch(oException) {
alert("發生錯誤！");
try {
var aError = new Array(100000000000000000000 catch(exception) {

alert("在catch子句中發生錯誤!"); } } finally{ alert("已完成") }

2.2 Error物件

　　發生錯誤時，JavaScript有個Error基底類別用於拋出。它有兩個特性：
　　i）name－表示錯誤類型的字串
　　ii）message－實際的錯誤訊息
　　Error物件的name對應於它的類，可以是如下值之一：
　　EvalError：錯誤發生在eval()函數中；
　　RangeError：數字值超出JavaScript可表示的範圍；
　　ReferenceError：使用了非法的引用；函數呼叫中發生了語法錯誤，其他的癒發錯誤由瀏覽器報告，無法透過try…catch處理；
　　TypeError：變數的類型不是預期所需的；
　　URIError：在encodeURI或decodeURI函數發生了錯誤。

　　2.3 判斷錯誤類型

　　儘管每個 try...catch 語句中只能有一個catch子句，但判斷拋出的錯誤類型方法主要有兩種。第一種使用Error 物件的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("發生其他錯誤!");

}
}



2.4 拋出異常

　　在ECMAScript第三版引入，用於有目的的拋出異常，拋出的錯誤對象可為字串、數字、布林值或實際的對象，也可以拋出Error對象（其建構函數只有一個函數，就是錯誤訊息）。如： 複製程式碼

程式碼如下:

throw new Error("錯誤產生！ ;　　

開發人員拋出的錯誤和由瀏覽器本身拋出的錯誤都在try...catch 中捕獲。例如： 複製程式碼

複製程式碼


程式碼如下:


function addTwoNumber() {

function addTwoNumber( >if (arguments.length throw new Error("需要傳入兩個數字!");
}
}
try {

result = addTwoNumber(90) ;
} catch(oException) {
if (oException instanceof SyntaxError) { alert("SyntaxError：" oException.message);
} else if (ooExpceptor if (ooExter)> (oException.message); }
}


三、偵錯技巧　　　　　了調試工具，大多數情況下已經夠用了，另外IE下還可以用IETest，FireFox下還可以用FireBug。 作者：Artwl 出處：http://artwl.cnblogs.com