Javascript OOP-2 (Inheritance) -

#javascript #webdev #productivity #oop

Hello Guys today i am going to discuss OOP(Object Oriented Programming) in javascript.It is one of the Important concept in any programming langauge and makes your code cleaner , reusable and safer.

Todays topic is "Inheritance"

Lets get Started...

Before Discussing Inheritance , i am going to discuss some topics which you should know to understand inheritance.

Contructor -

A JavaScript constructor method is a special type of method which is used to initialize and create an object. It is called when memory is allocated for an object.
The class can contain one constructor method only.
JavaScript allows us to use parent class constructor through "super" keyword.
If we didn't specify any constructor method, JavaScript use default constructor method.

Inheritance -

The JavaScript inheritance is a mechanism that allows us to create new classes on the basis of already existing classes. It provides flexibility to the child class to reuse the methods and variables of a parent class.
The JavaScript extends keyword is used to create a child class on the basis of a parent class. It facilitates child class to acquire all the properties and behavior of its parent class.

Example -

class Order{
    constructor(orderNo,orderName){
        this.orderNo = orderNo;
        this.orderName = orderName;
    }
    display(){
        return this.orderNo + " " + this.orderName;
    }
}

//inheritance
class User extends Order{
    constructor(orderNo,orderName,userName){
        super(orderNo,orderName);
        this.userName = userName;
    }
    show(){
        console.log("Username :  " + this.userName + 
"\nOrder : " + this.display());
    }
}
const object = new User(1,"Choco Rolls","User 1");
console.log(object.show())

Output -

Username : User 1
Order : 1 Choco Rolls

Explaination -

First we have created a class named "Order" and inside it we have created a constructor using constructor keyword.
We have passed two parameters in our constructor named "orderNo" and "orderName".
Then we have used the "this" keyword to refer to the objects which belongs to constructor , in our case they are "orderNo" and "orderName".
Then a method display() will print the order no. and order name passed to the constructor.
Then we have created another class named "User" which inherited the "Order" class properties using "extend" keyword.
The again we have created a constructor and passed three parameters inside it namely "orderNo" , "orderName" , "userName".
Then using "super" keyword we have inherited the properties of "orderNo" and "orderName" in "Order" class and for the userName we have refer to its property using "this" keyword in our "User" class constructor. "userName" is the property of "User" class that's why we have to use "this" keyword to refer to its property.
Then we created a method called "show" to display the "userName" value using "this" keyword and also used the "display()" method from "Order" class using "this" keyword to indicate that the method belongs to the class.
Then in the end , we have created an object of "User" class named "object" using "new" keyword.
Then we called the "show()" method of "User" class using object.show() (dot operator).

Thats it for this post.

THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.

^^You can help me by some donation at the link below Thank you👇👇 ^^

☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well

Top comments (6)

John Peters • Jan 21 '22

This example violates two principles 1) Favor Composition over inheritance and 2) Never inherit something that does not strictly follow the is-a rule.

This example is exactly why Javascript people dislike OOP so much; they don't know the rules, which get code bases into major issues and unmaintainable code.