首頁 > web前端 > js教程 > JavaScript高階程式設計 閱讀筆記(二十) js錯誤處理_javascript技巧

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

WBOY
發布: 2016-05-16 17:50:50
原創
1170 人瀏覽過
一、錯誤分類

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

二、錯誤處理


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

複製程式碼 程式碼如下:

head>
onerror Example







在上述程式碼中,在頁面載入時嘗試呼叫不存在的函數,此時會引發一個異常。彈出「發生錯誤」的錯誤訊息。但是,瀏覽器的錯誤訊息也顯示出來了,如何在瀏覽器上隱藏它呢,只需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事件處理函數的對象,它對圖像對像也提供支援。 >

複製程式碼 程式碼如下: JavaScript高階程式設計 閱讀筆記(二十) js錯誤處理_javascript技巧  

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


複製程式碼 程式碼如下:
Image錯誤檢定



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




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

  1.3處理語法錯誤

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



onError Example

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