The extends
keyword is used in class declarations or class expressions to create a class that is a child of another class.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
class ChildClass extends ParentClass { ... }
Description
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
.
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;
}
}
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 {
getFormattedDate() {
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
return this.getDate() + '-' + months[this.getMonth()] + '-' + this.getFullYear();
}
}
Specifications
Specification |
---|
ECMAScript (ECMA-262)The definition of 'extends' in that specification. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | Server | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
extends
|
Chrome Full support 49 Full support 49 No support 42 — 49 Notes' Strict mode is required. No support 42 — 49 Disabled' From version 42 until version 49 (exclusive): this feature is behind the |
Edge
Full support 13 |
Firefox
Full support 45 |
IE
No support No |
Opera Full support 36 Full support 36 No support 29 — 36 Notes' Strict mode is required. No support 29 — 36 Disabled' From version 29 until version 36 (exclusive): this feature is behind the |
Safari
Full support 9 |
WebView Android Full support 49 Full support 49 No support 42 — 49 Notes' Strict mode is required. |
Chrome Android Full support 49 Full support 49 No support 42 — 49 Notes' Strict mode is required. No support 42 — 49 Disabled' From version 42 until version 49 (exclusive): this feature is behind the |
Firefox Android
Full support 45 |
Opera Android Full support 36 Full support 36 No support 29 — 36 Notes' Strict mode is required. No support 29 — 36 Disabled' From version 29 until version 36 (exclusive): this feature is behind the |
Safari iOS
Full support 9 |
Samsung Internet Android Full support 5.0 Full support 5.0 No support 4.0 — 5.0 Notes' Strict mode is required. |
nodejs Full support 6.0.0 Full support 6.0.0 Full support 4.0.0 Disabled' From version 4.0.0: this feature is behind the Disabled' From version 5.0.0: this feature is behind the |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.'
- See implementation notes.
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
See also
extends by Mozilla Contributors is licensed under CC-BY-SA 2.5.