JavaScript錯誤處理機制實例代碼分析

這篇文章主要講解了“JavaScript錯誤處理機制實例代碼分析”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript錯誤處理機制實例代碼分析”吧！

1. Error 實例

JavaScript在運行錯誤時會拋出一個錯誤,JS提供了Error構造函數,所有拋出的錯誤都是這個構造函數的實例

const err = new Error('代碼出錯了');
err.message; // 代碼出錯了

上面的Error接受了一個message參數,Error構造函數還有另外兩個參數name和stack

• message 錯誤提示信息

• name 錯誤名稱

• stack 錯誤的調用棧

const err = new Error('代碼出錯了');
err.name; // 'Error'
err.stack; //'Error: 出錯了\n    at <anonymous>:1:5'

2. 原生錯誤類型

除了基礎的Error錯誤類型,JavaScript還內置了六種原始的錯誤類型

• ReferenceError 引用錯誤

• SyntaxError 語法錯誤

• TypeError 類型錯誤

• RangeError 范圍錯誤

• URIError URI方法執行錯誤

• EvalError eval函數執行錯誤

2.1 ReferenceError

使用一個不存在的變量時會拋出Reference Error

test; 
//Uncaught ReferenceError: assd is not defined at <anonymous>:1:1

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

console.log() = 1
// Uncaught ReferenceError: Invalid left-hand side in assignment

2.2 SyntaxError

當JS解析代碼發生錯誤時會拋出SyntaxError錯誤

const 1a;
Uncaught SyntaxError: Invalid or unexpected token
5 = 6;
Uncaught SyntaxError: Invalid left-hand side in assignment

2.3 TypeError

放變量或者參數不是預期類型的時候會出現TypeError錯誤,比如對非函數類型使用new,或者對非函數類型使用圓括號運算

let a; 
a(); 
//VM7449:1 Uncaught TypeError: b is not a function at <anonymous>:1:1

2.4 RangeError

當數值超出預期范圍的時候會出現RangeError,主要情況有幾種,一是數組長度為負數,二是Number對象的方法接收的參數超出范圍,以及函數堆棧超出最大值

const arr = new Array(-5);
//VM7833:1 Uncaught RangeError: Invalid array lengthat <anonymous>:1:13
function foo(){
  foo();
};
foo();
//Uncaught RangeError: Maximum call stack size exceeded

2.5 URIError

URI方法執行錯誤時會出現URIError錯誤,例如URIError接收非預期的參數

decodeURI('%');
//VM8142:1 Uncaught URIError: URI malformedat decodeURI (<anonymous>)at <anonymous>:1:1

2.6 evalError

eval函數執行錯誤時會拋出EvalError,該錯誤類型以及不再被使用了,知識為了保證與以前代碼兼容才保留

3. 自定義錯誤類型

除了JS提供的7種原生的錯誤類型,還可以通過繼承Error自定義錯誤類型

funtion CustomError(message){
  this.message = message;
  this.name = 'CustomError';
};
CustomError.prototype = new Error();
CustomError.prototype.construct = CustomError;
throw new CustomError('這是一個自定義錯誤');
//CustomError {message: '這是一個自定義錯誤', name: 'CustomError'};

4. throw

在使用thorw拋出錯誤的時候,代碼執行會在在throw處終止,thorw以下的代碼將不再執行

throw new Error('出錯了');
console.log('該行代碼不會執行');

實際上throw不僅能拋出Error實例,還能拋出任意類型的數據,對javaScript引擎來說只要遇上throw代碼就停止執行

thorw '23';
console.log('該行代碼不會執行');
throw true;
throw {};
throw [];
throw 20;

throw方法有兩種寫法,可以加上圓括號和省略圓括號

throw new Error('出錯了');
throw (new Error('出錯了'));

5. try…catch

使用throw的時候會阻礙后續代碼的執行,使用費try…catch包裹throw語句就不會影響后續代碼的執行了,catch用于錯誤的捕獲,代碼發生錯誤的時候執行。

    try {
      throw new Error('出錯了');
    } catch (e) {
      console.error(e)
    };
    console.log('后續代碼繼續執行'); //后續代碼繼續執行

6. finally

不管是否發生錯誤finally語句都會執行

    try {
      throw new Error('出錯了');
    } catch (e) {
      console.log('catch')
    }finally{
       console.log('finally');
    }

感謝各位的閱讀，以上就是“JavaScript錯誤處理機制實例代碼分析”的內容了，經過本文的學習后，相信大家對JavaScript錯誤處理機制實例代碼分析這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！