JavaScript Inheritance

In this chapter, we will learn about JavaScript inheritance. Inheritance is a core concept of Object-Oriented Programming (OOP) that allows one class to inherit properties and methods from another class. We will cover:

• What is Inheritance?
• Why Use Inheritance?
• Creating a Base Class
• Extending a Class
• Using the super Keyword
• Method Overriding
• Inheritance with Constructors
• Simple Programs using Inheritance

What is Inheritance?

Inheritance is a mechanism in which one class (child class) derives properties and methods from another class (parent class). This allows for code reuse and the creation of hierarchical class structures.

Why Use Inheritance?

Inheritance provides several benefits:

• Code Reusability: Allows child classes to reuse code from parent classes.
• Hierarchical Class Structure: Enables the creation of a logical class hierarchy.
• Maintainability: Simplifies code maintenance by organizing related classes together.
• Extensibility: Makes it easier to extend and modify existing code.

Creating a Base Class

A base class, also known as a parent or superclass, is a class that provides properties and methods that can be inherited by other classes.

Example

class Person { constructor(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age; } getFullName() { return `${this.firstName} ${this.lastName}`; } } let person = new Person("Ramesh", "Fadatare", 25); console.log(person.getFullName()); 

Output:

Ramesh Fadatare 

Extending a Class

A child class, also known as a subclass, extends the parent class using the extends keyword.

Example

class Student extends Person { constructor(firstName, lastName, age, course) { super(firstName, lastName, age); this.course = course; } getCourse() { return this.course; } } let student = new Student("Neha", "Sharma", 20, "Engineering"); console.log(student.getFullName()); console.log(student.getCourse()); 

Output:

Neha Sharma Engineering 

Using the super Keyword

The super keyword is used to call the constructor of the parent class and access its properties and methods.

Example

class Teacher extends Person { constructor(firstName, lastName, age, subject) { super(firstName, lastName, age); this.subject = subject; } getSubject() { return this.subject; } } let teacher = new Teacher("Ravi", "Singh", 35, "Mathematics"); console.log(teacher.getFullName()); console.log(teacher.getSubject()); 

Output:

Ravi Singh Mathematics 

Method Overriding

Method overriding allows a child class to provide a specific implementation of a method that is already defined in its parent class.

Example

class Employee extends Person { constructor(firstName, lastName, age, jobTitle) { super(firstName, lastName, age); this.jobTitle = jobTitle; } getFullName() { return `${this.firstName} ${this.lastName}, ${this.jobTitle}`; } } let employee = new Employee("Anil", "Gupta", 40, "Manager"); console.log(employee.getFullName()); 

Output:

Anil Gupta, Manager 

Inheritance with Constructors

When a child class inherits from a parent class, the constructor of the parent class must be called using the super keyword before using this in the child class.

Example

class Vehicle { constructor(make, model) { this.make = make; this.model = model; } getDetails() { return `${this.make} ${this.model}`; } } class Car extends Vehicle { constructor(make, model, year) { super(make, model); this.year = year; } getDetails() { return `${super.getDetails()} (${this.year})`; } } let car = new Car("Toyota", "Camry", 2021); console.log(car.getDetails()); 

Output:

Toyota Camry (2021) 

Simple Programs using Inheritance

Program 1: Library Management with Inheritance

class Book { constructor(title, author, isbn) { this.title = title; this.author = author; this.isbn = isbn; } getDetails() { return `${this.title} by ${this.author}, ISBN: ${this.isbn}`; } } class EBook extends Book { constructor(title, author, isbn, fileSize) { super(title, author, isbn); this.fileSize = fileSize; } getDetails() { return `${super.getDetails()}, File Size: ${this.fileSize} MB`; } } let ebook = new EBook("The Alchemist", "Paulo Coelho", "123456", 2); console.log(ebook.getDetails()); 

Output:

The Alchemist by Paulo Coelho, ISBN: 123456, File Size: 2 MB 

Program 2: Animal Hierarchy with Inheritance

class Animal { constructor(name) { this.name = name; } makeSound() { return "Some generic sound"; } } class Dog extends Animal { makeSound() { return "Bark"; } } class Cat extends Animal { makeSound() { return "Meow"; } } let dog = new Dog("Tommy"); let cat = new Cat("Kitty"); console.log(dog.name + " says: " + dog.makeSound()); console.log(cat.name + " says: " + cat.makeSound()); 

Output:

Tommy says: Bark Kitty says: Meow 

Program 3: Employee Management with Inheritance

class Employee { constructor(name, position) { this.name = name; this.position = position; } getDetails() { return `${this.name}, ${this.position}`; } } class Manager extends Employee { constructor(name, position, department) { super(name, position); this.department = department; } getDetails() { return `${super.getDetails()}, Department: ${this.department}`; } } let manager = new Manager("Ravi", "Manager", "IT"); console.log(manager.getDetails()); 

Output:

Ravi, Manager, Department: IT 

Program 4: Shapes with Inheritance

class Shape { constructor(color) { this.color = color; } getColor() { return this.color; } } class Circle extends Shape { constructor(color, radius) { super(color); this.radius = radius; } getArea() { return Math.PI * Math.pow(this.radius, 2); } } let circle = new Circle("Red", 5); console.log(`Color: ${circle.getColor()}, Area: ${circle.getArea()}`); 

Output:

Color: Red, Area: 78.53981633974483 

Program 5: School System with Inheritance

class Person { constructor(name, age) { this.name = name; this.age = age; } getDetails() { return `${this.name}, Age: ${this.age}`; } } class Student extends Person { constructor(name, age, grade) { super(name, age); this.grade = grade; } getDetails() { return `${super.getDetails()}, Grade: ${this.grade}`; } } class Teacher extends Person { constructor(name, age, subject) { super(name, age); this.subject = subject; } getDetails() { return `${super.getDetails()}, Subject: ${this.subject}`; } } let student = new Student("Priya", 20, "A"); let teacher = new Teacher("Mr. Sharma", 45, "Mathematics"); console.log(student.getDetails()); console.log(teacher.getDetails()); 

Output:

Priya, Age: 20, Grade: A Mr. Sharma, Age: 45, Subject: Mathematics 

Conclusion

In this chapter, you learned about JavaScript inheritance, including creating base and child classes, using the super keyword, method overriding, and inheritance with constructors. We also provided various use cases with simple programs to demonstrate the usage of inheritance. Inheritance is a powerful feature in OOP that promotes code reuse and extensibility.