Prototype-based inheritance in JavaScript

In this article let’s briefly talk about inheritance concept in JavaScript, how it’s different from other programming languages such as Java or C++. SO without further do let’s dive into it.

WHAT IS INHERITANCE AS A WHOLE?

“Inheritance is the process by which genetic information is passed on from parent to child.”

If that definition did not made any sense take a look at this example. Think about your self. You are a child of your parents right? So anything they own(Most of them 🤪) are also yours. Actually this is Inheritance. SO how this concept used in the programing world. If you are coming from any of these programming languages,

1. Java
2. C++
3. c#
4. Python
5. PHP

You already saw these inheritance in these programming languages. let’s take a simple example. Let’s say you are a member of your family. So you are a extended version of your family.

Inheritance example in Java

This is the normal inheritance most of the programmers are familiar with. This is called class-based inheritance. But in JavaScript world this is a bit different. In JavaScript we don’t have classes.

WAIT WHAT 😱?

Yes you saw it right. In JavaScript we don’t have classes. May be you have seen classes in java script but those are just Syntactic sugar(illusion of classes). NOT ACTUAL CLASSES. So remember this if you see class syntax in java script it’s not a class, and if you see a slimier implementation like we did in previous java example it’s just a Syntactic sugar. Let’s do that then we’ll talk about what actually happening behind the scenes.

Inheritance example in ES5 classes(Just an illusion)

The above inheritance example in java Script is just a Syntactic sugar. That means there are no any classes , actually behind the scenes what happening is Prototype-based inheritance.

SO WITHOUT CLASSES HOW DO WE CREATE OBJECTS OR BLUEPRINTS IN JAVASCRIPT?

In JavaScript there are 3 main ways to create objects.

1. Object Literals

const myObj= {
    name: 'shihara',
    age: 24
}; 

2. Constructor functions

function Person(name, age) {
   this.name = name;
   this.age = last;
}

3. Factory functions

function factoryFunction() {
   var obj = {
      name : "shihara",
      age : "23",
      someMethod: function() { /* some implementation */ }
   };
   return obj;
}

In the following examples I am going to use constructor function.

First let’s try to understand what is prototype and then we will implement the above inheritance example using prototype.

SO WHAT IS PROTOTYPE?

by default In JavaScript, every function and object has a property named prototype. So we can use this prototype property to attach methods to our instances.

function Familly(name, reputation) {
   this.name = name;
   this.reputation = reputation;
   this.profile = function(){
       console.log("This is  fammily version of the profile");
   }
   //this is not effient
}

The above way to attach method to our objects is not very efficient because each instances will have that method attached to it by default. This way it consumes a lot of resources. What if we can borrow that method from each instance and put it in somewhere later we can borrow when we need it? Take a look at the below example.

As you can see each and every instance is carrying the method profile();

So what we can do is we can use this prototype property to attach these methods to our instances and later we can borrow or ask when we need those methods. So let’s do that.

now each instance does not carrying that method. But the best part is we can still use it. What we have to do is call that method.

You don’t have to type __proto__ JavaScript engine is smart enough to know that you are trying to borrow an method from it’s prototype. We almost there. Let’s use this prototype with our inheritance example.

We have successfully achieved prototype based inheritance in JavaScript by linking these two prototype properties together. 🥳.