Understanding Prototypes in JavaScript

Aakash Garg
Jul 20, 2020 · 5 min read

I am sure you must have been through the basics of JavaScript.By now, you might know that arrays, functions, objects, dates are all objects.JavaScript is a prototype-based language which means that inheritance works by something called prototypes. Each and every object in JS has a prototype property.

OK, now enough if the fuss about prototypes 😅 , let’s understand it.

The usual function constructor approach

var Person = function(name,yearOfBirth,job) {
this.name = name;
this.yearOfBirth = yearOfBirth;
this.job = job;
this.calcAge = function(){
console.log(2020 - this.yearOfBirth)
}
}

Now, we’ll create two objects Adam and Eve using the Person constructor function:

var Adam = new Person('Adam', 1998, 'teacher');
var Eve = new Person('Eve', 1993, 'painter');

The problem with the above approach is that upon executing the code JS will create two copies each of the properties and methods for the two objects.It isn’t efficient to have two instances of the function calcAge() as storing separate instances of functions for each object ends up wasting memory.Now that’s where prototypes come in.

Prototypes

Considering the same example if the object Adam wants to inherit a method or a property from the Person object we have to add that method or property to the Person’s prototype property.What is really important to note here is that the Person’s prototype is not the prototype of the Person itself but of all instances that are created through the Person blueprint.So, in this example the Person’s prototype property is the prototype of Adam.

So,the modified Person constructor is as:

var Person = function(name,yearOfBirth,job) {
this.name = name;
this.yearOfBirth = yearOfBirth;
this.job = job;
}
Person.prototype.calcAge = function(){
console.log(2020 - this.yearOfBirth)
}

So now when the calcAge() method is called on both the Adam and Eve objects:

Adam.calcAge(); //22
Eve.calcAge(); //27

Now you can observe that while the method calcAge() is not directly in the Person object but we can still access it because it is in the prototype property of the Person function constructor.

Properties to an object can also be added through the function constructor:

Person.prototype.lastName = 'Wallace';

which can be accessed as:

Adam.lastName; // Wallace
Eve.lastName; // Wallace

Let’s open up the Adam,Eve and Person.prototype in Chrome console:

Notice how the Adam’s,Eve’s __proto__ property and Person.prototype looks the same.Let’s check if they are infact the same or not:

Person.prototype === Adam.__proto__ //true
Adam.__proto__ === Eve.__proto__ //true

Above statement proves that the Adam’s and Eve’s __proto__ properties point to Person constructor function’s prototype object.

Prototype Chaining

Sounds confusing right? Let’s consider our original example again:

What we already know is that Adam is the instance of Person constructor.But that’s not all because the Person object itself is the instance of an even bigger constructor which is the Object object.Sounds craze right? but that’s how it works.

Each and every object that we create is an instance of the Object constructor that has a bunch of methods in its prototype property.

As you might be guessing right now the Person object can inherit those methods and call them plus the Adam object also inherits these methods and can also use them.Let’s validate this in the console by inspecting the Adam object

If we look into the prototype of Adam we notice that there is also a __proto__ object attached to it,this is the prototype property of the Object constructor which contains bunch of methods associated to the prototype property of the Object function constructor.That explains the whole prototype chain.

As we discussed we have access to those methods of Object constructor and can be used on the Adam object.

Adam.hasOwnProperty('job') // true
Adam.hasOwnProperty('lastName') // false
//because hasOwnProperty() looks for only own properties and we inherited lastName from the prototype,it's not really Adam's own property
Adam instanceof Person // true

So, that’s all for our example but before concluding let’s take a look at arrays in the context of prototype chaining

We’ll define an array and take a look at it in the console

Upon expanding it we notice how the length property which you might remember is used to calculate length of the array and it’s always stored right here in the array instance and that’s why we can use it so easily.It get’s even better as we see the prototype of this array __proto__ which of course is the Array function constructor that’s built right into JS and allows us to build arrays and here in it’s prototype property we can see all of the methods we can use with the arrays like pop(), push(), slice() etc.So, now you exactly know how you are able to call these methods on arrays, because of the prototype chain

That’s how useful inheritance really is!

Happy Coding!! 😇

The Startup

Get smarter at building your thing. Join The Startup’s +787K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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