背景：JavaScript在錯誤處理除錯上一直是它的軟肋，如果指令碼出錯，給出的提示經常也讓人摸不著頭腦。ECMAScript第3版為了解決這個問題引入了 try...catch和 throw語句以及一些錯誤型別，讓開發人員更加適時的處理錯誤。良好的錯誤處理機制可以及時的提醒使用者，知道發生了什麼事，而不會驚慌失措。為此，作為開發人員，我們必須理解在處理 JavaScript錯誤的時候，都有哪些手段和工具可以利用。

一、錯誤處理

1、try...catch語句

try{                                               //嘗試著執行try包含的程式碼
<span style="white-space:pre">	</span>window.abcdefg();                          //不存在的方法
}catch(e){                                         //如果有錯誤， 執行catch， e是異常物件
	alert('發生錯誤啦，錯誤資訊為： '+e);       //直接列印呼叫toString()方法
}
 

e物件中， ECMA-262還規定了兩個屬性： message和name，分別打印出資訊和名稱。

try{                                       //嘗試著執行try包含的程式碼
	window.abcdefg();                  //不存在的方法
}catch(e){                                 //如果有錯誤， 執行catch， e是異常物件
	alert('錯誤名稱： '+e.name);       //錯誤名稱
        alert('錯誤資訊： '+e.message);    //錯誤資訊
}
 

PS：Opera9之前的版本不支援這個屬性。並且IE提供了和message完全相同的description屬性、還添加了number屬性提示內部錯誤數量。Firefox提供了fileName(檔名)、lineNumber(錯誤行號)和stack(棧跟蹤資訊)。 Safari添加了line(行號)、sourceId(內部錯誤程式碼)和sourceURL(內部錯誤URL)。所以， 要跨瀏覽器使用，那麼最好只使用通用的message。

2、finally子句

    finally語句作為try-catch的可選語句，不管是否發生異常處理， 都會執行。並且不管try或是catch裡包含return語句，也不會阻止finally執行。

try{
	window.abcdefg();
}catch(e){
	alert('發生錯誤啦，錯誤資訊為： '+e.stack);
}finally{ //總是會被執行
	alert('我都會執行！ ');
}

PS：finally的作用一般是為了防止出現異常後，無法往下再執行的備用。也就是說，如果有一些清理操作， 那麼出現異常後，就執行不到清理操作， 那麼可以把這些清理操作放到finally裡即可。

二、錯誤顯示型別

執行程式碼時可能會發生的錯誤有很多種。每種錯誤都有對應的錯誤型別， ECMA-262定義了7種錯誤型別：

1）Error
2）valError
3）RangeError（範圍）

try{
    <span style="white-space:pre">	</span>new Array(-5);
}catch(e){
    <span style="white-space:pre">	</span>alert('發生錯誤啦，錯誤資訊為： '+e);
}

4）ReferenceError（引用）

try{
	var box = a;
}catch(e){
	alert('發生錯誤啦，錯誤資訊為： '+e);
}

5）SyntaxError（語法）

try{
	a$b;
}catch(e){
	alert('發生錯誤啦，錯誤資訊為： '+e);
}

a$ b; //丟擲 SyntaxError(語法)
錯誤資訊為： SyntaxError: missing ; beforestatement（失蹤;語句之前）
PS： SyntaxError通常是語法錯誤導致的。

注意：視訊中的例項在我的火狐瀏覽器和IE瀏覽器中顯示是上圖的引用錯誤。這個有待研究一下……

6）TypeError（型別）

try{
	new 10;
}catch(e){
	alert('發生錯誤啦，錯誤資訊為： '+e);
}

7）URIError

PS：Error是基型別(其他六種型別的父型別)， 其他型別繼承自它。 Error型別很少見，一般由瀏覽器丟擲的。這個基型別主要用於開發人員丟擲自定義錯誤。

PS： TypeError通常是型別不匹配導致的。

PS： EvalError型別表示全域性函式 eval()的使用方式與定義的不同時丟擲， 但實際上並不能產生這個錯誤，所以實際上碰到的可能性不大。

PS：在使用 encodeURI()和 decodeURI()時，如果 URI格式不正確時，會導致 URIError錯誤。但因為 URI的相容性非常強，導致這種錯誤幾乎見不到。

三、錯誤事件

error事件是當某個DOM物件產生錯誤的時候觸發。

demo.html:

<img src="123.jpg"onerror="alert('影象載入錯誤！ ')"/>

demo.js

addEvent(window,'error', function(){
     alert('發生錯誤啦！ ')
});

四．錯誤處理策略

因為JavaScript是鬆散弱型別語言，很多錯誤的產生是在執行期間的。一般來說，需要關注3種錯誤：

1.型別轉換錯誤 

在一些判斷比較的時候，比如陣列比較，有相等和全等兩種：

alert(1 == '1'); //true
alert(1 === '1'); //false
alert(1 == true); //true
alert(1 === true); //false

