CODEWITHSUNDEEP
javascriptbabeljsecmascript-6
TAGraves
TAGraves

Reputation: 1409

Is it possible to call a super setter in ES6 inherited classes?

I'm wondering if the following is in compliance with the ES6 spec:

class X {
  constructor(name) {
    this._name = name;
  }

  get name() {
    return this._name;
  }

  set name(name) {
    this._name = name + "X";
  }
}

class Y extends X {
  constructor(name) {
    super(name);
  }

  set name(name) {
    super.name = name;
    this._name += "Y";
  }
}

The idea is that let y = new Y(""); y.name = "hi" should result in y.name === "hiXY" being true.

As far as I can tell, this doesn't work in Chrome with the ES6 flag turned on. It also doesn't work using Babel with the es2015 flag. Is using super.name = ... in an inherited setter not part of the ES6 spec? Or is this a bug in the implementation of Babel?

Upvotes: 36

Views: 11716

Answers (1)

loganfsmyth
loganfsmyth

Reputation: 161467

class Y extends X {
  constructor(name) {
    super(name);
  }

  set name(name) {
    super.name = name;
    this._name += "Y";
  }
}

will override the name properly with an accessor for just the setter, with no getter. That means your y.name === "hiXY" will fail because y.name will return undefined because there is no getter for name. You need:

class Y extends X {
  constructor(name) {
    super(name);
  }

  get name(){
    return super.name;
  }

  set name(name) {
    super.name = name;
    this._name += "Y";
  }
}

Upvotes: 65

Related Questions