In Javascript, with the following illustration code:

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'

In Javascript, with the following illustration code:

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'

the instance x will not inherit get val()... from Base class. As it is, Javascript treat the absence of a getter, in the presence of the setter, as undefined.

I have a situation in which I have many classes that all have the exact same set of getters but unique setters. Currently, I simply replicate the getters in each class, but I'm refactoring and want to eliminate the redundant code.

Is there a way to tell JS to keep the getter from the base class, or does anyone have an elegant solution to this problem?

• javascript
• extend
• es6-class
• boilerplate

• For future reference, this question has nothing to do with the redundancy tag, which refers to intentional duplication of code for critical sections to be more robust. I'm pretty sure you intended to use boilerplate which refers to seemingly unnecessary duplication of code. – Patrick Roberts Commented Dec 2, 2018 at 21:38
• "I have a situation in which I have many classes that all have the exact same set of getters but unique setters." - do you actually need inheritance for that? JS has lots of other ways for sharing code if all you want to avoid is duplication. – Bergi Commented Dec 2, 2018 at 22:28
• 1 "Is there a way to tell JS to keep the getter from the base class" - No, it's by design. – Bergi Commented Dec 2, 2018 at 22:34

1 Answer 1

This limitation is due to how JavaScript treats property accessors behind the scenes. In ECMAScript 5, you end up with a prototype chain that has a property descriptor for val with a get method defined by your class, and a set method that is undefined.

In your Xtnd class you have another property descriptor for val that shadows the entire property descriptor for the base class's val, containing a set method defined by the class and a get method that is undefined.

In order to forward the getter to the base class implementation, you'll need some boilerplate in each subclass unfortunately, but you won't have to replicate the implementation itself at least:

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'