JavaScript 錯誤處理機制

目錄

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

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

上面代碼中，我們調用Error構造函數(shù)，生成一個err實例。

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

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

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

• message：錯誤提示信息
• name：錯誤名稱（非標準屬性）
• stack：錯誤的堆棧（非標準屬性）

利用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)境中。

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ù)的運行結果或者this賦值。

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

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

上面代碼對函數(shù)console.log的運行結果和this賦值，結果都引發(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ù)應該是一個構造函數(shù)。

new 123
//TypeError: number is not a func

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

上面代碼的第二種情況，調用對象不存在的方法，會拋出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對象，都是構造函數(shù)。開發(fā)者可以使用它們，人為生成錯誤對象的實例。

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

上面代碼新建錯誤對象的實例，實質就是手動拋出錯誤?？梢钥吹?，錯誤對象的構造函數(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語句的作用是中斷程序執(zhí)行，拋出一個意外或錯誤。它接受一個表達式作為參數(shù)，可以拋出各種值。

// 拋出一個字符串
throw "Error！";

// 拋出一個數(shù)值
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("出錯了！");

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

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

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

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

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

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

為了對錯誤進行處理，需要使用try...catch結構。

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

上面代碼中，try代碼塊一拋出錯誤（上例用的是throw語句），JavaScript引擎就立即把代碼的執(zhí)行，轉到catch代碼塊?？梢钥醋?，錯誤可以被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

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

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

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

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

catch代碼塊之中，還可以再拋出錯誤，甚至使用嵌套的try...catch結構。

var n = 100;

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

上面代碼中，catch代碼之中又拋出了一個錯誤。

為了捕捉不同類型的錯誤，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);
  }
  // ...
}

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

try...catch結構是JavaScript語言受到Java語言影響的一個明顯的例子。這種結構多多少少是對結構化編程原則一種破壞，處理不當就會變成類似goto語句的效果，應該謹慎使用。

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

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

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

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

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í)行是排在finally代碼之前，只是等finally代碼執(zhí)行完畢后才返回。

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

countUp()
// 0
count
// 1

上面代碼說明，return語句的count的值，是在finally代碼塊運行之前，就獲取完成了。

下面是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代碼塊結束再執(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代碼塊結束執(zhí)行之前，會先執(zhí)行finally代碼塊。從catch轉入finally的標志，不僅有return語句，還有throw語句。

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

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

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

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

• Jani Hartikainen, JavaScript Errors and How to Fix Them