JavaScript 錯誤處理機制

Error對象

一旦代碼解析或運行時發(fā)生錯誤，JavaScript引擎就會自動產(chǎn)生并拋出一個Error對象的實例，然后整個程序就中斷在發(fā)生錯誤的地方。

Error對象的實例有三個最基本的屬性：

• name：錯誤名稱
• message：錯誤提示信息
• stack：錯誤的堆棧（非標準屬性，但是大多數(shù)平臺支持）

利用name和message這兩個屬性，可以對發(fā)生什么錯誤有一個大概的了解。

if (error.name){
  console.log(error.name + ": " + error.message);
}

上面代碼表示，顯示錯誤的名稱以及出錯提示信息。

stack屬性用來查看錯誤發(fā)生時的堆棧。

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函數(shù)，然后是在catchit函數(shù)，最后是在函數(shù)的運行環(huán)境中。

JavaScript的原生錯誤類型

Error對象是最一般的錯誤類型，在它的基礎上，JavaScript還定義了其他6種錯誤，也就是說，存在Error的6個派生對象。

（1）SyntaxError

SyntaxError是解析代碼時發(fā)生的語法錯誤。

// 變量名錯誤
var 1a;

// 缺少括號
console.log 'hello');

（2）ReferenceError

ReferenceError是引用一個不存在的變量時發(fā)生的錯誤。

unknownVariable
// ReferenceError: unknownVariable is not defined

另一種觸發(fā)場景是，將一個值分配給無法分配的對象，比如對函數(shù)的運行結(jié)果或者this賦值。

console.log() = 1
// ReferenceError: Invalid left-hand side in assignment

this = 1
// ReferenceError: Invalid left-hand side in assignment

上面代碼對函數(shù)console.log的運行結(jié)果和this賦值，結(jié)果都引發(fā)了ReferenceError錯誤。

（3）RangeError

RangeError是當一個值超出有效范圍時發(fā)生的錯誤。主要有幾種情況，一是數(shù)組長度為負數(shù)，二是Number對象的方法參數(shù)超出范圍，以及函數(shù)堆棧超過最大值。

new Array(-1)
// RangeError: Invalid array length

(1234).toExponential(21)
// RangeError: toExponential() argument must be between 0 and 20

（4）TypeError

TypeError是變量或參數(shù)不是預期類型時發(fā)生的錯誤。比如，對字符串、布爾值、數(shù)值等原始類型的值使用new命令，就會拋出這種錯誤，因為new命令的參數(shù)應該是一個構(gòu)造函數(shù)。

new 123
//TypeError: number is not a func

var obj = {};
obj.unknownMethod()
// TypeError: undefined is not a function

上面代碼的第二種情況，調(diào)用對象不存在的方法，會拋出TypeError錯誤。

（5）URIError

URIError是URI相關函數(shù)的參數(shù)不正確時拋出的錯誤，主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()這六個函數(shù)。

decodeURI('%2')
// URIError: URI malformed

（6）EvalError

eval函數(shù)沒有被正確執(zhí)行時，會拋出EvalError錯誤。該錯誤類型已經(jīng)不再在ES5中出現(xiàn)了，只是為了保證與以前代碼兼容，才繼續(xù)保留。

以上這6種派生錯誤，連同原始的Error對象，都是構(gòu)造函數(shù)。開發(fā)者可以使用它們，人為生成錯誤對象的實例。

new Error("出錯了！");
new RangeError("出錯了，變量超出有效范圍！");
new TypeError("出錯了，變量類型無效！");

上面代碼表示新建錯誤對象的實例，實質(zhì)就是手動拋出錯誤?？梢钥吹剑e誤對象的構(gòu)造函數(shù)接受一個參數(shù)，代表錯誤提示信息（message）。

自定義錯誤

除了JavaScript內(nèi)建的7種錯誤對象，還可以定義自己的錯誤對象。

function UserError(message) {
   this.message = message || "默認信息";
   this.name = "UserError";
}

UserError.prototype = new Error();
UserError.prototype.constructor = UserError;

上面代碼自定義一個錯誤對象UserError，讓它繼承Error對象。然后，就可以生成這種自定義的錯誤了。

new UserError("這是自定義的錯誤！");

throw語句

throw語句的作用是中斷程序執(zhí)行，拋出一個意外或錯誤。它接受一個表達式作為參數(shù)。

throw "Error！";
throw 42;
throw true;
throw {toString: function() { return "Error!"; } };

上面代碼表示，throw可以接受各種值作為參數(shù)。JavaScript引擎一旦遇到throw語句，就會停止執(zhí)行后面的語句，并將throw語句的參數(shù)值，返回給用戶。

如果只是簡單的錯誤，返回一條出錯信息就可以了，但是如果遇到復雜的情況，就需要在出錯以后進一步處理。這時最好的做法是使用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結(jié)構(gòu)

為了對錯誤進行處理，需要使用try...catch結(jié)構(gòu)。

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接受一個參數(shù)，表示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代碼塊捕獲錯誤之后，程序不會中斷，會按照正常流程繼續(xù)執(zhí)行下去。

try {
  throw "出錯了";
} catch (e) {
  console.log(111);
}
console.log(222);
// 111
// 222

上面代碼中，try代碼塊拋出的錯誤，被catch代碼塊捕獲后，程序會繼續(xù)向下執(zhí)行。

catch代碼塊之中，還可以再拋出錯誤，甚至使用嵌套的try...catch結(jié)構(gòu)。

try {
   throw n; // 這里拋出一個整數(shù)
} 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結(jié)構(gòu)是JavaScript語言受到Java語言影響的一個明顯的例子。這種結(jié)構(gòu)多多少少是對結(jié)構(gòu)化編程原則一種破壞，處理不當就會變成類似goto語句的效果，應該謹慎使用。

finally代碼塊

try...catch結(jié)構(gòu)允許在最后添加一個finally代碼塊，表示不管是否出現(xiàn)錯誤，都必需在最后運行的語句。

function cleansUp() {
    try {
        throw new Error('Sorry...');
    } finally {
        console.log('Performing clean-up');
    }
}

cleansUp()
// Performing clean-up
// Error: Sorry...

上面代碼說明，throw語句拋出錯誤以后，finanlly繼續(xù)得到執(zhí)行。

function idle(x) {
    try {
        console.log(x);
        return 'result';
    } finally {
        console.log("FINALLY");
    }
}

idle('hello')
// hello
// FINALLY
// "result"

上面代碼說明，即使有return語句在前，finally代碼塊依然會得到執(zhí)行，且在其執(zhí)行完畢后，才會顯示return語句的值。

下面的例子說明，return語句的執(zhí)行是排在finanlly代碼之前，只是等finnally代碼執(zhí)行完畢后才返回。

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代碼塊中寫入文件，如果沒有發(fā)生錯誤，則運行finally代碼塊關閉文件；一旦發(fā)生錯誤，則先使用catch代碼塊處理錯誤，再使用finally代碼塊關閉文件。

下面的例子充分反應了try...catch...finally這三者之間的執(zhí)行順序。

function f() {
    try {
        console.log(0);
        throw "bug";
    } catch(e) {
        console.log(1);
        return true; // 這句會延遲到finally代碼塊結(jié)束再執(zhí)行
        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