1. 程式人生 > >javascript學習筆記(八)--錯誤處理

javascript學習筆記(八)--錯誤處理

1.onerror事件處理函式
onerror事件處理函式是第一個用來協助javascript處理錯誤的機制。頁面上出現異常時,error事件便在window物件上觸發。
例如:

<html><head><title>OnError Example</title><script type="text/javascript">
            window.onerror 
=function () {
                alert(
"An error occurred.");
            }
        
</script
></head><body onload="nonExistentFunction()"></body></html> 在這個例子中,嘗試呼叫不存在的函式nonExistentFunction()時,就會引發一個異常。這時會彈出警告框顯示“An error occurred.”不幸的是,瀏覽器的錯誤資訊也顯示出來了,要從瀏覽器中隱藏它,onerror事件處理函式必須返回true值:如下
<html><head><title>OnError Example</title><script type="text/javascript"
>
            window.onerror 
=function () {
                alert(
"An error occurred.");
                
returntrue;
            }
        
</script></head><body onload="nonExistentFunction()"></body></html>
2.取出錯誤資訊
onerror事件處理函式提供了三種資訊來確定錯誤確切的性質:
錯誤資訊--對於給定錯誤,瀏覽器會顯示同樣的資訊。
URL--在哪個檔案中發生了錯誤。
行號--給定的URL中發生錯誤的行號。
<
html><head><title>OnError Example</title><script type="text/javascript">
            window.onerror 
=function (sMessage, sUrl, sLine) {
                alert(
"An error occurred:/n"+ sMessage +"/nURL: "+ sUrl +"/nLine Number: "+ sLine);
                
returntrue;
            }
        
</script></head><body onload="nonExistentFunction()"></body></html>
3.影象載入錯誤
影象物件也支援onerror事件處理函式。當一個影象由於某種原因未能成功載入時(例如,檔案不存在),error事件便在這個影象上觸發。
<html><head><title>Image Error Test</title></head><body><p>The image below attempts to load a file that doesn't exist.</p><img src="blue.gif" onerror="alert('An error occurred loading the image.')"/></body></html>
與window物件的onerror事件處理函式不同,image的onerror事件處理函式沒有任務關於額外資訊的引數。

4.處理語法錯誤
onerror事件處理函式不僅可以處理異常,它還能處理語法錯誤,也只有它才能處理。
<html><head><title>OnError Example</title><script type="text/javascript">
            window.onerror 
