Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Explain sub-classes and inheritance in ES6
In JavaScript, developers used prototypes for inheritance in ES5. ES6 introduced classes, making inheritance syntax cleaner and more familiar to developers from other programming languages.
What are Sub-classes and Inheritance?
A subclass is a child class that inherits properties and methods from a parent class (superclass). Inheritance allows you to create new classes based on existing ones, promoting code reuse and establishing hierarchical relationships between classes.
The subclass automatically inherits all properties and methods from the superclass and can access them through its objects. You use the extends keyword to create inheritance relationships.
Syntax
class SuperClass {
// properties and methods of the superclass
}
class SubClass extends SuperClass {
// inherits all properties and methods from SuperClass
// can define additional properties and methods
}
Benefits of Inheritance
Code Reusability: Inherit existing functionality without rewriting code
Time Efficiency: Saves development time by avoiding code duplication
Maintainability: Creates organized, structured code that's easier to maintain
Method Overriding: Customize inherited methods to fit specific needs
Basic Inheritance Example
Here's a practical example showing how a Two_BHK class inherits from a House class and overrides its methods:
<html>
<body>
<h2>Using the <i>extends</i> keyword for inheritance in ES6</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
class House {
color = "blue";
get_total_rooms() {
output.innerHTML += "House has default rooms.<br>";
}
}
// Extending House class
class Two_BHK extends House {
is_gallery = false;
// Overriding parent method
get_total_rooms() {
output.innerHTML += "2-BHK flat has exactly two rooms.<br>";
}
}
// Creating objects and testing inheritance
let house1 = new House();
house1.get_total_rooms();
let house2 = new Two_BHK();
house2.get_total_rooms();
// Accessing inherited property
output.innerHTML += "House color: " + house2.color + "<br>";
</script>
</body>
</html>
House has default rooms. 2-BHK flat has exactly two rooms. House color: blue
Constructor Inheritance with super()
When working with constructors in inheritance, use the super() keyword to call the parent class constructor. The super() call must come before accessing this in the subclass constructor:
<html>
<body>
<h2>Constructor inheritance with super()</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
class Vehicle {
constructor(brand, year) {
this.brand = brand;
this.year = year;
}
getInfo() {
return `${this.brand} (${this.year})`;
}
}
class Car extends Vehicle {
constructor(brand, year, doors) {
// Call parent constructor first
super(brand, year);
this.doors = doors;
}
getDetails() {
return `${this.getInfo()} - ${this.doors} doors`;
}
}
let myCar = new Car("Toyota", 2023, 4);
output.innerHTML += "Car details: " + myCar.getDetails() + "<br>";
output.innerHTML += "Brand: " + myCar.brand + "<br>";
output.innerHTML += "Year: " + myCar.year + "<br>";
output.innerHTML += "Doors: " + myCar.doors + "<br>";
</script>
</body>
</html>
Car details: Toyota (2023) - 4 doors Brand: Toyota Year: 2023 Doors: 4
Key Points
Use
extendskeyword to create inheritance relationshipsSubclasses inherit all properties and methods from the parent class
Use
super()to call the parent constructorsuper()must be called before accessingthisin subclass constructorsMethods can be overridden in subclasses to provide specific implementations
Conclusion
ES6 class inheritance provides a clean, readable way to create hierarchical relationships between classes. Use extends for inheritance and super() for constructor chaining to build maintainable, reusable code structures.
466 Views
