Inheritance in Javascript

I inherit all your wealth

JavaScript is not a object orient language at it’s heart. It’s a object based language with functional programming concepts. You can read about some of those in my other articles.

Magic of Function returning Function in javascript

AWebDeveloper

In JavaScript you can pass around functions like any other variable. Callbacks are nothing but variables passed as function arguments. You really don’t need inheritance in such a world. But a lot of languages are object oriented and we have many dev from such language who see a value in it.

Inheritance in JavaScript is Prototypal and not as you expect from object oriented languages. OOP style of inheritance is referred to as Classical Inheritance. In Classical the execution is bottom up, lower most child to the top most parent. In prototypal inheritance there is a prototypal chain where every one attaches their method and variables. It’s main advantage is you can inherit from multiple parent. Based on who attaches when to chain the value of variable or functions change.

Lets create a car. We will use the ES3 class like constructor method to achieve this.

var Car = function (name) {
  this.name= name;
}
var myCar = new Car('aston');
console.log(myCar.name); //prints aston

Now lets create a electric car that extends car.

var ElectricCar = function () {
}
ElectricCar.prototype = new Car();
var myElectricCar = new ElectricCar('tesla');
console.log(myElectricCar.name); //prints undefined

Why undefined. You might think that my constructor has no super method and doesn't take name as a parameter. Sadly No. There is no such concept. But you can do this.

var ElectricCar = function () {
}
ElectricCar.prototype = new Car('tesla');
var myElectricCar = new ElectricCar();
console.log(myElectricCar.name); //prints tesla

It’s like saying i have a Electric Car but its also a Car. It does the job but its not the cleanest. You can also do the below. Its bit more cleaner and encapsulated

var ElectricCar = function (name) {
  this.__proto__ = new Car(name);
}
var myElectricCar = new ElectricCar('tesla');
console.log(myElectricCar.name); //prints tesla

Lets see a bit about prototypal chain.

var Car = function (name) {
  this.name= name;
}
Car.prototype.type = "petrol";
var ElectricCar = function () {
}
ElectricCar.prototype.type = "ElectricHybrid"
ElectricCar.prototype = new Car('tesla');
var myElectricCar = new ElectricCar();
console.log(myElectricCar.type); //prints petrol

What???? Why did it print petrol.

This is how the chain works when Car got added to the ElectricCar chain it replaced type with it’s type. One alternative is to use the literal form and use ES5’s new function called Object.create. This is like adding Car first and then all the properties of the ElectricCar

var Car = {
  name:'',
  type: 'Petrol'
};
var ElectricCar = Object.create(Car);
ElectricCar.type = "Hybrid"
var myElectricCar = Object.create(ElectricCar);
console.log(myElectricCar.type); //prints Hybrid

This is finally lot better in ES6. ES6 still does Prototypal inheritance but has a java/c++ style syntax.

class Car {
  constructor(name) {
    this.type = "Petrol";
    this.name = name;
  }
}
class ElectricCar extends Car {
  constructor(name) {
    super(name);
    this.type = "Hybrid";
  }
}
var myElectricCar = new ElectricCar('tesla');
console.log(myElectricCar.type); //prints Hybrid

Want us to write more

Hit claps if you liked it. It will encourage us to write more. Follow, for more posts on JavaScript. Comment below if you have any other suggestions or inputs. And its time to discuss your inheritance with your father.