How to Extend a Class Without Having to Use Super in Es6

How to extend a class without having to use super in ES6?

The rules for ES2015 (ES6) classes basically come down to:

  1. In a child class constructor, this cannot be used until super is called.
  2. ES6 class constructors MUST call super if they are subclasses, or they must explicitly return some object to take the place of the one that was not initialized.

This comes down to two important sections of the ES2015 spec.

Section 8.1.1.3.4 defines the logic to decide what this is in the function. The important part for classes is that it is possible for this be in an "uninitialized" state, and when in this state, attempting to use this will throw an exception.

Section 9.2.2, [[Construct]], which defines the behavior of functions called via new or super. When calling a base class constructor, this is initialized at step #8 of [[Construct]], but for all other cases, this is uninitialized. At the end of construction, GetThisBinding is called, so if super has not been called yet (thus initializing this), or an explicit replacement object was not returned, the final line of the constructor call will throw an exception.

When do I need to call `super` from a constructor?

Yes, that sounds correct, albeit a bit oddly formulated. The rules should be

  • In a derived class, you always1 need to call the super(…) constructor
  • If you are not doing more than the default constructor, you can omit the whole constructor(){},
    which in turn will make your class code not contain a super call.

1: You don't need to call it in the suspicious edge case of explicitly returning an object, which you hardly ever would.

How to extend a class property inherited from parent class in ES6?

It looks like super references are not permitted inside class fields, which is why your current code throws an error.

But, the some_class_property is put onto the instantiated object itself in the superclass constructor (well, in the class field, which is effectively syntax sugar for putting it onto the object in the superclass constructor), which means you can reference it in the child class by referencing this.some_class_property. You aren't referencing a shadowed method or property, so super isn't needed:

class Parent {  some_class_property = [1, 2, 3];}
class Child extends Parent { some_class_property = this.some_class_property.push(4)}
const c = new Child();console.log(c.some_class_property);

Extending parent class methods in child class in Javascript ES6

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>

Can you use different constructor arguments in an extended class in ES6?

Do the arguments in extended classes [constructors] need to be the same as the super class [constructor]?

Short answer: no.

However, super() expects the same arguments as the super class constructor. (super() calls the super class constructor with the supplied arguments.)



Related Topics



Leave a reply



Submit