extends

The extends keyword is used in a class declarations or class expressions to create a class with a child of another class.

Syntax

JavaScript
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).

JavaScript
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).

JavaScript
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.

JavaScript
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

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/javascript/reference/classes/extends

Classes ECMAScript6 JavaScript