Hasan Zohdy

Posted on Nov 18, 2022

4-JS OOP: Class Inheritance

#javascript #oop #typescript

Introduction

Inheritance is a way to create a new class from an existing class, the new class is called child class and the existing class is called parent class.

Types of Inheritance

There are 3 types of inheritance:

Single Inheritance
Multiple Inheritance
Hierarchical Inheritance

Single Inheritance

Single inheritance is the simplest form of inheritance, it is a way to create a new class from an existing class, the new class is called child class and the existing class is called parent class.

Let's see an example in JS:

class Human {
    name;
    age;
    gender;
}

class Male extends Human {
    beard;
}

class Female extends Human {
    hair;
}

Here we have 3 classes, the Human class is the parent class, and the Male and Female classes are the child classes.

Each child has added a new attribute to the parent class, so in overall the Male class will act as if it has the attributes name, age, gender, and beard, and the Female class will act as if it has the attributes name, age, gender, and hair.

We can actually override the attributes of the parent class in the child class, for example:

class Human {
    name;
    age;
    gender;
}

class Male extends Human {
    beard;
    gender = 'male';
}

class Female extends Human {
    hair;
    gender = 'female';
}

Here we have overridden the gender attribute of the parent class in the child classes as we already know that the Male class is a Human and the Female class is a Human, so we don't need to define the gender attribute in the child classes because each child knows its gender (we can doubt that nowadays 😂).

Multiple Inheritance

Multiple inheritance is a way to create a new class from multiple existing classes, the new class is called child class and the existing classes are called parent classes.

This is actually not supported in JS, but we can achieve it using mixins, which we'll learn about it later.

Hierarchical Inheritance

Hierarchical inheritance is a way to create multiple child classes from a single parent class.

For example, the GrandChild class extends Dad class, and Dad class extends GrandPa class, so the GrandChild class is a Dad and a GrandPa.

class GrandPa {
    name;
    age;
}

class Dad extends GrandPa {
    beard;
}

class GrandChild extends Dad {
    hair;
}

In the above example, the GrandChild class is a Dad and a GrandPa.

In that sense, the GrandChild class inherits from both the Dad class and the GrandPa class.

Let's see another practical example.

We can have a Person class, that Person class can be a Teacher or an Employee or a Student, so we can create a Teacher class that extends the Person class, and we can create an Employee class that extends the Person class, and we can create a Student class that extends the Person class.

class Person {
    name;
    age;
}

class Teacher extends Person {
    subject;
}

class Employee extends Person {
    salary;
}

class Student extends Person {
    grade;
}

In the above example, the Teacher class is a Person, the Employee class is a Person, and the Student class is a Person.

We can actually make more hierarchy structure, for example, we can extend the Employee class with a child class called Manager as any Employee is a Person and any Manager is an Employee and a Person.

class Person {
    name;
    age;
}

class Employee extends Person {
    salary;
}

class Manager extends Employee {
    department;
}

🎨 Conclusion

Inheritance is a way to create a new class from an existing class, the new class is called child class and the existing class is called parent class.

This is one of the most important concepts in OOP, and it's very useful in real-world applications, you can see that clearly in the Node Js Course.

☕♨️ Buy me a Coffee ♨️☕

If you enjoy my articles and see it useful to you, you may buy me a coffee, it will help me to keep going and keep creating more content.

😍 Join our community

Join our community on Discord to get help and support.

📚 Bonus Content 📚

You may have a look at these articles, it will definitely boost your knowledge and productivity.

General Topics

Packages & Libraries

React Js Packages

useFetcher: easiest way to fetch data in React Js

Courses (Articles)

DEV Community