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.
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 return
ing 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
Parse Large JSON File in Nodejs
How to Programmatically Force an Onchange Event on an Input
JavaScript Closures and 'This'
Adding a New Array Element to a JSON Object
Enable/Disable Submit Button If Checkbox Is Checked/Unchecked
".Addeventlistener Is Not a Function" Why Does This Error Occur
How to Detect Supported Video Formats for the HTML5 Video Tag
Javascript/HTML Storage Options Under File Protocol (File://)
Dynamically Using the First Frame as Poster in HTML5 Video
Load HTML Page Dynamically into Div with Jquery
How to Avoid Long Nesting of Asynchronous Functions in Node.Js
How to Pass a JavaScript Variable to Another Browser Window
Why Array.Indexof Doesn't Find Identical Looking Objects
Converting Any String into Camel Case
Shrink Div to Text That's Wrapped to Its Max-Width
Using JavaScript to Change Website Language