[TOC] ## Error對象 一旦代碼解析或運行時發生錯誤，JavaScript引擎就會自動產生并拋出一個Error對象的實例，然后整個程序就中斷在發生錯誤的地方。 Error對象的實例有三個最基本的屬性： * name：錯誤名稱 * message：錯誤提示信息 * stack：錯誤的堆棧（非標準屬性，但是大多數平臺支持） 利用name和message這兩個屬性，可以對發生什么錯誤有一個大概的了解。 ~~~ if (error.name){ console.log(error.name + ": " + error.message); } ~~~ 上面代碼表示，顯示錯誤的名稱以及出錯提示信息。 stack屬性用來查看錯誤發生時的堆棧。 ~~~ function throwit() { throw new Error(''); } function catchit() { try { throwit(); } catch(e) { console.log(e.stack); // print stack trace } } catchit() // Error // at throwit (~/examples/throwcatch.js:9:11) // at catchit (~/examples/throwcatch.js:3:9) // at repl:1:5 ~~~ 上面代碼顯示，拋出錯誤首先是在throwit函數，然后是在catchit函數，最后是在函數的運行環境中。 ## JavaScript的原生錯誤類型 Error對象是最一般的錯誤類型，在它的基礎上，JavaScript還定義了其他6種錯誤，也就是說，存在Error的6個派生對象。 （1）SyntaxError SyntaxError是解析代碼時發生的語法錯誤。 ~~~ // 變量名錯誤 var 1a; // 缺少括號 console.log 'hello'); ~~~ （2）ReferenceError ReferenceError是引用一個不存在的變量時發生的錯誤。 ~~~ unknownVariable // ReferenceError: unknownVariable is not defined ~~~ 另一種觸發場景是，將一個值分配給無法分配的對象，比如對函數的運行結果或者this賦值。 ~~~ console.log() = 1 // ReferenceError: Invalid left-hand side in assignment this = 1 // ReferenceError: Invalid left-hand side in assignment ~~~ 上面代碼對函數console.log的運行結果和this賦值，結果都引發了ReferenceError錯誤。 （3）RangeError RangeError是當一個值超出有效范圍時發生的錯誤。主要有幾種情況，一是數組長度為負數，二是Number對象的方法參數超出范圍，以及函數堆棧超過最大值。 ~~~ new Array(-1) // RangeError: Invalid array length (1234).toExponential(21) // RangeError: toExponential() argument must be between 0 and 20 ~~~ （4）TypeError TypeError是變量或參數不是預期類型時發生的錯誤。比如，對字符串、布爾值、數值等原始類型的值使用new命令，就會拋出這種錯誤，因為new命令的參數應該是一個構造函數。 ~~~ new 123 //TypeError: number is not a func var obj = {}; obj.unknownMethod() // TypeError: undefined is not a function ~~~ 上面代碼的第二種情況，調用對象不存在的方法，會拋出TypeError錯誤。 （5）URIError URIError是URI相關函數的參數不正確時拋出的錯誤，主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()這六個函數。 ~~~ decodeURI('%2') // URIError: URI malformed ~~~ （6）EvalError eval函數沒有被正確執行時，會拋出EvalError錯誤。該錯誤類型已經不再在ES5中出現了，只是為了保證與以前代碼兼容，才繼續保留。 以上這6種派生錯誤，連同原始的Error對象，都是構造函數。開發者可以使用它們，人為生成錯誤對象的實例。 ~~~ new Error("出錯了！"); new RangeError("出錯了，變量超出有效范圍！"); new TypeError("出錯了，變量類型無效！"); ~~~ 上面代碼表示新建錯誤對象的實例，實質就是手動拋出錯誤。可以看到，錯誤對象的構造函數接受一個參數，代表錯誤提示信息（message）。 ## 自定義錯誤 除了JavaScript內建的7種錯誤對象，還可以定義自己的錯誤對象。 ~~~ function UserError(message) { this.message = message || "默認信息"; this.name = "UserError"; } UserError.prototype = new Error(); UserError.prototype.constructor = UserError; ~~~ 上面代碼自定義一個錯誤對象UserError，讓它繼承Error對象。然后，就可以生成這種自定義的錯誤了。 ~~~ new UserError("這是自定義的錯誤！"); ~~~ ## throw語句 throw語句的作用是中斷程序執行，拋出一個意外或錯誤。它接受一個表達式作為參數。 ~~~ throw "Error！"; throw 42; throw true; throw {toString: function() { return "Error!"; } }; ~~~ 上面代碼表示，throw可以接受各種值作為參數。JavaScript引擎一旦遇到throw語句，就會停止執行后面的語句，并將throw語句的參數值，返回給用戶。 如果只是簡單的錯誤，返回一條出錯信息就可以了，但是如果遇到復雜的情況，就需要在出錯以后進一步處理。這時最好的做法是使用throw語句手動拋出一個Error對象。 ~~~ throw new Error('出錯了!'); ~~~ 上面語句新建一個Error對象，然后將這個對象拋出，整個程序就會中斷在這個地方。 throw語句還可以拋出用戶自定義的錯誤。 ~~~ function UserError(message) { this.message = message || "默認信息"; this.name = "UserError"; } UserError.prototype.toString = function (){ return this.name + ': "' + this.message + '"'; } throw new UserError("出錯了！"); ~~~ ## try...catch結構 為了對錯誤進行處理，需要使用try...catch結構。 ~~~ try { throw new Error('出錯了!'); } catch (e) { console.log(e.name + ": " + e.message); // Error: 出錯了！ console.log(e.stack); // 不是標準屬性，但是瀏覽器支持 } // Error: 出錯了! // Error: 出錯了! // at <anonymous>:3:9 // at Object.InjectedScript._evaluateOn (<anonymous>:895:140) // at Object.InjectedScript._evaluateAndWrap (<anonymous>:828:34) // at Object.InjectedScript.evaluate (<anonymous>:694:21) ~~~ 上面代碼中，try代碼塊拋出的錯誤（包括用throw語句拋出錯誤），可以被catch代碼塊捕獲。catch接受一個參數，表示try代碼塊傳入的錯誤對象。 ~~~ function throwIt(exception) { try { throw exception; } catch (e) { console.log('Caught: '+e); } } throwIt(3); // Caught: 3 throwIt('hello'); // Caught: hello throwIt(new Error('An error happened')); // Caught: Error: An error happened ~~~ catch代碼塊捕獲錯誤之后，程序不會中斷，會按照正常流程繼續執行下去。 ~~~ try { throw "出錯了"; } catch (e) { console.log(111); } console.log(222); // 111 // 222 ~~~ 上面代碼中，try代碼塊拋出的錯誤，被catch代碼塊捕獲后，程序會繼續向下執行。 catch代碼塊之中，還可以再拋出錯誤，甚至使用嵌套的try...catch結構。 ~~~ try { throw n; // 這里拋出一個整數 } catch (e) { if (e <= 50) { // 針對1-50的錯誤的處理 } else { // 大于50的錯誤無法處理，再拋出一個錯誤 throw e; } } ~~~ 為了捕捉不同類型的錯誤，catch代碼塊之中可以加入判斷語句。 ~~~ try { foo.bar(); } catch (e) { if (e instanceof EvalError) { console.log(e.name + ": " + e.message); } else if (e instanceof RangeError) { console.log(e.name + ": " + e.message); } // ... } ~~~ try...catch結構是JavaScript語言受到Java語言影響的一個明顯的例子。這種結構多多少少是對結構化編程原則一種破壞，處理不當就會變成類似goto語句的效果，應該謹慎使用。 ## finally代碼塊 try...catch結構允許在最后添加一個finally代碼塊，表示不管是否出現錯誤，都必需在最后運行的語句。 ~~~ function cleansUp() { try { throw new Error('Sorry...'); } finally { console.log('Performing clean-up'); } } cleansUp() // Performing clean-up // Error: Sorry... ~~~ 上面代碼說明，throw語句拋出錯誤以后，finanlly繼續得到執行。 ~~~ function idle(x) { try { console.log(x); return 'result'; } finally { console.log("FINALLY"); } } idle('hello') // hello // FINALLY // "result" ~~~ 上面代碼說明，即使有return語句在前，finally代碼塊依然會得到執行，且在其執行完畢后，才會顯示return語句的值。 下面的例子說明，return語句的執行是排在finanlly代碼之前，只是等finnally代碼執行完畢后才返回。 ~~~ var count = 0; function countUp() { try { return count; } finally { count++; } } countUp() // 0 count // 1 ~~~ 上面代碼說明，return語句的count的值，是在finally代碼塊運行之前，就獲取完成了。 下面是另一個例子。 ~~~ openFile(); try { writeFile(Data); } catch(e) { handleError(e); } finally { closeFile(); } ~~~ 上面代碼首先打開一個文件，然后在try代碼塊中寫入文件，如果沒有發生錯誤，則運行finally代碼塊關閉文件；一旦發生錯誤，則先使用catch代碼塊處理錯誤，再使用finally代碼塊關閉文件。 下面的例子充分反應了try...catch...finally這三者之間的執行順序。 ~~~ function f() { try { console.log(0); throw "bug"; } catch(e) { console.log(1); return true; // 這句會延遲到finally代碼塊結束再執行 console.log(2); // 不會運行 } finally { console.log(3); return false; // 這句會覆蓋掉前面那句return console.log(4); // 不會運行 } console.log(5); // 不會運行 } var result = f(); // 0 // 1 // 3 result // false ~~~ 某些情況下，甚至可以省略catch代碼塊，只使用finally代碼塊。 ~~~ openFile(); try { writeFile(Data); } finally { closeFile(); } ~~~ ## 參考連接 * Jani Hartikainen,?[JavaScript Errors and How to Fix Them](http://davidwalsh.name/fix-javascript-errors)