JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
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.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Class Inheritance</h2>
<p>Use the “extends” keyword to inherit all methods from another class.</p>
<p>Use the “super” method to call the parent’s constructor function.</p>
<p id=”demo”></p>
<script>
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;
}
}
let myCar = new Model(“Ford”, “Mustang”);
document.getElementById(“demo”).innerHTML = myCar.show();
</script>
</body>
</html>
Output
JavaScript Class Inheritance
Use the "extends" keyword to inherit all methods from another class.
Use the "super" method to call the parent's constructor function.
Getters and Setters
Classes also enable you to use getters and setters.
If you are looking to do something special with the value before returning them, or before you set them, you may use getters and setters.
To add getters and setters in the class, use the get and set keywords.
Example
Create a getter and a setter for the “carname” property.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Class Gettter/Setter</h2>
<p>A demonstration of how to add getters and setters in a class, and how to use the getter to get the property value.</p>
<p id=”demo”></p>
<script>
class Car {
constructor(brand) {
this.carname = brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
let myCar = new Car(“Ford”);
document.getElementById(“demo”).innerHTML = myCar.cnam;
</script>
</body>
</html>
Output
JavaScript Class Gettter/Setter
A demonstration of how to add getters and setters in a class, and how to use the getter to get the property value.
Ford
The name of the getter/setter method must not be the same as the name of the property, in this case, carname.
You may 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.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Class Gettter/Setter</h2>
<p>Using an underscore character is common practice when using getters/setters in JavaScript, but not mandatory, you can name them anything you like, but not the same as the property name.</p>
<p id=”demo”></p>
<script>
class Car {
constructor(brand) {
this._carname = brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
let myCar = new Car(“Ford”);
document.getElementById(“demo”).innerHTML = myCar.carname;
</script>
</body>
</html>
Output
JavaScript Class Gettter/Setter
Using an underscore character is common practice when using getters/setters in JavaScript, but not mandatory, you can name them anything you like, but not the same as the property name.
Ford
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”.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Class Setter</h2>
<p>When using a setter to set a property value, you do not use parantheses.</p>
<p id=”demo”></p>
<script>
class Car {
constructor(brand) {
this._carname = brand;
}
set carname(x) {
this._carname = x;
}
get carname() {
return this._carname;
}
}
let myCar = new Car(“Ford”);
myCar.carname = “Volvo”;
document.getElementById(“demo”).innerHTML = myCar.carname;
</script>
</body>
</html>
Output
JavaScript Class Setter
When using a setter to set a property value, you do not use parantheses.
Volvo
Hoisting
Unlike functions, and other JavaScript declarations, class declarations are not hoisted.
You must declare a class before you can use it.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Classes are not hoisted</h2>
<p>You will get an error if you try to use a class before it is declared.</p>
<p id=”demo”></p>
<script>
//You cannot use the class yet.
//myCar = new Car(“Ford”)
//This would raise an error.
class Car {
constructor(brand) {
this.carname = brand;
}
}
//Now you can use the class:
let myCar = new Car(“Ford”)
</script>
</body>
</html>
Output
JavaScript Classes are not hoisted
You will get an error if you try to use a class before it is declared.