How to extend a class without having to use super in ES6?
The rules for ES2015 (ES6) classes basically come down to:
- In a child class constructor,
this
cannot be used untilsuper
is called. - 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());
The new es6 class syntax is only an other notation for "old" es5 "classes" with prototypes. Therefore you cannot instantiate a specific class without setting its prototype (the base class).
Thats like putting cheese on your sandwich without making it. Also you cannot put cheese before making the sandwich, so...
...using this
keyword before calling the super class with super()
is not allowed, too.
// valid: Add cheese after making the sandwichclass CheeseSandwich extend Sandwich { constructor() { super(); this.supplement = "Cheese"; }}// invalid: Add cheese before making sandwichclass CheeseSandwich extend Sandwich { constructor() { this.supplement = "Cheese"; super(); }}// invalid: Add cheese without making sandwichclass CheeseSandwich extend Sandwich { constructor() { this.supplement = "Cheese"; }}
If you don’t specify a constructor for a base class, the following definition is used:
constructor() {}
For derived classes, the following default constructor is used:
constructor(...args) { super(...args);}
EDIT: Found this on developer.mozilla.org
:
When used in a constructor, the super keyword appears alone and must be used before the this keyword can be used.