Our volunteers haven't translated this article into Català yet. Join us and help get the job done!
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.
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; } set area(value) { this.height = this.width = Math.sqrt(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
Specifications
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 compatibility
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 |
See also
Document Tags and Contributors
Tags:
Contributors to this page:
stevenkaspar,
fscholz,
rwaldron,
devinivy,
jpmedley,
claudepache,
paul.irish
Last updated by:
stevenkaspar,