JavaScript: Classes Part-2
Tags: javascript, webdev, beginners, codenewbie
Published: 2021-04-01 20:15:20

## 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.  

```javascript
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.
```javascript
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](https://dev.to/kiranrajvjd/javascript-classes-part-1-3l6b)
[JavaScript Classes: Part3- Getters and Setters](https://dev.to/kiranrajvjd/javascript-classes-part-3-186c)