JavaScript中的Error錯誤物件與自定義錯誤型別
Error
Error是JavaScript語言中的一個標準的內建物件,專門用於處理JS開發中的執行時錯誤。
當我們的JS程式碼在執行過程中發生錯誤的話,就會丟擲Error物件,整個程式將會中斷在錯誤發生的程式碼處,不再繼續執行,這也是錯誤型別必須重視的原因:它會導致頁面無法顯示或者功能失效。
Error是JavaScript中最原始的錯誤物件,作為各種異常的基礎物件,還有多個衍生的具體的錯誤型別,這些錯誤物件型別在nodejs中也可應用。
Error作為內建物件,它本身資料型別是 function
,但被引用時它的資料型別是 object
,和 Object
、Array
類似,使用 typeof
typeof Error // 'function'
typeof Error() // 'object'
typeof new Error() // 'object'
關於typeof的詳細知識,可參考本博前文一文搞懂js中的typeof用法
Error語法
下面介紹下Error物件基本的語法知識。
Error物件既可以當作建構函式使用,也可以當作方法,一般有兩個可選引數:
new Error(message, options)
Error(message, options)
可選引數說明如下:
- message:錯誤資訊描述
- options:屬性物件
- cause:指定錯誤的具體原因
Error屬性和方法
Error例項必然包含 message
屬性,除此外一般還提供 name
和 stack
屬性,而 cause
屬性則根據定義來確定。
- message:錯誤資訊描述
- name:錯誤的型別名字
- stack:錯誤的堆疊軌跡,用於堆疊追蹤
- cause:當前錯誤被丟擲的具體原因
下面通過一個示例,看下具體的屬性資訊:
const err = new Error('發生錯誤!', { cause: '333' }) console.log(err) // Error: 發生錯誤! // at <anonymous>:1:13 console.log(err.message) // '發生錯誤!' console.log(err.cause) // '333' console.log(err.stack) // Error: 發生錯誤! // at <anonymous>:1:13
如上程式碼,定義了一個錯誤物件,並賦予兩個引數,在控制檯輸出,可以看到該錯誤物件具體的屬性資訊。
需要注意的是,只有定義了cause屬性的Error例項,才有該屬性,否則cause屬性不存在,如下所示:
const err2 = new Error('發生錯誤!')
console.log(err2.cause)
// undefined
err2.cause的輸出為undefined,因為建構函式並沒有定義該屬性。
Error物件沒有自己特有的例項方法,只有繼承自Object物件的,這裡略過。
六種常見錯誤型別
Error物件衍生有六種常見的錯誤型別,屬於Error的派生類,屬性和方法也都繼承自Error,下面一一介紹下這六種型別。
SyntaxError
SyntaxError 語法錯誤,表示JS程式碼發生的語法上的錯誤,包括各種不符合語法規範、書寫錯漏等情況。
如下變數名錯誤:
const 11 = 8
// Uncaught SyntaxError: Unexpected number
錯誤的程式碼語法:
Error(+)
// Uncaught SyntaxError: Unexpected token ')'
SyntaxError語法錯誤無法被捕獲,因為語法錯誤不會被執行,直接丟擲錯誤,所幸的是,現在的IDE工具和各種外掛,已可規避大部分的語法錯誤。
TypeError
TypeError 型別錯誤,當代碼中的變數引數等型別不對時,就會發生該型別錯誤。
比如,把屬性當方法使用:
window.location()
// Uncaught TypeError: window.location is not a function
// at <anonymous>:1:8
錯誤的建構函式使用:
new null()
// Uncaught TypeError: null is not a constructor
// at <anonymous>:1:1
ReferenceError
ReferenceError 引用錯誤,當引用一個並不存在的變數時會發生的錯誤。
如直接在瀏覽器控制列印:
a
// Uncaught ReferenceError: a is not defined
// at <anonymous>:1:1
cons.log('')
// Uncaught ReferenceError: cons is not defined
// at <anonymous>:1:1
錯誤的值分配,給 null
賦值:
null = 1
// Uncaught SyntaxError: Invalid left-hand side in assignment
RangeError
RangeError 取值範圍錯誤,當給某個物件指定一個不在取值範圍內的特定值時發生的錯誤。
如給Array物件傳入不合法的長度引數
Array(-1)
Array(Infinity)
// Uncaught RangeError: Invalid array length
// at <anonymous>:1:1
數字型別方法的使用:
5..toFixed(200)
// Uncaught RangeError: toFixed() digits argument must be between 0 and 100
// at Number.toFixed (<anonymous>)
// at <anonymous>:1:4
toFixed()
引數取值範圍在0到100之間,超過則會報錯。
URIError
URIError 當使用URI相關方法處理資料時,當這些方法的引數不正確時導致的一些錯誤。
主要常見於URI的解碼等方法decodeURI()、decodeURIComponent()等。
decodeURI('%')
decodeURIComponent('%')
// Uncaught URIError: URI malformed
// at decodeURIComponent (<anonymous>)
// at <anonymous>:1:1
EvalError
EvalError 當在使用eval函式時,發生的錯誤。eval不被推薦使用,該錯誤型別一般很少見,處於半廢棄狀態,為了相容考慮才存在。
自定義錯誤型別
除了JavaScript自帶的常見錯誤型別以外,我們還可以自定義特殊的錯誤型別。
處理起來也很簡單,使用繼承Error物件的方式即可。
class CharError extends Error {
constructor(message = '字元錯誤') {
super(message)
this.name = 'CharError'
}
}
以上程式碼使用es6的類繼承方式,自定義一個錯誤型別繼承Error物件,後續就可以使用新的 CharError
型別。
const ce = new CharError()
console.log(ce)
// CharError: 字元錯誤
// at error.html:26:16
如上,與JavaScript內建錯誤型別使用方式一致。