The extends
keyword is used in a class declarations or class expressions to create a class with a child of another class.
SyntaxEdit
class ChildClass extends ParentClass { ... }
DescriptionEdit
The extends
keyword can be used to subclass custom classes as well as built-in objects.
The .prototype
of the extension must be an Object
or null
.
ExamplesEdit
Using extends
The first example creates a class called Square
from a class called Polygon
. This example is extracted from this live demo (source).
class Square extends Polygon {
constructor(length) {
// Here, it calls the parent class' constructor with lengths
// provided for the Polygon's width and height
super(length, length);
// Note: In derived classes, super() must be called before you
// can use 'this'. Leaving this out will cause a reference error.
this.name = 'Square';
}
get area() {
return this.height * this.width;
}
set area(value) {
this.area = value;
}
}
Using extends
with built-in objects
This example extends the built-in Date
object. This example is extracted from this live demo (source).
class myDate extends Date {
constructor() {
super();
}
getFormattedDate() {
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
}
}
Extending null
Extending from null
works like with a normal class, except that the prototype object does not inherit from Object.prototype
.
class nullExtends extends null {
constructor() {}
}
Object.getPrototypeOf(nullExtends); // Function.prototype
Object.getPrototypeOf(nullExtends.prototype) // null
SpecificationsEdit
Specification | Status | Comment |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'extends' in that specification. |
Standard | Initial definition. |
ECMAScript 2017 Draft (ECMA-262) The definition of 'extends' in that specification. |
Draft |
Browser compatibilityEdit
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 42.0 | 45 (45) | ? | ? | ? |
Array subclassing | 43.0 | No support | ? | ? | ? |