Prototypes in JavaScript!

When I started learning JavaScript I found understanding Prototypes and Prototypal Inheritance quite a lot confusing and intimidating! Even though you can write JavaScript code without having any knowledge of Prototypes in JavaScript, having a good understanding of prototypes is must since it helps you debug your code or helps you understand why a specific part of code isn’t working at times!

Prototypes is one of the most important pillars in JavaScript! In this article we will understand what are prototypes ,what are global objects , what is this __proto__ property and how inheritance works in JavaScript underneath the hood.

So lets get started without further ado,

When we create a function in JavaScript, JavaScript Engine creates two objects :-

1. The Function Object itself
2. The Prototype Object

For eg consider this,

Let say we create a function f1() as follows,

Then what JS Engine does is , it creates two objects as mentioned above,

The f1 function object itself and f1 function’s Prototype Object,

Now what’s this prototype that you can see inside this f1 Object?

Well, JS Engine creates a property on function Object that points to the function’s Prototype Object.

We can access the f1 object directly by doing this,

However if we want to access the f1’s prototype Object we can access it by using that prototype property,

Now suppose we create a new object from that f1 function

and if we access it , we can see that there is something called as __proto__

This __proto__ is property that JS Engine creates for every object ! Well ,this __proto__ property points to the Prototype Object of the function(In this case it will point to f1’s Prototype Object)

We can check whether f1’s prototype property and myobj’s prototype property point to the same Prototype Object or not, by doing this,

as we saw above , that we can access function’s prototype Object , in the similar way we can access the f1 Object itself by using a property called constructor. Constructor is a property on the Prototype Object that helps us to access the function itself.

Suppose if we want to know who created this object ‘myobj’ , then we what we need to do is, simply use that constructor property to know this,

Thus we get the f1 function !

We can also create a new object by using this constructor property,

This simply implies , create an object myobj2 by using the same function/constructor who created the object myobj.

Up until now we saw what is this prototype property, what is this __proto__ property and the constructor property , what all things do they point to and what are their uses!

However it is not recommended to use __proto__ property very often!

The Global Object

In JRE ,just as you have a global window object , in the similar way you also have a global functions. And one of those global functions is called Object. Name of the function is Object but the type is function .But since functions are Objects in JavaScript, this is also considered as an Object . I know this sounds a bit confusing!😬

The Prototype Object!

Lets create a function person and a new p1 object from it,

Looking at the Person’s prototype object, makes us wonder ,who created this Person’s prototype object ?

Well it was automatically created by ‘new Object’! Person’s prototype Object itself has __proto__ property that points to the Global Object’s Prototype.

Suppose if we try to access any property on p1 object , JS Engine will first try to find it inside p1. If it does not find it there , it will go up the prototype chain by using the __proto__ property of p1 .

p1.__proto__

If it even does not find it there also , it will again go one step up the prototype chain.

p1.__proto__.__proto__

And if it does not find it there as well, then it will return undefined!

Now there’s one question , is this prototype chain never ending? Does base object’s prototype have a __proto__ property as well?

Well no, it does have __proto__ property ,but it points to null. Lets check this,

Prototypal Inheritance

Inheritance in JS is totally different than other programming languages. Its unlike classical inheritance.

Suppose if we have a Person function (as discussed above) .And now we also have a Teacher function .Teacher will have all the properties of Person.

Initially Person’s Prototype as well as Teacher’s prototype(__proto__ ) property both are pointing towards base Object’s Prototype.

In this case , Teacher and person are not related. Teacher will not posses any property of Person. Well to overcome this, we can make the Teacher’s prototype object(__proto__ property) to point towards Person’s prototype object.

Now teacher can access all properties of person .

This was all about Prototypes and Prototypal Inheritance!

Hope this article helps!

Happy learning!😀