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:


Chrome	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

extends is not supported in Internet Explorer 11 (or earlier).

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