W3cubDocs

/JavaScript

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

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
extends 49
49
42 — 49
Strict mode is required.
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.
13 45 No 36
36
29 — 36
Strict mode is required.
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).
9
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
extends 49
49
42 — 49
Strict mode is required.
49
49
42 — 49
Strict mode is required.
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.
45 36
36
29 — 36
Strict mode is required.
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).
9 5.0
5.0
4.0 — 5.0
Strict mode is required.
Server
Node.js
extends 6.0.0
6.0.0
4.0.0
Disabled
Disabled From version 4.0.0: this feature is behind the --use_strict runtime flag.
5.0.0
Disabled
Disabled From version 5.0.0: this feature is behind the --harmony runtime flag.

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends