{{jsSidebar("Classes")}} {{Harmony}}
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 {{jsxref("Object")}} or {{jsxref("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.area = value; } }
Using extends
with built-in objects
This example extends the built-in {{jsxref("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 {{jsxref("null")}} works like with a normal class, except that the prototype object does not inherit from {{jsxref("Object.prototype")}}.
class nullExtends extends null { constructor() {} } Object.getPrototypeOf(nullExtends); // Function.prototype Object.getPrototypeOf(nullExtends.prototype) // null
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('ES6', '#sec-class-definitions', 'extends')}} | {{Spec2('ES6')}} | Initial definition. |
{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}} | {{Spec2('ESDraft')}} |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | {{CompatChrome(42.0)}} | {{CompatNightly("firefox")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
Array subclassing | {{CompatChrome(43.0)}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatNightly("firefox")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatChrome(42.0)}} |
Array subclassing | {{CompatNo}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatChrome(43.0)}} |