JavaScript Class extends

❮ Previous JavaScript Classes Reference Next ❯

Example

Create a class named "Model" which will inherit the methods from the "Car" class:

class Car {
constructor(brand) {
    this.carname = brand;
}
present() {
    return 'I have a ' + this.carname;
}
}

class Model extends Car {
constructor(brand, mod) {
    super(brand);
    this.model = mod;
}
show() {
    return this.present() + ', it is a ' + this.model;
}
}

mycar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = mycar.show();

Try it Yourself »

Description

The extends keyword is used to create a child class of another class (parent).

The child class inherits all the methods from another class.

Inheritance is useful for code reusability: reuse properties and methods of an existing class when you create a new class.

Note: From the example above; The super() method refers to the parent class. By calling the super() method in the constructor method, we call the parent's constructor method and gets access to the parent's properties and methods.

Browser Support

extends is an ECMAScript6 (ES6) feature.

ES6 (JavaScript 2015) is supported in all modern browsers since June 2017:


Chrome 51	Edge 15	Firefox 54	Safari 10	Opera 38
May 2016	Apr 2017	Jun 2017	Sep 2016	Jun 2016

extends is not supported in Internet Explorer.

Syntax

class childClass extends parentClass

Technical Details

JavaScript Version:	ECMAScript 2015 (ES6)

JavaScript Tutorial: JavaScript Classes

JavaScript Tutorial: JavaScript ES6 (EcmaScript 2015)

JavaScript Reference: The super Keyword

JavaScript Reference: The constructor() method