The extends
keyword is used in class declarations or class expressions to create a class which is a child of another class.
class ChildClass extends ParentClass { ... }
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
.
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.height = this.width = Math.sqrt(value); this.area = value; } }
extends
with built-in objectsThis 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(); } }
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
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 |
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 42.0 | 45 (45) | ? | ? | ? |
Array subclassing | 43.0 | No support | ? | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|
Basic support | No support | 45.0 (45) | ? | ? | ? | 42.0 |
Array subclassing | No support | No support | ? | ? | ? | 43.0 |
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends