簡單了解TypeScript中如何繼承 Error 類

 更新時間:2019年06月21日 17:03:56   作者:Harttle   我要評論
這篇文章主要介紹了簡單了解TypeScript中如何繼承 Error 類,一個典型的網站服務器可能需要有 NetworkError, DatabaseError, UnauthorizedError 等。 我們希望這些類都擁有 Error 的特性:有錯誤消息、有調用棧、有方便打印的 toString 等。,需要的朋友可以參考下

前言

在JavaScript 中很多時候都需要自定義錯誤,尤其是開發 Node.js 應用的時候。 比如一個典型的網站服務器可能需要有 NetworkError, DatabaseError, UnauthorizedError 等。 我們希望這些類都擁有 Error 的特性:有錯誤消息、有調用棧、有方便打印的 toString 等。 最直觀的實現方式便是 繼承 Error 類。 但考慮 TypeScript 需要編譯到 ES5 兼容性問題會較為復雜, 本文用來幫助理解 TypeScript 中繼承 Error 的問題來源以及對應的幾種解決方式。

我們需要怎樣的 CustomError

為了容易討論最佳實踐,首先明確我們自定義的 CustomError 需要做到哪些功能。 下面是 Harttle 的觀點:

  1. 可以調用 new CustomError() 來創建,并且 instanceof Error 操作應該返回 true。可以用來創建是基本要求,能夠被視為 Error 的實例能夠兼容既有系統(比如 toString() 要返回調用棧),同時符合慣例。
  2. .stack 屬性首行應為 CustomeError: <message>。如果是 Error: <message> 可能就沒那么漂亮。
  3. .stack 屬性應當包含調用棧并指向 new CustomError() 的那一行。這一點可能是關鍵,如果指向 CustomError 構造函數中的某一行,就會給這個類的使用方造成困惑。

下面舉個例子,這是一個 message 為 "intended" 的 CustomError 的 .stack 屬性值:

