Inheritance in JavaScript

Inheritance in JavaScript is very important topic to understand, but it has prototypal inheritance. This is not so easy to understand because this type of inheritance does not easily available in popular language like C++ or Java.

For more details, please follow the link.

So If you are coming from a comparative approach, this idea will look clumsy. Lets try. Suppose we want to create a Vehicle constructor.

function Vehicle(options){
    this.manufacturingYear = options.manufacturingYear;
}

Vehicle.prototype.drive = function() {
    return 'Vroom Vroom';
}

Now, lets create a Car constructor which can inherit from Vehicle.

function Car(options) {
    this.engineType = options.engineType;
}

Car.prototype.start = function() {
    console.log(`{this.engineType} starting`);
}

const bmw = new Car({
    manufacturingYear: 2023,
    engineType: 'Petrol'
});

console.log(bmw.manufacturingYear); // undefined- no such property inside car

We need to make sure Car has all the features of Vehicle.

function Car(options) {
    Vehicle.call(this, options);
    this.engineType = options.engineType;
}

By calling the Vehicle constructor inside Car, you can get all the properties of Car which is defined inside Vehicle. for example.

const bmw = new Car({
    manufacturingYear: 2023,
    engineType: 'Petrol'
});

console.log(bmw.manufacturingYear); // 2023 as output

but what about if we want to access drive method of Vehicle which is the part of Vehicle prototype. To make this happens, we need to change the prototype of Car.

Car.prototype = Object.create(Vehicle.prototype);

Assigning constructor, change the constructor of the Car instance.

console.log(bmw.constructor); // Vehicle

Lets reassign the constructor back to Car.

Car.prototype.constructor = Car;

The combined code will look like this.

function Vehicle(options){
    this.manufacturingYear = options.manufacturingYear;
}

Vehicle.prototype.drive = function() {
    console.log('Vroom Vroom');
}

function Car(options) {
    Vehicle.call(this, options);
    this.engineType = options.engineType;
}

Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;

Car.prototype.start = function() {
    console.log(this.engineType + 'starting');
}

const bmw = new Car({
    manufacturingYear: 2023,
    engineType: 'Petrol'
});

console.log(bmw.manufacturingYear);

bmw.drive()

console.log(bmw.constructor)

This is very confusing even to a experienced developer. So JavaScript came up with Class. and the same can be approached using the below code

class Vehicle{
  constructor(options){
    this.manufacturingYear = options.manufacturingYear;
  }
  
  drive() {
    console.log('Vroom Vroom');
  }
}

class Car extends Vehicle{
  constructor(options){
    super(options);
    this.engineType = options.engineType;
  }
  
  start() {
    console.log(this.engineType + 'starting');
  }
}

const bmw = new Car({
    manufacturingYear: 2023,
    engineType: 'Petrol'
});

console.log(bmw.manufacturingYear);

bmw.drive()