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

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.


There have been multiple answers and comments stating that super MUST be the first line inside constructor. That is simply wrong. @loganfsmyth answer has the required references of the requirements, but it boil down to:

Inheriting (extends) constructor must call super before using this and before returning even if this isn't used

See fragment below (works in Chrome...) to see why it might make sense to have statements (without using this) before calling super.

'use strict';var id = 1;function idgen() {  return 'ID:' + id++;}class Base {  constructor(id) {    this.id = id;  }  toString() { return JSON.stringify(this); }}class Derived1 extends Base {  constructor() {    var anID = idgen() + ':Derived1';    super(anID);    this.derivedProp = this.baseProp * 2;  }}alert(new Derived1());