extends
 The extends keyword is used in class declarations or class expressions to create a class that is a child of another class. 
Try it
Syntax
class ChildClass extends ParentClass { /* … */ }
Description

 The extends keyword can be used to subclass custom classes as well as built-in objects.  Any constructor that can be called with new (that is, it has the prototype property) can be the candidate for the parent class. function OldStyleClass() {
  this.someProperty = 1;
}
OldStyleClass.prototype.someMethod = function () {};

class ChildClass extends OldStyleClass {}

class ModernClass {
  someProperty = 1;
  someMethod() {}
}

class AnotherChildClass extends ModernClass {}
 The .prototype of the ParentClass must be an Object or null. function ParentClass() {}
ParentClass.prototype = 3;

class ChildClass extends ParentClass {}
// Uncaught TypeError: Class extends value does not have valid prototype property 3
  Note: You would rarely worry about this in practice, because a non-object prototype doesn't behave as it should anyway. function ParentClass() {}
ParentClass.prototype = 3;
console.log(Object.getPrototypeOf(new ParentClass()));
// Logs "[Object: null prototype] {}": not actually a number!
  extends will set the prototype for both ChildClass and ChildClass.prototype. class ParentClass {}
class ChildClass extends ParentClass {}

// Allows inheritance of static properties
Object.getPrototypeOf(ChildClass) === ParentClass;
// Allows inheritance of instance properties
Object.getPrototypeOf(ChildClass.prototype) === ParentClass.prototype;
 The right-hand side of extends does not have to be an identifier. You can use any expression that evaluates to a constructor. class SomeClass extends class {
  constructor() {
    console.log("Base class");
  }
} {
  constructor() {
    super();
    console.log("Derived class");
  }
}

new SomeClass();
// Base class
// Derived class
 This is often useful to create mixins.
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() {
    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    return `${this.getDate()}-${months[this.getMonth()]}-${this.getFullYear()}`;
  }
}

Specifications

Specification
ECMAScript Language Specification # sec-class-definitions

Browser compatibility




Desktop
Mobile
Server



Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
WebView Android
Chrome Android
Firefox for Android
Opera Android
Safari on IOS
Samsung Internet
Deno
Node.js



extends

49
42-49
Strict mode is required.

13
45
No

36
29-36
Strict mode is required.

9

49
42-49
Strict mode is required.


49
42-49
Strict mode is required.

45

36
29-36
Strict mode is required.

9

5.0
4.0-5.0
Strict mode is required.

1.0

6.0.0
5.0.0
4.0.0



See also
 Classes constructor super Anurag Majumdar - Super & Extends in JavaScript 

Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide.


Last modified: Jul 28, 2022, by MDN contributors


    
{'path': 'public/docs/javascript/classes/extends.html', 'source': 'DevDocs.IO'}