=function (sMessage, sUrl, sLine) {
                alert(
"An error occurred:/n"+ sMessage +"/nURL: "+ sUrl +"/nLine Number: "+ sLine);
                
returntrue;
            }
            alert(
"Syntax error.";
        
</script></head><body onload="nonExistentFunction()"><p>The syntax error on this page comes <em>after</em> the <code>onerror</code>
        event handler is defined, so the custom dialog catches it.
</p><p><strong>Note:</strong> This may not work in newer browsers with tighter security restrictions.</p></body></html>
注:使用onerror事件處理函式的主要問題是,它是BOM的一部分,所以,沒有任何標準能控制它的行為。因此,不同的瀏覽器使用這個事件處理函式處理錯誤的方式有明顯的不同。例如,在IE中發生error事件時,正常的程式碼會繼續執行:所有的變數和資料都儲存下來,並可能過onerror事件處理函式訪問。然而在Mozilla中,正常的程式碼執行都會結束,同時所有錯誤發生之前的變數和資料都被銷燬。Safari和Konqueror不支援window物件上的onerror事件處理函式,但是它們支援影象上的onerror事件處理函式。

5.try...catch語句
<html><head><title>Try Catch Example</title><script type="text/javascript">try {
                    window.nonExistentFunction();
                    alert(
"Method completed.");
                } 
catch (exception) {
                    alert(
"An exception occurred.");
                } 
finally {
                    alert(
"End of try...catch test.");
                }
        
</script></head><body></body></html>
與java不同,ECMAScript標準在try...catch語句中指定只能有一個catch子句。因為javascript是弱型別,沒辦法指明catch子句中的異常的特定型別。不管錯誤是什麼型別,都由同一個catch子句處理。Mozilla對其進行了擴充套件,可為try...catch語句新增多個catch子句。當然只有Mozilla才能使用這個形式,所以不推薦使用。

(1)巢狀try...catch語句
<html><head><title>Try Catch Example</title><script type="text/javascript">try {
                    eval(
"a ++ b");        //causes error                } catch (oException) {
                    alert(
"An exception occurred.");
                    
try {
                        
var arrErrors =new Array(10000000000000000000000);  //causes error                        arrErrors.push(exception);
                    } 
catch (oException2) {
                        alert(
"Another exception occurred.");
                    }
                } 
finally {
                    alert(
"All done.");
                }

        
</script></head><body></body></html> (2)Error物件
類似於java有個用於丟擲的基類Exception,javascript有個Error基類用於丟擲。Error物件有以下特性:
name--表示錯誤型別的字串。
message--實際的錯誤資訊。
Error物件的名稱物件對應於它的類(因為Error只是一個基類),可以是以下值之一:
發生原因
EvalError 錯誤發生在eval()函式中
RangeError 數字的值超出javascript可表示的範圍
ReferenceError 使用了非法的引用
SyntaxError 在eval()函式呼叫中發生了語法錯誤。其他的語法錯誤由瀏覽器報告,無法通過try...catch語句處理
TypeError 變數的型別不是預期所需的
URIError 在encodeURI()或者decodeURI()函式中發生了錯誤

Mozilla和IE都擴充套件了Erro物件以適應各自的需求。Mozilla提供一個fileName特性來表示錯誤發生在哪一個檔案中,以及一個stack特性以包含到錯誤發生時的呼叫堆疊;IE提供了一個number特性來表示錯誤代號。
(3)判斷錯誤型別
<html><head><title>Try Catch Example</title><script type="text/javascript">try {
                    eval(
"a ++ b");        //causes SyntaxError                } catch (oException) {
                    
if (oException.name =="SyntaxError") {      //或者if(oException instanceof SyntaxError)
                        alert(
"Syntax Error: "+ oException.message);
                    } 
else {
                        alert(
"An unexpected error occurred: "+ oException.message);
                    }
                }

        
</script></head><body></body></html>
(4)丟擲異常
ECMAScript第三版還引入了throw語句,用於有目的的丟擲異常。語法如下:
throw error_object;      //error_object可以是字串、數字、布林值或者是實際的物件。
<html><head><title>Try Catch Example</title><script type="text/javascript">function addTwoNumbers(a, b) {
                    
if (arguments.length <2) {
                        
thrownew Error("Two numbers are required.");
                    } 
else {
                        
return a + b;
                    }
                }
                
                
try {
                    result 
= addTwoNumbers(90);
                } 
catch (oException) {
                    alert(oException.message);      
//outputs "Two numbers are required."                }

        
</script></head><body></body></html>


另個,因為瀏覽器不生成Error物件(它總是生成一個較精確的Error物件,比如RangeError),所以區分瀏覽器丟擲的錯誤和開發人員丟擲的錯誤很簡單,使用前面的技術就行了:
try{
   result = addTwoNumber(90,parseInt(z));
}catch(oException){
   if(oException instanceof SyntaxError){
      alert("Syntax Error: "+oException.message);
   }else if(oException instanceof Error){
      alert(oException.message);
   }
}
注意檢查instanceof Error必須是if語句中的最後一個條件,因為所有其他的錯誤類都繼承於它(所以在檢測instanceof Error時都返回true)。

所有的瀏覽器都可以報告開發人員丟擲的錯誤,但是錯誤訊息的顯示方式可能有所不同。IE6只會在丟擲Error物件時,才顯示錯誤資訊;其他情況下,它就只顯示Exception thrown and not caught,而沒有任何詳細內容。Mozilla則會報告Error:uncaught exception:然後呼叫所丟擲的物件的toString()方法。 

轉自:http://www.blogjava.net/ilovezmh/archive/2007/04/25/113370.html