PS：由於這個特性，我們建議在這種會型別轉換的判斷，強烈推薦使用全等，以保證判斷的正確性。

var box = 10; //可以試試 0
if (box) { //10自動轉換為布林值為 true
<span style="white-space:pre">	</span>alert(box);
}

PS：因為 0會自動轉換為 false，其實 0也是數值，也是有值的，不應該認為是 false，所以我們要判斷 box是不是數值再去列印。

var box = 0;
if (typeof box == 'number') { //判斷 box是 number型別即可
alert(box);
}

PS： typeof box == 'number'這裡也是用的相等，沒有用全等呀？原因是 typeof box本身返回的就是型別的字串，右邊也是字串，那沒必要驗證型別，所以相等就夠了。

2.資料型別錯誤

由於 JavaScript是弱型別語言， 在使用變數和傳遞引數之前，不會對它們進行比較來確保資料型別的正確。所以，這樣開發人員必須需要靠自己去檢測。

function getQueryString(url) { //傳遞了非字串，導致錯誤
<span style="white-space:pre">	</span>var pos = url.indexOf('?');
<span style="white-space:pre">	</span>return pos;
}
alert(getQueryString(1));

PS：為了避免這種錯誤的出現，我們應該使用型別比較。

function getQueryString(url) {
<span style="white-space:pre">	</span>if (typeof url == 'string') { //判斷了指定型別，就不會出錯了
<span style="white-space:pre">	</span>var pos = url.indexOf('?');
<span style="white-space:pre">	</span>return pos;
<span style="white-space:pre">	</span>}
}
alert(getQueryString(1));

PS：對於傳遞引數除了限制數字、字串之外，我們對陣列也要進行限制。

function sortArray(arr) {
<span style="white-space:pre">	</span>if (arr) { //只判斷布林值遠遠不夠
<span style="white-space:pre">	</span>alert(arr.sort());
<span style="white-space:pre">	</span>}
}
var box = [3,5,1];
sortArray(box);

PS： 只用 if (arr)判斷布林值，那麼數值、字串、物件等都會自動轉換為 true，而這些型別呼叫 sort()方法比如會產生錯誤，這裡提一下：空陣列會自動轉換為 true而非 false。

function sortArray(arr) {
<span style="white-space:pre">	</span>if (typeof arr.sort == 'function') { //判斷傳遞過來 arr是否有 sort方法
<span style="white-space:pre">	</span>alert(arr.sort()); //就算這個繞過去了
<span style="white-space:pre">	</span>alert(arr.reverse()); //這個就又繞不過去了
<span style="white-space:pre">	</span>}
}
var box = { //建立一個自定義物件，新增 sort方法
<span style="white-space:pre">	</span>sort : function () {}
};
sortArray(box);

PS： 這斷程式碼本意是判斷 arr是否有 sort方法， 因為只有陣列有 sort方法， 從而判斷arr是陣列。但忘記了，自定義物件添加了 sort方法就可以繞過這個判斷，且 arr還不是陣列。

function sortArray(arr) {
<span style="white-space:pre">	</span>if (arr instanceofArray) { //使用 instanceof判斷是 Array最為合適
<span style="white-space:pre">	</span>alert(arr.sort());
<span style="white-space:pre">	</span>}
}
var box = [3,5,1];
sortArray(box);

3.通訊錯誤

    在使用 url進行引數傳遞時，經常會傳遞一些中文名的引數或 URL地址，在後臺處理時會發生轉換亂碼或錯誤，因為不同的瀏覽器對傳遞的引數解釋是不同的，所以有必要使用編碼進行統一傳遞。
比如： ?user=李炎恢&age=100

var url = '?user=' + encodeURIComponent('李炎恢') + '&age=100'; //編碼

    這三種錯誤一般會在特定的模式下或者沒有對值進行充分檢查的情況下發生。

五、除錯技術

1、設定斷點

    我們可以選擇Script(指令碼)， 點選要設定斷點的JS指令碼處， 即可設定斷點。 當我們需要除錯的時候，從斷點初開始模擬執行，發現程式碼執行的流程和變化。

2、單步除錯

    設定完斷點後，可以點選單步除錯，一步步看程式碼執行的步驟和流程。上面有五個按鈕：

重新執行：重新單步除錯
斷繼：正常執行程式碼
單步進入：一步一步執行流程
單步跳過：跳到下一個函式塊
單步退出：跳出執行到內部的函式

3、監控

    單擊“ 監控”選項卡上， 可以檢視在單步進入是， 所有變數值的變化。 你也可以新建監控表示式來重點檢視自己所關心的變數。

4、控制檯

   顯示各種資訊。

六、學習心得

1、錯誤處理在軟體開發中佔著重要的地位，合理的處理錯誤，顯示人性化的介面，為使用者著想。

2、條條大路通羅馬，不同的除錯方法，相同的除錯結果，換個角度，看到的更多。

3、將錯誤丟擲來的同時記得處理，一直拋不處理也是不正確的做法。