YDKJS — Objects and Prototypes — Part3

Welcome to part-3 of the series. You can find the part-2 here.

This series is all from the learnings of Kyle Simpson and also from the amazing youtube Javascript series by Kaushik Kothagul from Javabrains, which is also influenced by You don’t know JS.

Let’s start from where we left in the earlier part. Consider the below code of using constructor functions in JS. The problem in this is that, whenever we create a new variable with new keyword. The inflateTires function is created for each of them.

Image for post
Image for post
The problem with new keyword in constructors

Introduction to Prototype

In JavaScript as you know everything is a Object. So whenever we create an function, there is a one object which is created. but actually there is another object which is created which is known as the prototype object.

Consider the below example. In the below example foo have the property which is able to access the its prototype. The properties also known as prototype and it is written as foo.prototype

Image for post
Image for post
The prototype example

Let consider the below sample to understand it more better. Whenever a function is created there are two object one is the function object another is the prototype object. Now to access the Prototype object we have a property on the function object also known as “prototype”.

Image for post
Image for post
The prototype confusion

When we call function foo with the new keyword interesting things happens. It create something known as __proto__. This is created by the JavaScript engine for every function call using the new keyword.

Image for post
Image for post
calling foo with new keywords

Let’s look in the below diagram, to find what is this weird looking __proto__ property . Actually whenever we call a function with the new keyword a new object is created which have this __proto__ property, and it points to the object of the function. If you call the function again with the new keyword it will again create a similar thing.

Image for post
Image for post
The __proto__ property

Let’s see an example to learn the things which you have seen in the diagram. We have created an Empty function foo. Then created a newFooObj using the new keyword on the function. Now using the property prototype created a test variable which contains some string. Now we can access the test variable using the newFooObj object __proto__ property.

Image for post
Image for post
foo.prototype === newFooObj.__proto__

Now there is another benefit of the __proto__ property. We are first checking whether our newFooObj have a hello variable. It doesn’t have one so we create one using the __proto__ property. Now the __proto__ property have a hello variable which is obvious. But we are also able to access it directly using newFooObj.hello. This happens because when the JavaScript compiler runs, and it first tries to find hello variable in newFooObj. If it is not able to find it checks the prototype object, where it is able to find it.

Image for post
Image for post
The benefit of Prototype

This concludes the part 3 of the series. You can find the final part here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store