Tutorials Exercises Services Get Certified Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++
JavaScript Class Inheritance
‹ Previous Next ›
Class Inheritance
To create a class inheritance, use the extends keyword.
A class created with a class inheritance inherits all the methods from another class:
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;
}
https://www.w3schools.com/js/js_class_inheritance.asp 02/11/2024, 10 50 AM
Page 1 of 8
:
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();
Try it Yourself »
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.
Inheritance is useful for code reusability: reuse properties and methods of an existing
class when you create a new class.
ADVERTISEMENT
Getters and Setters
Classes also allows you to use getters and setters.
It can be smart to use getters and setters for your properties, especially if you want to
do something special with the value before returning them, or before you set them.
To add getters and setters in the class, use the get and set keywords.
https://www.w3schools.com/js/js_class_inheritance.asp 02/11/2024, 10 50 AM
Page 2 of 8
:
Example
Create a getter and a setter for the "carname" property:
class Car {
constructor(brand) {
this.carname = brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;
Try it Yourself »
Note: even if the getter is a method, you do not use parentheses when you want to get
the property value.
The name of the getter/setter method cannot be the same as the name of the property,
in this case carname .
Many programmers use an underscore character _ before the property name to
separate the getter/setter from the actual property:
Example
You can use the underscore character to separate the getter/setter from the actual
property:
class Car {
constructor(brand) {
https://www.w3schools.com/js/js_class_inheritance.asp 02/11/2024, 10 50 AM
Page 3 of 8
:
this._carname = brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
Try it Yourself »
To use a setter, use the same syntax as when you set a property value, without
parentheses:
Example
Use a setter to change the carname to "Volvo":
class Car {
constructor(brand) {
this._carname = brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
const myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;
Try it Yourself »
https://www.w3schools.com/js/js_class_inheritance.asp 02/11/2024, 10 50 AM
Page 4 of 8
:
Hoisting
Unlike functions, and other JavaScript declarations, class declarations are not hoisted.
That means that you must declare a class before you can use it:
Example
//You cannot use the class yet.
//myCar = new Car("Ford") will raise an error.
class Car {
constructor(brand) {
this.carname = brand;
}
}
//Now you can use the class:
const myCar = new Car("Ford")
Try it Yourself »
Note: For other declarations, like functions, you will NOT get an error when you try to
use it before it is declared, because the default behavior of JavaScript declarations are
hoisting (moving the declaration to the top).
‹ Previous Next ›
W3schools Pathfinder
Track your progress - it's free! Sign Up Log in
https://www.w3schools.com/js/js_class_inheritance.asp 02/11/2024, 10 50 AM
Page 5 of 8
:
ADVERTISEMENT
COLOR PICKER
ADVERTISEMENT
https://www.w3schools.com/js/js_class_inheritance.asp 02/11/2024, 10 50 AM
Page 6 of 8
:
PLUS SPACES GET CERTIFIED
FOR TEACHERS FOR BUSINESS CONTACT US
Top Tutorials Top References
HTML Tutorial HTML Reference
CSS Tutorial CSS Reference
JavaScript Tutorial JavaScript Reference
How To Tutorial SQL Reference
SQL Tutorial Python Reference
Python Tutorial W3.CSS Reference
W3.CSS Tutorial Bootstrap Reference
Bootstrap Tutorial PHP Reference
PHP Tutorial HTML Colors
Java Tutorial Java Reference
C++ Tutorial Angular Reference
jQuery Tutorial jQuery Reference
Top Examples Get Certified
HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
W3.CSS Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate
https://www.w3schools.com/js/js_class_inheritance.asp 02/11/2024, 10 50 AM
Page 7 of 8
:
FORUM ABOUT ACADEMY
W3Schools is optimized for learning and training. Examples might be simplified to
improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we
cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms
of use, cookie and privacy policy.
Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by
W3.CSS.
https://www.w3schools.com/js/js_class_inheritance.asp 02/11/2024, 10 50 AM
Page 8 of 8
:
