mozilla
Your Search Results

    extends

    This is a new technology, part of the ECMAScript 2015 (ES6) standard .
    This technology's specification has been finalized, but check the compatibility table for usage and implementation status in various browsers.

    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 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;
      }
    
      set area(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).

    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

    Specifications

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

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 42.0 Available in the Nightly channel only (since March 2015) ? ? ?
    Array subclassing 43.0 Not supported ? ? ?
    Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
    Basic support Not supported 42.0 Available in the Nightly channel only (since March 2015) ? ? ? 42.0
    Array subclassing Not supported 43.0 Not supported ? ? ? 43.0

    See also

    Document Tags and Contributors

    Contributors to this page: claudepache, jpmedley, fscholz, paul.irish
    Last updated by: jpmedley,
    Hide Sidebar