The
extends
keyword is used in a class declarations
or class expressions
to create a class with a child of another class.Syntax
class ChildClass extends ParentClass { ... }
Description
The
extends
keyword can be used to subclass custom classes as well as built-in objects.Examples
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) // nullSpecifications
| Specification | Status | Comment |
|---|---|---|
| ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'extends' in that specification. |
STStandard | Initial definition. |
| ECMAScript 2017 Draft (ECMA-262) The definition of 'extends' in that specification. |
DDraft |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 42.0 | 45 (45) | ? | ? | ? |
| Array subclassing | 43.0 | No support | ? | ? | ? |