extend - Javascript, extending ES6 class setter will inheriting getter

Question

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'

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'