Hello World 🌏
To understand prototypes, we have to understand few key concepts.
lets consider following code snippet:
what do you think what will be printed in the console? Yes you are right
Krishna will be printed in the console.
Now consider this code snippet:
In the above code I am trying to console a key which is not present in the object. Can you guess what will be printed in the console?
Yes you guessed it right 😃, it will print
What if I tell that it is still possible to have a value corresponding to
weapon key? How ? Lets explore 🗺️ together …..
Consider following code snippet:
Hmmmm…. Things started getting interesting. Can you guess what will be logged in the console?
Yes, may be you guessed it right. In the console
Chakra will be logged. Now let’s understand how this magic happened?
In the above code we did something new. We have added a mysterious
__proto__ key. This is the JS special way which we can use to instruct JS engine to where to lookup for a key if it not exists in an object.
Let’s see another code snippet:
The use of
__proto__ is not limited to one object. By using it we can instruct JS engine to lookup for a key to n number of objects. And the object must be connected using
__proto__ key forming a chain. This process of visiting objects is known as
prototype chain. ( Note: Unlike. chain we wear, prototypes chains can’t be circular)
This can be understood by an analogy that Arjun knows Bheem, Bheem knows Nakul and Nakul knows Sahdev.
__proto__ can be considered as the creator of a an object.
Let’s explore some interesting behavior of __proto__.
Shadowing refers to a behavior when the __proto__ object and current object itself have same key. In this case, the priority is given to the object’s key instead of the __proto__ one.
And we can check if object owns a key by using
hasOwnProperty. hasOwnProperty does not look at the prototypes.
The Object Prototype
Consider following code snippet:
This object doesn’t have a prototype, right? Lets Console it.
obj.__proto__ is not
In JS every object has a __proto__ property which represent its creator.
1.This is the reason we can directly use .toString .hasOwnProperty along with other methods.
2. And this is the reason we have concept of Map introduced in JS(ES6). Because in JS there isn’t a data structure which we can use to simply store data in key value pare. Ofcourse we can set the __proto__ on an object to null but this isn’t a good way to acheive the functionality of a Map.
Till now we have had enough information about __proto__, now let us see what is prototype property in functions?
Suppose we have created mulptiple God objects and want to share a common method among all of them. In that case we have to manually apply the function to __proto__ object. Which does not look good when we have lots of objects.
Now, here comes
prototype to the rescue. Using
prototype property is a two step process.
- Instead of attaching function to
__proto__, attach it directly to function using
newkeyword to create the object.
To conclude, a function’s
prototype specifies the
__proto__ of the objects created by calling that function with a
And in short, If someone asks what is prototype?
I hope this article made you to learn something new.
Happy Coding !!!