javascript錯誤處理機制的介紹（附範例）

這篇文章帶給大家的內容是關於javascript錯誤處理機制的介紹（附範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

有時候，在自己封裝的工具函數中，不傳參或傳入了錯誤類型的參數，也要適當的拋出一些錯誤以示警告；使用框架不正常情況下也會拋出錯誤，如果對錯誤一無所知，便無從下手調試。綜合上述，了解錯誤的處理機制是多麼必要。

以下是筆者歸納總結，如有誤之處，歡迎指出。

錯誤建構子
javascript規格中總共有8中錯誤類型建構子
Error -- 錯誤物件
SyntaxError --解析過程語法錯誤
TypeError -- 不屬於有效類型
ReferenceError -- 無效引用
RangeError -- 數值超出有效範圍
URIError -- 解析URI編碼出錯
EvalError -- 呼叫eval函數錯誤
InternalError -- Javascript引擎內部錯誤的 Javascript引擎內部錯誤的異常拋出， "遞歸太多"

其中兩種做個特殊說明：
EvalError呼叫eval函數錯誤，已經棄用，為了向後相容，低版本還可以使用。
InternalError 遞歸過深拋出錯誤，多數瀏覽器未實現，屬於非標準方法，生產環境禁用
繼承關係
Error是錯誤的基類，其他類型都繼承Error這個類，可以使用ES6中提供的Object.getPrototypeOf()來判斷，一個類別是否繼承了另一個類別。

console.log(Object.getPrototypeOf(SyntaxError) === Error);    // true
console.log(Object.getPrototypeOf(TypeError) === Error);   // true
console.log(Object.getPrototypeOf(RangeError) === Error);   // true
console.log(Object.getPrototypeOf(URIError) ===  Error);   // true
console.log(Object.getPrototypeOf(EvalError) === Error);   // true
console.log(Object.getPrototypeOf(ReferenceError) === Error); // true

來聊一聊每一種錯誤類型的使用和出錯的場景。

Error
透過Error的建構器可以建立一個錯誤物件。當執行時期錯誤產生時，Error的實例物件會被拋出。
語法：new Error([message])
參數：

message 可选，错误描述信息。

拋出錯誤
使用throw語句來拋出例外
throw new Error('這裡拋出的是錯誤訊息')
運行後，會在控制台列印輸出：
Uncaught Error: 這裡拋出的是錯誤訊息
注意： 使用throw 拋出例外後，之後的程式碼不再執行。

捕獲錯誤
可以透過try{}catch(){}語句來捕獲這個錯誤

try{
   throw new Error('这里抛出的是错误信息')
 }
 catch(err){
   alert(err.name + ' '+ err.message)
   }

屬性說明：

 当使用new Error创建错误实例后，会有两个属性：

let e = new Error('這裡拋出的是錯誤訊息');
name屬性，為錯誤的類型，此時為Error
message屬性，為錯誤的訊息，此時為'這裡拋出的是錯誤訊息'

SyntaxError
解析過程語法錯誤,這種類型拋出的錯誤有很多，往往是書寫時候造成的語法錯誤，例如：

let n = 11;   // Uncaught SyntaxError: Invalid or unexpected token
let str = "hel"lo" // Uncaught SyntaxError: Unexpected identifier
let 123Var = 'hi' // Uncaught SyntaxError: Invalid or unexpected token

語法錯誤有很多就不一一列舉了，當在瀏覽器運行時，控制台會拋錯，並且告知第幾行，所以調試器來比較方便。但要讀懂錯誤的類型為SyntaxError，以及後面的錯誤訊息，這樣方便改錯。

TypeError
不屬於有效型別。這種錯誤就是在給的不是需要的類型而導致無法操作，會拋出類型錯誤。
變數或參數不是預期類型，
變數或參數不是預期類型
例如new運算子後必須是函數，而給定的不是函數，則會拋出類型錯誤

let fn = 'hello';
new fn;

拋出錯誤：
Uncaught TypeError: fn is not a constructor
呼叫物件不存在的方法

let obj = {};
obj.fn()

拋出錯誤：
Uncaught TypeError: obj.fn is not a function
當然你也可以在封裝函數時候，強制傳入的參數為指定型別，否則拋出型別錯誤。

function flatten(arr){
if( !Array.isArray(arr) )
{
       throw new TypeError('传入参数不是数组')   
}    
}

flatten('test');

傳入的參數不為陣列時，拋出自定義的型別錯誤：
Uncaught TypeError: 傳入參數不是陣列

#ReferenceError
無效引用。

引用了一個不存在的變數

console.log(a);

拋出錯誤
Uncaught ReferenceError: a is not defined
將變數賦值給一個無法被賦值的資料
這個錯誤常常犯的地方實在呼叫一個方法後在if語句中做判斷，將比較運算子==寫成了賦值運算子=，例如判斷一個字串第一個字元是不是指定的字元：

let str = 'hello';
if( str.charAt(0) = 'h' ){
   console.log('第一个字符为h');
   }

拋出錯誤：
Uncaught ReferenceError: Invalid left-hand side in assignment
RangeError
數值超出有效範圍。在某些方法中，傳入的數值必須在一定的範圍內，否則會拋出超出範圍的錯誤。
建立陣列傳入的長度小於了0

let arr = new Array(-1)

拋出錯誤：
Uncaught RangeError: Invalid array length
repeat方法重複指定的字串重複次數小於0

let str = 'hello';
str.repeat(-1)

拋出錯誤：
Uncaught RangeError: Invalid count value

URIError
處理URI編碼出錯。函數參數不正確，主要是encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()這六個函數。
例如：

decodeURIComponent('%');
decodeURI('%2')

拋出錯誤：
Uncaught URIError: URI malformed

自訂錯誤類型
有時候希望自訂錯誤類型，需要自訂一個建構函數，然後讓原型繼承繼承Error.prototype即可。

function MyErrorType(message){
this.message = message || '错误';
this.name = 'MyErrorType';
this.stack = (new Error()).stack;  // 错误位置和调用栈
}
MyErrorType.prototype = Object.create(Error.prototype);
MyErrorType.prototype.constructor = MyErrorType;
throw new MyErrorType('自定义错误类型抛出错误')

关于调用的错误栈信息
提供的错误的跟踪功能，以什么样的调用顺序，在哪个文件的哪一行捕获到这个错误。
例如以下调用：

 function trace() {
  try {
        throw new Error('myError');
  }
  catch(e) {
        console.log(e.stack);
  }
  }
function b() {
trace();
}
function a() {
b(3, 4, '\n\n', undefined, {});
}
a('first call, firstarg');

错误信息为：
Error: myError
  at trace (0c3d1a8a9fac89c933e63fe9a97ef2f1:3:14)
  at b (0c3d1a8a9fac89c933e63fe9a97ef2f1:10:6)
  at a (0c3d1a8a9fac89c933e63fe9a97ef2f1:13:6)
  at 0c3d1a8a9fac89c933e63fe9a97ef2f1:15:4
以上为抛错的构造函数的总结，如有误之处欢迎扶正。

以上是javascript錯誤處理機制的介紹（附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！