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

2021-09-15 15:12 更新

Error對(duì)象

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

Error對(duì)象的實(shí)例有三個(gè)最基本的屬性：

  • name：錯(cuò)誤名稱
  • message：錯(cuò)誤提示信息
  • stack：錯(cuò)誤的堆棧（非標(biāo)準(zhǔn)屬性，但是大多數(shù)平臺(tái)支持）

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

JavaScript的原生錯(cuò)誤類型

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ù)堆棧超過(guò)最大值。

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)閚ew命令的參數(shù)應(yīng)該是一個(gè)構(gòu)造函數(shù)。

new 123
//TypeError: number is not a func

var obj = {};
obj.unknownMethod()
// TypeError: undefined 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ù)沒(méi)有被正確執(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ò)誤?？梢钥吹剑e(cuò)誤對(duì)象的構(gòu)造函數(shù)接受一個(gè)參數(shù)，代表錯(cuò)誤提示信息（message）。

自定義錯(cuò)誤

除了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ǔ)句

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

throw "Error！";
throw 42;
throw true;
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ò)了！");

try...catch結(jié)構(gòu)

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

try {
  throw new Error('出錯(cuò)了!');
} catch (e) {
  console.log(e.name + ": " + e.message);  // Error: 出錯(cuò)了！
  console.log(e.stack);  // 不是標(biāo)準(zhǔn)屬性，但是瀏覽器支持
}
// Error: 出錯(cuò)了!
// Error: 出錯(cuò)了!
//   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代碼塊拋出的錯(cuò)誤（包括用throw語(yǔ)句拋出錯(cuò)誤），可以被catch代碼塊捕獲。catch接受一個(gè)參數(shù)，表示try代碼塊傳入的錯(cuò)誤對(duì)象。

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代碼塊捕獲錯(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)。

try {
   throw n; // 這里拋出一個(gè)整數(shù)
} catch (e) {
   if (e <= 50) {
      // 針對(duì)1-50的錯(cuò)誤的處理
   } else {
      // 大于50的錯(cuò)誤無(wú)法處理，再拋出一個(gè)錯(cuò)誤
      throw e;
   }
}

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

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)慎使用。

finally代碼塊

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

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

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

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

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

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

countUp()
// 0
count
// 1

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

下面是另一個(gè)例子。

openFile();

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

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

下面的例子充分反應(yīng)了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代碼塊，只使用finally代碼塊。

openFile();

try {
   writeFile(Data);
} finally {
   closeFile();
}

參考連接

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)