Javascript，擴展 ES6 類 setter 將繼承 getter

Question

在 Javascript 中，使用以下插圖代碼：

 class Base { constructor() { this._val = 1 } get val() { return this._val } } class Xtnd extends Base { set val(v) { this._val = v } } let x = new Xtnd(); x.val = 5; console.log(x.val); // prints 'undefined'

實例x不會從Base類繼承get val()... 。 實際上，Javascript 在 setter 存在的情況下將 getter 的缺失視為未定義。

我有一種情況，我有很多類，它們都具有完全相同的 getter 集，但具有獨特的 setter。 目前，我只是在每個類中復制 getter，但我正在重構並希望消除冗余代碼。

有沒有辦法告訴 JS 使 getter 遠離基類，或者有沒有人對這個問題有一個優雅的解決方案？

Answer 1

這種限制是由於 JavaScript 在后台處理屬性訪問器的方式造成的。 在 ECMAScript 5 中，你最終會得到一個原型鏈，它有一個val的屬性描述符，一個由你的類定義的get方法和一個未定義的set方法。

在您的Xtnd類中，您有另一個val屬性描述符，它遮蔽了基類val的整個屬性描述符，其中包含一個由類定義的set方法和一個未定義的get方法。

為了將 getter 轉發到基類實現，不幸的是，您需要在每個子類中使用一些樣板，但您至少不必復制實現本身：

 class Base { constructor() { this._val = 1 } get val() { return this._val } } class Xtnd extends Base { get val() { return super.val } set val(v) { this._val = v } } let x = new Xtnd(); x.val = 5; console.log(x.val); // prints '5'