Hello Readers, In this Blog we will understand what are prototypes & prototypal inheritance.

First we will understand Classical Inheritance vs Prototypal Inheritance.

So Classical Inheritance is followed by Java, C#, .NET and other languages.

In JavaScript we follow Prototypal Inheritance.

Classical inheritance is limited to classes inheriting from other classes. However prototypal inheritance includes not only prototypes inheriting from other prototypes but also objects inheriting from prototypes. Don't worry, we will understand prototype inheritance with some examples. But first we will understand what are Prototypes.

Prototypes

Have you ever wondered, when we create an array and in console, when we check 'arr' and put a dot we get access to so many properties? So how does this array get access to so many built in functions, methods, properties? Which we haven't define it... 😯

When we create an array along with its element we can notice that there is one more property called as [[Prototype]] and when you expand it more then you will find that there are many properties, list of all built-in methods and functions.

Some of these properties we may have used before like array.push, array.pop, array.map etc . The above scenario is not just limited to arrays but applicable to all objects and functions as well.

So, whenever you create any object, JavaScript engine attaches hidden object to your original object. So If you want to access the hidden object, we can simply put arr.__proto__

Prototype Chain

So what is Prototype Chain?

The chain of objects linked together by the prototypes is called the prototype chain.

We will understand this concept with some examples.

from above example we understood that arr.__proto__ is Array Prototype

Now if we try to find the prototype of Array Prototype, then we get it as Object Prototype.

And Lastly, if we again dig down to find what is prototype of Object Prototype then we find it as null.

In the above example, the Arrays prototype is Object, and Object's prototype is null, which indicates the end of the chain.

array=> Array Prototype => Object Prototype => Null

Similarly, if we try to find prototypes for a Function,

So, when we check the function prototype, we get Function prototype and then its prototype is Object prototype and Object prototype is null.

fn()=> Function Prototype => Object Prototype => Null

Everything in Javascript is nothing but an Object. Whether you make an array, or a function it is down the prototype chain ends up being an Object.

Prototypal Inheritance

Prototypical inheritance refers to the ability to access object properties from another object. Prototypical inheritance allows us to reuse the properties or methods from one JavaScript object to another. We can then essentially tell our JS code to inherit properties from a prototype.

In above example, we updated the prototype of obj2 and set it as obj1. So by this we can inherit the properties & methods of obj1 into obj2.

So in the above example when we called obj2.getIntro(), it will first try to find all the properties in obj2, if it gets the values then it will print it. if it doesn't finds required property then it will search in obj1 and use the property inside obj1.

In above example city is not present in obj2 but it has inherited value from obj1 that is "Mumbai".

Replit link for above example

Similarly in above example when we comment the college property in obj2, Firstly JavaScript will try to find name in obj2 which it gets as Aditya, then it will find college value in obj2, if it doesn't get it then it will go to obj1 and use the value as we have inherited the properties of obj1 into obj2.

So, here we get college as VIT and city as Mumbai which is inherited from obj1.

So, If you are trying to access a property or method, JavaScript first finds it in the current object. If it is not present then using the prototype chain it looks up in the parent object. This continues till the property or method is found or null is reached.

So this is how Prototypal Inheritance works in JavaScript. 🎉

So, I hope that you have got basic understanding of what are Prototypes, Prototype Chain & Prototype Inheritance.

If you have any suggestions the please let me know in the comments.

Thanks for Reading! 🙂