JavaScript 錯(cuò)誤處理機(jī)制

目錄

JavaScript解析或執(zhí)行時(shí)，一旦發(fā)生錯(cuò)誤，引擎就會(huì)拋出一個(gè)錯(cuò)誤對(duì)象。JavaScript原生提供一個(gè)Error構(gòu)造函數(shù)，所有拋出的錯(cuò)誤都是這個(gè)構(gòu)造函數(shù)的實(shí)例。

var err = new Error('出錯(cuò)了');
err.message // "出錯(cuò)了"

上面代碼中，我們調(diào)用Error構(gòu)造函數(shù)，生成一個(gè)err實(shí)例。

Error構(gòu)造函數(shù)接受一個(gè)參數(shù)，表示錯(cuò)誤提示，可以從實(shí)例的message屬性讀到這個(gè)參數(shù)。

代碼解析或運(yùn)行時(shí)發(fā)生錯(cuò)誤，JavaScript引擎就會(huì)自動(dòng)產(chǎn)生、并拋出一個(gè)Error對(duì)象的實(shí)例，然后整個(gè)程序就中斷在發(fā)生錯(cuò)誤的地方，不再往下執(zhí)行。

根據(jù)語(yǔ)言標(biāo)準(zhǔn)，Error對(duì)象的實(shí)例必須有message屬性，表示出錯(cuò)時(shí)的提示信息，其他屬性則沒有提及。大多數(shù)JavaScript引擎，對(duì)Error實(shí)例還提供name和stack屬性，分別表示錯(cuò)誤的名稱和錯(cuò)誤的堆棧，但它們是非標(biāo)準(zhǔn)的，不是每種實(shí)現(xiàn)都有。

• message：錯(cuò)誤提示信息
• name：錯(cuò)誤名稱（非標(biāo)準(zhǔn)屬性）
• stack：錯(cuò)誤的堆棧（非標(biāo)準(zhǔn)屬性）

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

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

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

stack屬性用來(lái)查看錯(cuò)誤發(fā)生時(shí)的堆棧。

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

上面代碼顯示，拋出錯(cuò)誤首先是在throwit函數(shù)，然后是在catchit函數(shù)，最后是在函數(shù)的運(yùn)行環(huán)境中。

Error對(duì)象是最一般的錯(cuò)誤類型，在它的基礎(chǔ)上，JavaScript還定義了其他6種錯(cuò)誤，也就是說(shuō)，存在Error的6個(gè)派生對(duì)象。

（1）SyntaxError

SyntaxError是解析代碼時(shí)發(fā)生的語(yǔ)法錯(cuò)誤。

// 變量名錯(cuò)誤
var 1a;

// 缺少括號(hào)
console.log 'hello');

（2）ReferenceError

ReferenceError是引用一個(gè)不存在的變量時(shí)發(fā)生的錯(cuò)誤。

unknownVariable
// ReferenceError: unknownVariable is not defined

另一種觸發(fā)場(chǎng)景是，將一個(gè)值分配給無(wú)法分配的對(duì)象，比如對(duì)函數(shù)的運(yùn)行結(jié)果或者this賦值。

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

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

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

（3）RangeError

RangeError是當(dāng)一個(gè)值超出有效范圍時(shí)發(fā)生的錯(cuò)誤。主要有幾種情況，一是數(shù)組長(zhǎng)度為負(fù)數(shù)，二是Number對(duì)象的方法參數(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ù)不是預(yù)期類型時(shí)發(fā)生的錯(cuò)誤。比如，對(duì)字符串、布爾值、數(shù)值等原始類型的值使用new命令，就會(huì)拋出這種錯(cuò)誤，因?yàn)?code class="highlighter-rouge">new命令的參數(shù)應(yīng)該是一個(gè)構(gòu)造函數(shù)。

new 123
//TypeError: number is not a func

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

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

（5）URIError

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

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

（6）EvalError

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

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

new Error('出錯(cuò)了！');
new RangeError('出錯(cuò)了，變量超出有效范圍！');
new TypeError('出錯(cuò)了，變量類型無(wú)效！');

上面代碼新建錯(cuò)誤對(duì)象的實(shí)例，實(shí)質(zhì)就是手動(dòng)拋出錯(cuò)誤。可以看到，錯(cuò)誤對(duì)象的構(gòu)造函數(shù)接受一個(gè)參數(shù)，代表錯(cuò)誤提示信息（message）。

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

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

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

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

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

throw語(yǔ)句的作用是中斷程序執(zhí)行，拋出一個(gè)意外或錯(cuò)誤。它接受一個(gè)表達(dá)式作為參數(shù)，可以拋出各種值。

// 拋出一個(gè)字符串
throw "Error！";

// 拋出一個(gè)數(shù)值
throw 42;

// 拋出一個(gè)布爾值
throw true;

// 拋出一個(gè)對(duì)象
throw {toString: function() { return "Error!"; } };

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

如果只是簡(jiǎn)單的錯(cuò)誤，返回一條出錯(cuò)信息就可以了，但是如果遇到復(fù)雜的情況，就需要在出錯(cuò)以后進(jìn)一步處理。這時(shí)最好的做法是使用throw語(yǔ)句手動(dòng)拋出一個(gè)Error對(duì)象。

throw new Error('出錯(cuò)了!');

上面語(yǔ)句新建一個(gè)Error對(duì)象，然后將這個(gè)對(duì)象拋出，整個(gè)程序就會(huì)中斷在這個(gè)地方。

throw語(yǔ)句還可以拋出用戶自定義的錯(cuò)誤。

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

