JavaScript: Classes Part-2

Class inheritance

Inheritance is an object oriented programming concept in which methods from base class get copied into derived class. In JavaScript inheritance is possible due to prototype object. Extend keyword is used to inherit base class methods to derived class. JavaScript implements inheritance by allowing you to associate a prototypical object with any constructor function. An example showing class inheritance is given below.

class Automobile{
    constructor(type, fuel, speed){
        this.type = type;
        this.fuel = fuel;
        this.speed = speed;
    }

    printDetails(){
        console.log(`${this.type} - ${this.fuel} -${this.speed}`);
    }

    fuelStatus(liter){
        this.liter = liter;
        console.log(`Contains ${this.liter} ${this.fuel}`)
    }
}

let car = new Automobile("sedan", "petrol", "100km/h");
car.printDetails(); //sedan - petrol - 100km/h

class Bus extends Automobile{
    constructor(type, fuel, speed,transport){
        super(type, fuel, speed);
        this.transport = transport;
    }

    printDetails(){
        console.log(`${this.type} - ${this.fuel} - 
         ${this.speed} Transport type ${this.transport}`);
    }

}

let bus1 = new Bus("sedan", "petrol", "100km/h", "Public");
bus1.printDetails(); 
//sedan - petrol - 100km/h Transport type Public

In the above code the Automobile base class contains a constructor, fuelStatus and printDetails methods. An object car is created from the class Automobile using the new keyword. Next a class Bus is created by inheriting the Automobile base class using the extend keyword. Bus use the super(type, fuel, speed); to call the parent constructor. super should be used before any this. We can use super.methodName() to call a parent method. In the above example the derived class overrides the printDetails method().

bus1 object have access to Bus's methods and access to both Automobile methods (prientDetails and fuelStatus). Here Bus.prototype.[[Prototype]] points to the Automobile.prototype which is the default behavior of JavaScript inheritance. So if a method is not found in the Bus.prototype, it looks in the Automobile.prototype.

Remember arrow function do not have a super keyword associated with it.

Let's look at one more example.

class Automobile {
    fuel = 'petrol';
    constructor() {
        console.log(this.fuel)
    }
}

class ElectricCar extends Automobile {
    fuel = 'diesel';
}

new Automobile();    //petrol
new ElectricCar();   //petrol 

In the above code the output of both new Automobile(); new ElectricCar(); was petrol even thought ElectricCar sets fuel field to diesel. What happens here is, ElectricCar does not have a constructor, so the parent constructor is called. Parent constructor looks for fuel field in its class(Automobile) and it finds the fuel field with value petrol it use that value, as a result we get the "petrol" as output. Remember this parent constructor always use its own field value.

JavaScript Classes: Part1- Basics
JavaScript Classes: Part3- Getters and Setters