Extending parent class methods in child class in Javascript ES6

Question

I want to extend a child's functionality of a specific method in a parent class. I'm still getting used to OOP in ES6 so I'm not sure if this is possible or breaks rules.

I'm looking for something like this:

class Parent {
  constructor(elem) {
    this.elem = elem;

    elem.addEventListener((e) => {
      this.doSomething(e);
    });
  }

  doSomething(e) {
    console.log('doing something', e);
  }
}

class Child extends Parent {
  constructor(elem) {
    // sets up this.elem, event listener, and initial definition of doSomething
    super(elem)
  }

  doSomething(e) {
    // first does console.log('doing something', e);
    console.log('doing another something', e);
  }
}

In essence I want to append a child-specific callback on a parent method. Is there a creative way of doing this without creating a completely new class with the same functionality?

extends is per-class and not per-instance. What do you want to achieve? — alpinist
– alpinist, Commented Sep 15, 2017 at 17:00
Adjusted my request to only say "child-specific", ignore my use of "instance" @ideaboxer — JLF
– JLF, Commented Sep 15, 2017 at 17:02
sets up this.elem should happen after the super() call... — Jonas Wilms
– Jonas Wilms, Commented Sep 15, 2017 at 17:04
could you give a real life example? this might be an xy problem... — Jonas Wilms
– Jonas Wilms, Commented Sep 15, 2017 at 17:09

Danil Speransky · Accepted Answer · 2017-09-15 17:36:41Z

20

You can use super in methods:

doSomething(e) {
  super.doSomething(e)
  console.log('doing another something', e)
}

this in child class and in parent class is the same thing, and refers to the actual object, so if you call a method in parent's code, it will call child's implementation, if it is indeed a child. Same works in other languages, for example Python and Ruby.

Working code:

class Parent {
  constructor(elem) {
    this.elem = elem
    this.elem.addEventListener('click', (e) => { this.doSomething(e) })
  }

  doSomething(e) {
    alert('doing something')
  }
}

class Child extends Parent {
  constructor(elem) {
    super(elem)
  }

  doSomething(e) {
    super.doSomething(e)
    alert('doing another something')
  }
}

let child = new Child(document.getElementById('button'))

<button id="button">Alert</button>

edited Sep 15, 2017 at 17:36

answered Sep 15, 2017 at 17:00

Danil Speransky

30.5k6 gold badges70 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JLF Over a year ago

super.doSomething(e) is called by an event listener in my example. I want to use the super's event listener to trigger the child's method as a callback – or at least afterwards. This implementation seemingly only calls the super's method in a from a different method, causing me to reestablish the event listening in the child.

JLF Over a year ago

yea this actually worked perfectly. For some reason I assumed super.doSomething(e) would have been called without the context of the parent.

Collectives™ on Stack Overflow

Extending parent class methods in child class in Javascript ES6

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related