1. 程式人生 > 其它 >JavaScript中的Error錯誤物件與自定義錯誤型別

JavaScript中的Error錯誤物件與自定義錯誤型別

Error

Error是JavaScript語言中的一個標準的內建物件,專門用於處理JS開發中的執行時錯誤。
當我們的JS程式碼在執行過程中發生錯誤的話,就會丟擲Error物件,整個程式將會中斷在錯誤發生的程式碼處,不再繼續執行,這也是錯誤型別必須重視的原因:它會導致頁面無法顯示或者功能失效。
Error是JavaScript中最原始的錯誤物件,作為各種異常的基礎物件,還有多個衍生的具體的錯誤型別,這些錯誤物件型別在nodejs中也可應用。

Error作為內建物件,它本身資料型別是 function,但被引用時它的資料型別是 object,和 ObjectArray 類似,使用 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 屬性,除此外一般還提供 namestack 屬性,而 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內建錯誤型別使用方式一致。