JavaScript Class Inheritance
Class Inheritance
To make a class inherit from another, use the extends keyword.
A new class, formed through class inheritance, adopts all the methods of another class.
The super() method is used to talk about the parent class.
In the constructor method, when we use the super() method, it means we are invoking the constructor method of the parent. This allows us to use the properties and methods of the parent class.
Using inheritance in coding helps you reuse the features and actions of an already-made class when you're making a new class.
Getters and Setters
Classes also enable the use of getters and setters.
Using getters and setters for your properties can be wise, especially when you need to perform specific actions with the value before retrieving or setting them.
To include getters and setters in a class, utilize the get and set keywords.
Note:If the getter is a method, don't use parentheses when you're trying to obtain the property value.
The method for getting or setting a value cannot have the same name as the property, like in this situation with the carname.
The getter/setter method's name must be different from the property name, specifically in this instance, carname.
To employ asetter, follow the same format as when you assign a value to a property, but exclude parentheses:
Hoisting
Class declarations in JavaScript are not hoisted, unlike functions and other JavaScript declarations.
This implies that you need to state a class before putting it into action:
Note: Unlike variables, if you try to use functions or other declarations before they are actually declared, JavaScript won't throw an error. This is because JavaScript declarations are hoisted, meaning they are moved to the top by default.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Inheritance</h1>
<p>Use the "extends" keyword to get all the methods from another class.</p>
<p>Use the "super" technique to activate 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;
}
}
const myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Getter/Setter</h1>
<p>An example showing how to include functions to fetch and update data in a class, and how to employ the fetching function to obtain the property's 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;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Getter/Setter</h1>
<p>In JavaScript, it's common to use an underscore (_) when making getters/setters, but you don't have to. You can name them whatever you want, as long as it's 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;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Setters</h1>
<p>When you're setting a property value using a setter, you don't need to use parentheses.</p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this._carname = brand;
}
set carname(x) {
this._carname = x;
}
get carname() {
return this._carname;
}
}
const myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes are not Hoisted</h1>
<p>If you try to use a class before saying what it is, you'll see an error.</p>
<p id="demo"></p>
<script>
//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");
document.getElementById("demo").innerHTML = myCar.carname;
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery