JavaScript原生錯誤類型及try、catch、finally

JavaScript原生錯誤類型

1. SyntaxError 對象

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

// 變量名錯誤
var 1a;
// Uncaught SyntaxError: Invalid or unexpected token

// 缺少括號
console.log 'hello');
// Uncaught SyntaxError: Unexpected string

上面代碼的錯誤，都是在語法解析階段就可以發現，所以會拋出SyntaxError。第一個錯誤提示是“token 非法”，第二個錯誤提示是“字符串不符合要求”

2. ReferenceError 對象

ReferenceError對象是引用一個不存在的變量時發生的錯誤。

// 使用一個不存在的變量
unknownVariable
// Uncaught ReferenceError: unknownVariable is not defined

另一種觸發場景是，將一個值分配給無法分配的對象，比如對函數的運行結果或者this賦值。

// 等號左側不是變量
console.log() = 1
// Uncaught ReferenceError: Invalid left-hand side in assignment

// this 對象不能手動賦值
this = 1
// ReferenceError: Invalid left-hand side in assignment

上面代碼對函數console.log的運行結果和this賦值，結果都引發了ReferenceError錯誤。

3. RangeError 對象

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

// 數組長度不得爲負數
new Array(-1)
// Uncaught RangeError: Invalid array length

4. TypeError 對象

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

new 123
// Uncaught TypeError: number is not a func

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

上面代碼的第二種情況，調用對象不存在的方法，也會拋出TypeError錯誤，因爲obj.unknownMethod的值是undefined，而不是一個函數。

5. URIError 對象

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

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

6. EvalError 對象

eval函數沒有被正確執行時，會拋出EvalError錯誤。該錯誤類型已經不再使用了，只是爲了保證與以前代碼兼容，才繼續保留。

throw 語句

throw語句的作用是手動中斷程序執行，拋出一個錯誤

if (x <= 0) {
  throw new Error('x 必須爲正數');
}
// Uncaught ReferenceError: x is not defined

上面代碼中，如果變量x小於等於0，就手動拋出一個錯誤，告訴用戶x的值不正確，整個程序就會在這裏中斷執行。可以看到，throw拋出的錯誤就是它的參數，這裏是一個Error實例。

try…catch 結構

一旦發生錯誤，程序就中止執行了。JavaScript 提供了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 引擎就立即把代碼的執行，轉到catch代碼塊，或者說錯誤被catch代碼塊捕獲了。catch接受一個參數，表示try代碼塊拋出的值。

如果你不確定某些代碼是否會報錯，就可以把它們放在try…catch代碼塊之中，便於進一步對錯誤進行處理。

try {
  f();
} catch(e) {
  // 處理錯誤
}

上面代碼中，如果函數f執行報錯，就會進行catch代碼塊，接着對錯誤進行處理。
catch代碼塊捕獲錯誤之後，程序不會中斷，會按照正常流程繼續執行下去。

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

上面代碼中，try代碼塊拋出的錯誤，被catch代碼塊捕獲後，程序會繼續向下執行。
catch代碼塊之中，還可以再拋出錯誤，甚至使用嵌套的try…catch結構。

var n = 100;

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

上面代碼中，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），進行不同的處理

finally 代碼塊

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

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

cleansUp()
// 完成清理工作
// Uncaught Error: 出錯了……
//    at cleansUp (<anonymous>:3:11)
//    at <anonymous>:10:1

上面代碼中，由於沒有catch語句塊，一旦發生錯誤，代碼就會中斷執行。中斷執行之前，會先執行finally代碼塊，然後再向用戶提示報錯信息。

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

idle('hello')
// hello
// FINALLY

上面代碼中，try代碼塊沒有發生錯誤，而且裏面還包括return語句，但是finally代碼塊依然會執行。而且，這個函數的返回值還是result。

下面的例子說明，return語句的執行是排在finally代碼之前，只是等finally代碼執行完畢後才返回。

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代碼塊中寫入文件，如果沒有發生錯誤，則運行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

上面代碼中，catch代碼塊結束執行之前，會先執行finally代碼塊。

catch代碼塊之中，觸發轉入finally代碼快的標誌，不僅有return語句，還有throw語句。

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

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

//  捕捉到內部錯誤

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

try {
  try {
    cosnole.log('Hello world!'); // 報錯
  }
  finally {
    console.log('Finally');
  }
  console.log('Will I run?');
} catch(error) {
  console.error(error.message);
}
// Finally
// cosnole is not defined

上面代碼中，try裏面還有一個try。內層的try報錯，這時會執行內層的finally代碼塊，然後拋出錯誤，被外層的catch捕獲。

JavaScript原生錯誤類型及try、catch、finally