UserError.prototype.toString = function (){
  return this.name + ': "' + this.message + '"';
}

throw new UserError("出錯(cuò)了！");

可以通過自定義一個(gè)assert函數(shù)，規(guī)范化throw拋出的信息。

function assert(expression, message) {
  if (!expression)
    throw {name: 'Assertion Exception', message: message};
}

上面代碼定義了一個(gè)assert函數(shù)，它接受一個(gè)表達(dá)式和一個(gè)字符串作為參數(shù)。一旦表達(dá)式不為真，就拋出指定的字符串。它的用法如下。

assert(typeof myVar != 'undefined', 'myVar is undefined!');

console對(duì)象的assert方法，與上面函數(shù)的工作機(jī)制一模一樣，所以可以直接使用。

console.assert(typeof myVar != 'undefined', 'myVar is undefined!');

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

try {
  throw new Error('出錯(cuò)了!');
} catch (e) {
  console.log(e.name + ": " + e.message);
  console.log(e.stack);
}
// Error: 出錯(cuò)了!
//   at <anonymous>:3:9
//   ...

上面代碼中，try代碼塊一拋出錯(cuò)誤（上例用的是throw語(yǔ)句），JavaScript引擎就立即把代碼的執(zhí)行，轉(zhuǎn)到catch代碼塊。可以看作，錯(cuò)誤可以被catch代碼塊捕獲。catch接受一個(gè)參數(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

上面代碼中，throw語(yǔ)句先后拋出數(shù)值、字符串和錯(cuò)誤對(duì)象。

catch代碼塊捕獲錯(cuò)誤之后，程序不會(huì)中斷，會(huì)按照正常流程繼續(xù)執(zhí)行下去。

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

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

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

var n = 100;

try {
  throw n;
} catch (e) {
  if (e <= 50) {
    // ...
  } else {
    throw e;
  }
}

上面代碼中，catch代碼之中又拋出了一個(gè)錯(cuò)誤。

為了捕捉不同類型的錯(cuò)誤，catch代碼塊之中可以加入判斷語(yǔ)句。

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);
  }
  // ...
}

上面代碼中，catch捕獲錯(cuò)誤之后，會(huì)判斷錯(cuò)誤類型（EvalError還是RangeError），進(jìn)行不同的處理。

try...catch結(jié)構(gòu)是JavaScript語(yǔ)言受到Java語(yǔ)言影響的一個(gè)明顯的例子。這種結(jié)構(gòu)多多少少是對(duì)結(jié)構(gòu)化編程原則一種破壞，處理不當(dāng)就會(huì)變成類似goto語(yǔ)句的效果，應(yīng)該謹(jǐn)慎使用。

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

function cleansUp() {
  try {
    throw new Error('出錯(cuò)了……');
    console.log('此行不會(huì)執(zhí)行');
  } finally {
    console.log('完成清理工作');
  }
}

cleansUp()
// 完成清理工作
// Error: 出錯(cuò)了……

上面代碼中，由于沒有catch語(yǔ)句塊，所以錯(cuò)誤沒有捕獲。執(zhí)行finally代碼塊以后，程序就中斷在錯(cuò)誤拋出的地方。

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

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

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

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

var count = 0;
function countUp() {
  try {
    return count;
  } finally {
    count++;
  }
}

countUp()
// 0
count
// 1

上面代碼說(shuō)明，return語(yǔ)句的count的值，是在finally代碼塊運(yùn)行之前，就獲取完成了。

下面是finally代碼塊用法的典型場(chǎng)景。

openFile();

try {
  writeFile(Data);
} catch(e) {
  handleError(e);
} finally {
  closeFile();
}

上面代碼首先打開一個(gè)文件，然后在try代碼塊中寫入文件，如果沒有發(fā)生錯(cuò)誤，則運(yùn)行finally代碼塊關(guān)閉文件；一旦發(fā)生錯(cuò)誤，則先使用catch代碼塊處理錯(cuò)誤，再使用finally代碼塊關(guān)閉文件。

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

function f() {
  try {
    console.log(0);
    throw 'bug';
  } catch(e) {
    console.log(1);
    return true; // 這句原本會(huì)延遲到finally代碼塊結(jié)束再執(zhí)行
    console.log(2); // 不會(huì)運(yùn)行
  } finally {
    console.log(3);
    return false; // 這句會(huì)覆蓋掉前面那句return
    console.log(4); // 不會(huì)運(yùn)行
  }

  console.log(5); // 不會(huì)運(yùn)行
}

var result = f();
// 0
// 1
// 3

result
// false

上面代碼中，catch代碼塊結(jié)束執(zhí)行之前，會(huì)先執(zhí)行finally代碼塊。從catch轉(zhuǎn)入finally的標(biāo)志，不僅有return語(yǔ)句，還有throw語(yǔ)句。

function f() {
  try {
    throw '出錯(cuò)了！';
  } catch(e) {
    console.log('捕捉到內(nèi)部錯(cuò)誤');
    throw e; // 這句原本會(huì)等到finally結(jié)束再執(zhí)行
  } finally {
    return false; // 直接返回
  }
}

try {
  f();
} catch(e) {
  // 此處不會(huì)執(zhí)行
  console.log('caught outer "bogus"');
}

//  捕捉到內(nèi)部錯(cuò)誤

上面代碼中，進(jìn)入catch代碼塊之后，一遇到throw語(yǔ)句，就會(huì)去執(zhí)行finally代碼塊，其中有return false語(yǔ)句，因此就直接返回了，不再會(huì)回去執(zhí)行catch代碼塊剩下的部分了。

• Jani Hartikainen, JavaScript Errors and How to Fix Them