JavaScript Object Oriented Programming - Exceptions

JavaScript Object Oriented Programming - Exceptions JavaScript Object Oriented Programming - Exceptions

「例外(Exceptions)」是一個特別且重要的處理錯誤的方法。

Check-first error handling

假設我們要執行func這個method,首先會檢查這個method是否存在。

if (window.func) {
  func();
}

但檢查了是否存在,不代表型別正確,因此我們必須再檢查這個method的型別是否為function。

if (typeof(func) == 'function') {
  func();
}

但意外或錯誤是永遠檢查不完的,例如,這個method的內部可能有些問題。因此,我們可以改用「Try..Catch」來處理。

The try..catch construct

上一個例子是預先把可能發生的問題都檢查一次,例如:存在與否、型別是否正確,如果通過檢查再執行。而「Try..Catch」從另外一個角度來處理 - 先執行,如果有錯再處理。範例如下。

try {
  func();
} 
catch(e) {
  alert(e);
}

這個「e」會告訴我們到底發生什麼問題。

try {
  var a = 5, res = func(a);

  if (res > 0) {
    doA();
  }
  else {
    doB();
  }
} 
catch(e) {
  console.log("name: " + e.name); //name: ReferenceError
  console.log("message: " + e.message); //message: doB is not defined
}

由錯誤訊息可知,doB這個function沒有被定義,因此無法執行而出錯。

The full form of try..catch..finally

try {
   //try statemenets ..
} 
catch(exception) {
   //catch statements ..
} 
finally {
   //finally statements ..
}

首先執行try區塊內的程式碼,如果沒有出錯,則catch區塊會被忽略不執行。如果有錯誤產生,則exception會被設定值,catch區塊會被執行。無論如何,最後,finally區塊都會被執行。

try..catch..finally and return

在try區塊執行return statments,控制權會在執行完finally區塊後才交回給原呼叫的function。所以如下程式碼所示,會先alert 「done」,再alert 「2」。

function inc(a) {
  try {
    return a+1;
  } 
  catch(e) {
    //catch statements...
  } 
  finally {
    alert('done'); //1. alert "done"
  }
}
alert( inc(1) ); //2. alert "2"

The throw statement

基本上,錯誤可以分為兩種:「Programmatic errors」和「Execution flow errors」。

  • Programmatic errors:程式撰寫錯誤,例如:錯字。
  • Execution flow errors:執行時的錯誤,例如:使用者輸入不符合預定格式的資料,程式提示格式有誤並重新輸入。

因此,使用try...catch與throw於Execution flow errors是一個不錯的選擇,範例如下。

try {
  throw 5;
} 
catch(e) {
  alert("Caught: " + e);
}

A validator example

假設我們需要一個年齡的驗證工具,幫助我們檢查使用者輸入的年齡是否合法。如果沒有輸入任何東西,則跳出;如果輸入非文字,則丟出錯誤;如果是數字,則顯示可接受的訊息。

function validatorAge(age){
    if(age === ''){
        return; //no age to valid
    }
    age = +age;

    if(isNaN(age)){
        throw {
            name: 'BadAge',
            message: 'Age out of range'
        }
    }
}

try {
    var age = prompt('Enter your age');
    validatorAge(age);
    alert('The age is accepted');
}
catch(e){
    alert('Error: ' + e.message);
}

Changes in the usage pattern

除了try...catch的用法,當然我們也可以使用error-checking的方法。

function validatorAge(age){
    if(age === ''){
        return; //no age to valid
    }
    age = +age;

    if(isNaN(age)){
        return false;
    }
    else{
        return true;
    }
}

var value = prompt('Enter your age'),
    error = validatorAge(value);

if(!error){
    //process error
    alert('Invalid error!');
}
else{
    //success
    alert('The age is accepted');
}

Comparison

  • try..catch較簡潔,可讀性較高。
  • error-checking無法檢查所有的錯誤,但try..catch確可捕捉所有錯誤,所以try..catch是唯一萬無一失的方法。尤其在檢查瀏覽器相容的錯誤的時候。

Exception analysis and rethrow

有時候,程式碼可能會產生不同種類的錯誤。因此,我們使用「if」來選擇適當的動作。結構類似如下:

try {
  // 1. do smth
} 
catch(e) {
    if (e instanceof ValidationError) {
        // 2.1 process e
    } 
    else if (e instanceof PermissionError) {
        // 2.2 process e
    } 
    else {
        // 3. we don't know how to deal with e
        throw e
    }
}

在try區塊可能丟出了某些錯誤,有些錯誤是我們已知的,例如:ValidationError和PermissionError,然後去處理這些已知的e。但有些我們並不確定,因此直接丟出e。這裡丟出的e,需要由外層的try..catch來處理。

Summary

  • try..catch..finally將多種檢查合併在一個try區塊內執行,並將error-handlin分散在catch區塊來做錯誤的處理。
  • try..catch..finally能捕捉和處理所有的錯誤。丟出的錯誤可使用JavaScript-generated或自行定義的。
  • 錯誤建議繼承基本錯誤物件。因此,可用instanceof來檢查錯誤的類型,如上範例檢查ValidationError和PermissionError。

Reference


由於部落格搬家了,因此在新落格也放了一份,未來若有增刪會在這裡更新-JavaScript Object Oriented Programming: Exceptions
張貼留言