CustomError: intended
at Object.<anonymous> (/Users/harttle/Downloads/bar/a.js:10:13)
at Module._compile (module.js:653:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Function.Module.runMain (module.js:694:10)
at startup (bootstrap_node.js:204:16)
at bootstrap_node.js:625:3

ES5 中如何繼承 Error?

Error 是一個特殊的對象,或者說 JavaScript 的 new 是一個奇葩的存在。 為方便后續討論,我們先討論組 ES5 時代是怎樣繼承 Error 的。 我們說 JavaScript 是一門混雜的語言,如何繼承 Error 就是一個典型的例子。 如果你熟悉 原型繼承的方式,應該會寫出如下代碼:

function CustomError (message) {
Error.call(this, message)
}
CustomError.prototype = new Error()

因為 stack 只在 new 的時候生成,上述實現不能滿足功能 2 和功能 3,也就是說:

  • stack 的第一行是總是 Error 而不是 CustomError 且不包含 message 信息。
  • stack 總是指向 new Error() 的那一行,而不是 new CustomError()。

Node 文檔 中描述了一個 captureStackTrace 方法來解決這個問題,改動后的實現如下:

function CustomError (msg) {
this.name = 'CustomError'
this.message = msg
Error.captureStackTrace(this, CustomError)
}
CustomError.prototype = new Error()

其中 .captureStackTrace() 會使用傳入對象的 name 和 message 來生成 stack 的前綴;同時第二個參數用來指定在調用棧中忽略掉哪一部分,這樣棧就會指向 new CustomError 的地方而不是 captureStackTrace() 的地方。

ES6 中如何繼承 Error?

既然 ES6 通過 class 和 extends 等關鍵字給出了類繼承機制, 那么想必通過編寫 CustomError 類來繼承 Error。事實也確實如此,只需要在構造函數中調用父類構造函數并賦值 name 即可實現文章開始提到的三個功能:

class CustomError extends Error {
constructor(msg) {
super(msg)
this.name = 'CustomError'
}
}

TypeScript 中如何繼承 Error?

ES6 中提供了 new.target 屬性, 使得 Error 的構造函數中可以獲取 CustomError 的信息,以完成原型鏈的調整。 因此 TypeScript 需要編譯到 ES5 時上述功能仍然是無法自動實現。 在 TypeScript 中的體現是形如上述 ES6 的代碼片段會被編譯成:

var CustomError = /** @class */ (function (_super) {
__extends(CustomError, _super);
function CustomError(msg) {
var _this = _super.call(this, msg) || this;
_this.name = 'CustomError';
return _this;
}
return CustomError;
}(Error));

注意 var _this = _super.call(this, msg) || this; 中 this 被替換掉了。 在 TypeScript 2.1 的 changelog 中描述了這個 Breaking Change。 **這會造成 CustomError 的所有對象方法都無法使用,這里介紹幾種 workaround:

題外話,這個分支可能會導致測試覆蓋率中的 分支未覆蓋問題。可以只在 ES6 下產生測試覆蓋報告來解決。

1. 使用 setPrototypeOf 還原原型鏈

這是 TypeScript 官方給出的解決方法,見這里

class CustomError extends Error {
constructor(message) {
super(message);
Object.setPrototypeOf(this, FooError.prototype);
}
}

注意這是一個性能很差的方法,且在 ES6 中提出,兼容性也很差。在不兼容的環境下可以使用 __proto__ 來替代。

2. 堅持使用 ES5 的方式

不使用 ES6 特性,仍然使用本文前面介紹的 『ES5 中如何繼承 Error?』給出的方法。

3. 限制對象方法的使用

雖然 CustomError 的對象函數無法使用,但 CustomError 仍然支持 protected 級別的方法供子類使用,閹割的地方在于自己不能調用。 由于 JavaScript 中對象屬性必須在構造函數內賦值,因此對象屬性也不會受到影響。也就是說:

class CustomError extends Error {
count: number = 0
constructor(msg) {
super(msg)
this.count // OK,屬性不受影響
this.print() // TypeError: _this.print is not a function,因為 this 被替換了
}
print() { 
console.log(this.stack)
}
}
class DerivedError extends CustomError {
constructor(msg) {
super(msg)
super.print() // OK,因為 print 是直接從父類原型獲取的,即 `_super.prototype.print`
}
}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • react實現換膚功能的示例代碼

    react實現換膚功能的示例代碼

    這篇文章主要介紹了react實現換膚功能的示例代碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • 微信小程序使用canvas的畫圖操作示例

    微信小程序使用canvas的畫圖操作示例

    這篇文章主要介紹了微信小程序使用canvas的畫圖操作,結合實例形式較為詳細的分析了微信小城序基于canvas的畫圖操作相關實現技巧與操作注意事項,需要的朋友可以參考下
    2019-01-01
  • BootStrap框架中的data-[ ]自定義屬性理解(推薦)

    BootStrap框架中的data-[ ]自定義屬性理解(推薦)

    這篇文章主要介紹了BootStrap框架中的data-[ ]自定義屬性理解(推薦),非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-02-02
  • javascript iframe中打開文件,并檢測iframe存在否

    javascript iframe中打開文件,并檢測iframe存在否

    從iframe中打開文件,并檢測iframe存在否如果說只是檢測頁面存在否,直接設置target用偽協議就可以解決了...
    2008-12-12
  • js實現掃雷小程序的示例代碼

    js實現掃雷小程序的示例代碼

    本篇文章主要介紹了js實現掃雷小程序的示例代碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • js實現的仿新浪微博完美的時間組件升級版

    js實現的仿新浪微博完美的時間組件升級版

    本博客沒有華麗的布局,只求樸實的js的代碼,只為js代碼愛好者提供,一周大概會出1-2篇js前沿代碼的文章.只是代碼,不說技術
    2011-12-12
  • JavaScript導出Excel實例詳解

    JavaScript導出Excel實例詳解

    這篇文章主要介紹了JavaScript導出Excel的方法,以實例形式詳細分析了javascript將WEB頁面導出為EXCEL文檔的方法及相關的技巧說明,對于深入了解javascript編程原理有一定的借鑒價值,需要的朋友可以參考下
    2014-11-11
  • JavaScript中判斷整數的多種方法總結

    JavaScript中判斷整數的多種方法總結

    這篇文章主要介紹了JavaScript中判斷整數的多種方法總結,本文總結了5種判斷整數的方法,如取余運算符判斷、Math.round、Math.ceil、Math.floor判斷等,需要的朋友可以參考下
    2014-11-11
  • 微信小程序實現topBar底部選擇欄效果

    微信小程序實現topBar底部選擇欄效果

    這篇文章主要為大家詳細介紹了微信小程序實現topBar底部選擇欄效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-07-07
  • JavaScript中valueOf函數與toString方法深入理解

    JavaScript中valueOf函數與toString方法深入理解

    基本上,所有JS數據類型都擁有valueOf和toString這兩個方法,null除外。它們倆解決javascript值運算與顯示的問題,本文將詳細介紹,有需要的朋友可以參考下
    2012-12-12

最新評論

湖北11选5走势图爱彩乐