Javascript，扩展 ES6 class 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 class 继承 get val()...。实际上，Javascript 将存在 setter 的情况下 getter 的缺失视为未定义。

我有很多 class 的情况，它们都具有完全相同的一组 getter，但 setter 是唯一的。目前，我只是在每个 class 中复制 getter，但我正在重构并希望消除冗余代码。

有没有办法告诉 JS 将 getter 从基数 class 保留下来，或者谁有解决这个问题的优雅方法？

Answer 1

此限制是由于 JavaScript 在幕后如何对待属性访问器。在 ECMAScript 5 中，你最终得到一个原型链，它有一个 val 的 property descriptor 和一个由你的 class 定义的 get 方法，以及一个 set 方法那是未定义的。

在您的 Xtnd class 中，您有另一个 val 的属性描述符，它隐藏了基本 class 的整个属性描述符的 val，包含一个由 class 定义的 set 方法和一个未定义的 get 方法。

为了将 getter 转发到基础 class 实现，不幸的是，您需要在每个子 class 中使用一些样板，但您不必复制实施本身至少：

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'

Javascript，扩展 ES6 class setter 将继承 getter

Javascript, extending ES6 class setter will inheriting getter

javascript

extend

es6-class

boilerplate