MDN will be in maintenance mode on Wednesday September 20th, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

Our volunteers haven't translated this article into Català yet. Join us and help get the job done!
You can also read the article in English (US).

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

new nullExtends(); //ReferenceError: this is not defined

Specifications

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'extends' in that specification.
Standard Initial definition.
ECMAScript Latest Draft (ECMA-262)
The definition of 'extends' in that specification.
Living Standard  

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 42.0 (Yes) 45 (45) ? ? ?
Array subclassing 43.0 (Yes) 53 (53) ? ? ?
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support (Yes) 45.0 (45) ? ? ? 42.0
Array subclassing No support (Yes) No support ? ? ? 43.0

See also

Document Tags and Contributors

 Last updated by: fscholz,