You are on the editable version of MDN Web Docs

View as an MDN Web Docs user: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends

The extends keyword is used in class declarations or class expressions to create a class that is 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;
  }
}

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

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
extendsChrome Full support 49
Full support 49
No support 42 — 49
Notes
Notes Strict mode is required.
No support 42 — 49
Disabled
Disabled From version 42 until version 49 (exclusive): this feature is behind the Experimental JavaScript preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge Full support 13Firefox Full support 45IE No support NoOpera Full support 36
Full support 36
No support 29 — 36
Notes
Notes Strict mode is required.
No support 29 — 36
Disabled
Disabled From version 29 until version 36 (exclusive): this feature is behind the Experimental JavaScript preference (needs to be set to Enabled).
Safari Full support 9WebView Android Full support 49
Full support 49
No support 42 — 49
Notes
Notes Strict mode is required.
Chrome Android Full support 49
Full support 49
No support 42 — 49
Notes
Notes Strict mode is required.
No support 42 — 49
Disabled
Disabled From version 42 until version 49 (exclusive): this feature is behind the Experimental JavaScript preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Firefox Android Full support 45Opera Android Full support 36
Full support 36
No support 29 — 36
Notes
Notes Strict mode is required.
No support 29 — 36
Disabled
Disabled From version 29 until version 36 (exclusive): this feature is behind the Experimental JavaScript preference (needs to be set to Enabled).
Safari iOS Full support 9Samsung Internet Android Full support 5.0
Full support 5.0
No support 4.0 — 5.0
Notes
Notes Strict mode is required.
nodejs Full support 6.0.0
Full support 6.0.0
Full support 4.0.0
Disabled
Disabled From version 4.0.0: this feature is behind the --use_strict runtime flag.
Full support 5.0.0
Disabled
Disabled From version 5.0.0: this feature is behind the --harmony runtime flag.

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