时间戳

首页 > 解决方案 > Javascript，扩展 ES6 类 setter 将继承 getter

javascript - Javascript，扩展 ES6 类 setter 将继承 getter

问题描述

在 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不会get val()...从Base类继承。实际上，Javascript 将在 setter 存在的情况下缺少 getter 视为未定义。

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

有没有办法告诉 JS 让 getter 远离基类，或者有没有人有一个优雅的解决方案来解决这个问题？

标签： javascriptextendes6-classboilerplate

解决方案

这个限制是由于 JavaScript 如何在幕后处理属性访问器。在 ECMAScript 5 中，您最终会得到一个原型链，其中包含一个属性描述符，用于您的类定义的方法和未定义的val方法。getset

在您的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'

推荐阅读