JavaScript Class extends
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();
Definition and Usage
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) |
|---|
Related Pages
JavaScript Tutorial: JavaScript Classes
JavaScript Tutorial: JavaScript ES6 (EcmaScript 2015)
JavaScript Reference: The super Keyword
JavaScript Reference: The constructor() method
