錯誤處理機制

Error對象

Error對象有三個最基本的屬性:
name: 屬性名稱
message: 錯誤提示信息
stack: 錯誤的堆棧(非標準屬性,但是大多數平臺支持)

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

JavaScript的原生錯誤類型

Error對象是最一般的錯誤類型,在它的基礎上,JavaScript還定義了其他6種錯誤,也就是說,存在Error的6個派生對象
(1).SyntaxError
解析代碼時發生語法錯誤
(2).ReferenceError
引用一個不存在的變量時發生的錯誤
(3).RangeError
當一個值超出有效範圍時發生的錯誤.一是數組長度爲負數,二是Number對象的方法參數超出範圍,以及函數堆棧超出最大值.
(4).TypeError
變量或參數不是預期類型時發生的錯誤.
(5).URIError
是URI相關函數的參數不正確時拋出的錯誤,主要涉及encodeURI(),decodeURI(),encodeURIComponent(),decodeURIComponent,escape(),unescape()這六個函數
(6).EvalError
eval函數沒有被正確執行時,會拋出EvalError錯誤.

自定義錯誤

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

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

throw語句

throw語句的作用是中斷程序執行,拋出一個意外或錯誤。它接受一個表達式作爲參數。
上面代碼表示,throw可以接受各種值作爲參數。JavaScript引擎一旦遇到throw語句,就會停止執行後面的語句,並將throw語句的參數值,返回給用戶。

try…catch結構

try代碼塊拋出的錯誤(包括用throw語句拋出錯誤),可以被catch代碼塊捕獲。catch接受一個參數,表示try代碼塊傳入的錯誤對象。
catch代碼塊捕獲錯誤之後,程序不會中斷,會按照正常流程繼續執行下去。
catch代碼塊之中,還可以再拋出錯誤,甚至使用嵌套的try…catch結構。

finally代碼塊

try…catch結構允許在最後添加一個finally代碼塊,表示不管是否出現錯誤,都必需在最後運行的語句。

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

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

即使有return語句在前,finally代碼塊依然會得到執行,且在其執行完畢後,纔會顯示return語句的值。
return語句的執行是排在finanlly代碼之前,只是等finnally代碼執行完畢後才返回。

try…catch…finally這三者之間的執行順序

JavaScript 標準參考教程(alpha)
基本語法
錯誤處理機制
GitHub 
TOP 
錯誤處理機制

來自《JavaScript 標準參考教程(alpha)》,by 阮一峯

目錄
Error對象
JavaScript的原生錯誤類型
自定義錯誤
throw語句
try...catch結構
finally代碼塊
參考連接
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種錯誤,也就是說,存在Error6個派生對象。

(1SyntaxError

SyntaxError是解析代碼時發生的語法錯誤。

// 變量名錯誤
var 1a;

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

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錯誤。

(3RangeError

RangeError是當一個值超出有效範圍時發生的錯誤。主要有幾種情況,一是數組長度爲負數,二是Number對象的方法參數超出範圍,以及函數堆棧超過最大值。

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

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

TypeError是變量或參數不是預期類型時發生的錯誤。比如,對字符串、布爾值、數值等原始類型的值使用new命令,就會拋出這種錯誤,因爲new命令的參數應該是一個構造函數。

new 123
//TypeError: number is not a func

var obj = {};
obj.unknownMethod()
// TypeError: undefined is not a function
上面代碼的第二種情況,調用對象不存在的方法,會拋出TypeError錯誤。

(5URIError

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

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

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
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章