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