YDKJS — Objects and Prototypes — Part4

Welcome to part-4 of the series. You can find the part-3 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.

By the end of the part 3 of the series, we found out how we can declare a variable on the prototype object. And then an access to the variable , through every object created using the new keyword.

Let’s see the real benefit of it in this example. We create an Employee constructor function. And then have two employees.

We want to have a common function drinkCoffee, which is accessible to all the employees. Now one way of doing it is to add it to the constructor function of Employee. But if we do so, every new employee will have a new copy of that drinkCoffee function. We don’t want that as it is a wastage of a resource. So the better way is to add the function drinkCoffee, to the prototype object so that every new employee created using the new keyword will have access to it. And we have just one copy of the drinkCoffee function.

Image for post
Image for post
Real benefit of Prototype Object

We will see one additional property. Let’s check the foo example again. We have a foo function which have a prototype object. Then we created an object a with the new keyword, so now it have a __proto__ property which is the reference to the prototype object.
Now the Prototype object has a property called constructor which points back to the function.

Image for post
Image for post
The constructor property

It can be better explained with the below diagram.

Image for post
Image for post
The constructor diagram

The Prototype Object

Now the prototype object also have a __proto__ property, which points to a global object. Check the below diagram to understand more.

Image for post
Image for post
The Prototype Object

We will understand the same using the employee example. We have an Employee function, which have an emp object created using the new keyword. I have a variable prop which is “I am Employee”. So we can access it by emp.prop.

Let have a variable on the employees prototype using emp.__proto__.parentProp = “Parent of Employee”;
And now we can access it by emp.parentProp, because the JavaScript compiler do chaining and find it in the employees prototype.

Now let have a variable grandparentProp on the Global object prototype, which have the value “Grandparent of Everyone”. Now the emp object can access it by emp.grandparentProp

But it is actually grandparent of everyone, because any new object of other function as in the example foo also access to it. So this means we are having a global variable called grandparentProp, which is accessible everyone.

Image for post
Image for post
The Grand Parent

Inheritance in Javascript

We will look into inheritance using the classical employee manager problem. Let have a constructor function Employee, which takes the name parameter. It’s prototype to have a that getName function, which returns the name.

Then we have a constructor function Manager, which takes name and dept parameter. The manager prototype have a getDept function which returns the department.

As seen below we cannot do a mgr.getName() , because manager don’t have access to the that getName function.

Image for post
Image for post
The manager Problem.

Our current setup is like below. The Employee’s and Manager’s __proto__ both points to global Object’s Prototype.

Image for post
Image for post
The current setup

The manager problem of getName can be solved by placing the getname function on the Global object. But that is not the perfect solution, because then it will be accessible by all the other JavaScript functions in our scope.

We can solve this by having the Manager’s prototype pointing to the Employee’s prototype, which have the getName function.

Image for post
Image for post
The Solution.

Let’s do it by changing the manager prototype, to point to the employee prototype.

Image for post
Image for post
The Manager problem solved.

This concludes our YDKJS — Objects and Prototypes series. Hoping you enjoyed it. See you soon with other series.

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