javascript錯誤處理

時間 2019-11-12

原文原文鏈接

在執行JavaScript代碼的時候，有些狀況下會發生錯誤。html

錯誤分兩種，一種是程序寫的邏輯不對，致使代碼執行異常。例如：jquery

var s = null;
var len = s.length; // TypeError：null變量沒有length屬性

對於這種錯誤，要修復程序。網絡

一種是執行過程當中，程序可能遇到沒法預測的異常狀況而報錯，例如，網絡鏈接中斷，讀取不存在的文件，沒有操做權限等。函數

對於這種錯誤，咱們須要處理它，並可能須要給用戶反饋。spa

錯誤處理是程序設計時必需要考慮的問題。對於C這樣貼近系統底層的語言，錯誤是經過錯誤碼返回的：設計

int fd = open("/path/to/file", O_RDONLY);
if (fd == -1) {
    printf("Error when open file!");
} else {
    // TODO
}

經過錯誤碼返回錯誤，就須要約定什麼是正確的返回值，什麼是錯誤的返回值。上面的open()函數約定返回-1表示錯誤。code

顯然，這種用錯誤碼錶示錯誤在編寫程序時十分不便。htm

所以，高級語言一般都提供了更抽象的錯誤處理邏輯try ... catch ... finally，JavaScript也不例外。對象

try ... catch ... finally

使用try ... catch ... finally處理錯誤時，咱們編寫的代碼以下：blog

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery</title>
<script src="/static/js/jquery-3.2.1.min.js"></script>
</head>
<body>
<script>
'use strict';
var r1, r2, s = null;
try {
    r1 = s.length;
    r2 = 100;
} catch (e) {
    alert('Errors:' + e);
} finally {
    console.log('finally');
}
console.log('r1 === ' + r1);
console.log('r2 === ' + r2);
</script>
</body>
</html>

運行後能夠發現，彈出的Alert提示相似「出錯了：TypeError: Cannot read property 'length' of null」。

咱們來分析一下使用try ... catch ... finally的執行流程。

當代碼塊被try { ... }包裹的時候，就表示這部分代碼執行過程當中可能會發生錯誤，一旦發生錯誤，就再也不繼續執行後續代碼，轉而跳到catch塊。catch (e) { ... }包裹的代碼就是錯誤處理代碼，變量e表示捕獲到的錯誤。最後，不管有沒有錯誤，finally必定會被執行。

因此，有錯誤發生時，執行流程像這樣：

先執行try { ... }的代碼；
執行到出錯的語句時，後續語句再也不繼續執行，轉而執行catch (e) { ... }代碼；
最後執行finally { ... }代碼。

而沒有錯誤發生時，執行流程像這樣：

先執行try { ... }的代碼；
由於沒有出錯，catch (e) { ... }代碼不會被執行；
最後執行finally { ... }代碼。

最後請注意，catch和finally能夠沒必要都出現。也就是說，try語句一共有三種形式：

完整的try ... catch ... finally：

try {
    ...
} catch (e) {
    ...
} finally {
    ...
}

只有try ... catch，沒有finally：

try {
    ...
} catch (e) {
    ...
}

只有try ... finally，沒有catch：

try {
    ...
} finally {
    ...
}

錯誤類型

JavaScript有一個標準的Error對象表示錯誤，還有從Error派生的TypeError、ReferenceError等錯誤對象。咱們在處理錯誤時，能夠經過catch(e)捕獲的變量e訪問錯誤對象：

try {
    ...
} catch (e) {
    if (e instanceof TypeError) {
        alert('Type error!');
    } else if (e instanceof Error) {
        alert(e.message);
    } else {
        alert('Error: ' + e);
    }
}

使用變量e是一個習慣用法，也能夠以其餘變量名命名，如catch(ex)。

拋出錯誤

程序也能夠主動拋出一個錯誤，讓執行流程直接跳轉到catch塊。拋出錯誤使用throw語句。

例如，下面的代碼讓用戶輸入一個數字，程序接收到的其實是一個字符串，而後用parseInt()轉換爲整數。當用戶輸入不合法的時候，咱們就拋出錯誤：

'use strict';
var r, n, s;
try {
    s = prompt('請輸入一個數字');
    n = parseInt(s);
    if (isNaN(n)) {
        throw new Error('輸入錯誤');
    }
    // 計算平方:
    r = n * n;
    alert(n + ' * ' + n + ' = ' + r);
} catch (e) {
    alert('出錯了：' + e);
}

實際上，JavaScript容許拋出任意對象，包括數字、字符串。可是，最好仍是拋出一個Error對象。

最後，當咱們用catch捕獲錯誤時，必定要編寫錯誤處理語句：

var n = 0, s;
try {
    n = s.length;
} catch (e) {
    console.log(e);
}
console.log(n);

哪怕僅僅把錯誤打印出來，也不要什麼也不幹：

var n = 0, s;
try {
    n = s.length;
} catch (e) {
}
console.log(n);

由於catch到錯誤卻什麼都不執行，就不知道程序執行過程當中到底有沒有發生錯誤。

處理錯誤時，請不要簡單粗暴地用alert()把錯誤顯示給用戶。教程的代碼使用alert()是爲了便於演示。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。