Inheritance in JavaScript Classes

We have seen how to create Classes in JavaScript.

Let’s now learn how to inherit classes in JavaScript.

• In inheritance, parameters and methods of base class can be used in derived class.
• We inherit class using extend keyword.
• constructor is a default function which is automatically called when a class is instantiated. It is used to initialize the parameters of the class.
• super is a method that is used to call base class’ constructor.
• this keyword is used to access the parameters for current object.

Below is a sample code for inheritance

class Person{
  constructor(personName, personAddress){
    this.name=personName;
    this.address=personAddress;  
  }
  getPersonDetails(){
    console.log("Name: " + this.name);
    console.log("Location: " + this.address);
  }
}

class Student extends Person{
  constructor(name, address,studentClass, studentId){
    super(name, address);
    this.studentClass = studentClass;
    this.Id=studentId;
  }
  getStudentDetails(){
    console.log("Class: " + this.studentClass);
    console.log("ID: " + this.Id);
  }
}

class CollegeStudent extends Student{
  constructor(name, address, stdCls, id, clgName){
    super(name, address, stdCls, id);
    this.CollegeName=clgName;
  }
  getDetails(){
    console.log("College Name: " + this.CollegeName);
  }
}

const student = new CollegeStudent("Akanksha","Delhi","12th",12345,"NIT");
student.getPersonDetails();
student.getStudentDetails();
student.getDetails();

Inheritance in TypeScript

• Inheritance is a concept in which we reuse the properties and methods of another class or interface, hence no need to rewrite the code again and again.
• We use extend keyword to inherit other interfaces and classes.
• We use an existing class to create a new class.
• The class that is used to create the new class is called as parent class/super class. The newly created class is called as child class/sub class.
• Child class inherits all the fields and methods from the parent class except the private fields and constructor.
• Inheritance with Interface is explained in another article.

Syntax

class childClass extends parentClass{}

Below is an example of class inheritance

class Vehicle{
    model:string;
    color:string;
}
class Car extends Vehicle{
    fuelType:string;
}

class Maruti extends Car{
    customername:string;
    purchasedOn:string;
    
    constructor(custName:string, date:string, ){
        super();
        this.customername = custName;
        this.purchasedOn = date;   
    }
    purchaseDetails():void {
        console.log(this.customername + " purchased a car on " + this.purchasedOn);
        console.log("Model of the car: " + this.model+ "; Color: " + this.color + "; Fuel Type: " + this.fuelType);
    }
}
var car = new Maruti("Akanksha","28th Dec, 2018");
car.model = "Maruti Suzuki Dzire"
car.fuelType = "Diesel";
car.color = "Silver";
car.purchaseDetails();

Below is the output of above code

Other Related Articles

Classes in TypeScript
Interfaces and Classes in TypeScript
Interfaces in TypeScript
Access Modifiers
Method Overriding