JavaScript Prototype and Prototype Chain explained.
In this article, I’m trying to explain some of the core concepts
in the JavaScript related to the Prototype and Prototype Chain.
Before deep dive into those concepts let’s see what is the
requirement of having Prototypes in JavaScript.
Why we need Prototype
Let’s look at the following example where you need to create a
person object in your JavaScript program.
let person = {};
person.name = 'Leo';
person.age = 20;person.eat = function () {
console.log(`${this.name} is eating.`)
}person.sleep = function () {
console.log(`${this.name} is sleeping.`)
Then think of a scenario where you might need more than one person
in your program, what would you do in that case? You would create
a separate function which will generate a Person object for you.
Isn’t it?
Something like this??
function Person(name, age) {
let person = {};
person.name = name;
person.age = age; person.eat = function () {
console.log(`${this.name} is eating.`)
} person.sleep = function () {
console.log(`${this.name} is sleeping.`)
} return person;
}// Invoke Person function to create persons.
const person1 = Person('Mike', 23);
const person2 = Person('Alis', 34);
That is great right? But is this the correct way to do
that?
No, Think of another scenario where you building a more complex
application and there you would need millions of such Person
objects, in that case at each time we create a Person object it
will recreate eat and sleep methods in the memory. Which eats your
memory.
Instead of doing something like above, what if we can create those
methods once and reuse them as references inside the Person
function. In that way, we will create those methods only once in
the memory. See the example below.
const PersonMethods = {
eat = function () {
console.log(`${this.name} is eating.`)
},
sleep = function () {
console.log(`${this.name} is sleeping.`)
}function Person(name, age) {
let person = {};
person.name = name;
person.age = age;
person.eat = PersonMethods.eat;
person.sleep = PersonMethods.sleep; return person;
According to the above example, we have created a Person methods
object once in the memory and at each time when we are creating a
new Person, we are giving them the reference to that PersonMethods
object’s methods. That way we have resolved the memory issue we
had.
Wow, that is great right? Are we done?
No, Again this method also has some drawbacks. Can you guess?
Were you able to guess the issue with this code? If not don’t
worry let me explain the downside of this code. Let’s assume that
later we decided to add a new method to the Person, what would you
do? Then we have to add that method to the PersonMethods and then
we have to modify the Person function to reference that newly
introduced method as follows.
const PersonMethods = {
eat = function () {
console.log(`${this.name} is eating.`)
},
sleep = function () {
console.log(`${this.name} is sleeping.`)
},
walk = function () {
console.log(`${this.name} is walking.`)
},
}function Person(name, age) {
let person = {};
person.name = name;
person.age = age;
person.eat = PersonMethods.eat;
person.sleep = PersonMethods.sleep;
person.walk = PersonMethods.walk; return person;
Hmm, that is not a major issue, but isn’t it great to have a
common place where we can do changes like above and reflect those
changes on all the created instances? Without having to modify all
the created instances. Instead of doing something like above. That
is where the Prototype comes into the picture in the JavaScript.
Prototype
Prototype is basically a property of a JavaScript function. At
each time we create a function in JavaScript, JavaScript engine
adds an extra property called prototype to the created function.
This prototype property is an object (called as prototype object)
has a constructor property by default. This constructorproperty
points back(i.e blue arrow) to the function object on which
the prototype object is a property. Following diagram illustrates
what I described above.
prototype property points to the Prototype object of the
function(i.e green arrow). We can access the function’s prototype
property using the syntax functionName.prototype. and from the
Prototype object of a function, we can again access the function
object back by functionName.prototype.constructor. If you are
still confused let’s write few codes to understand this.
Creating objects using constructor functions
Hope now you have a slight idea about what prototype is, before
dig into more on this topic let’s first understand one small
concept in JavaScript. That is constructor functions. Please read
my article on Constructor functions in order to have a solid idea
about what is a constructor function and what it does.
Now, Let’s write a construction function which
accepts name and age as function parameters as follows and logs
out its prototype object:
function Person(name, age) {
this.name = name;
this.age = age;
console.log(Person.prototype)
You will see a console output as follows :
As you can see in the above when we console
log Person.prototype it has logged out the created function’s
prototype object. And there we can see two
attributes constructor and __proto__ properties. (For the moment
forget about this __proto__ property in the function’s prototype
object. ) Then let’s logs out the Person.prototype.construcor
See, it looks like the function we defined a few second ago. As I
described above when we create a function, it creates another
object called prototype object which has a constructor property
which points back to the function object and the function itself
has a property called prototype which points to the function’s
prototype object. Let’s see whether those points are correct. If
those statements are correct then the identity operator (===) in
JavaScript should be
evaluated true for Person.prototype.constructor ===
Person and Person.prototype ===
Person.prototype.constructor.prototype cases.
As we expected those gives true for the above cases. Which means
whatever the things I described above are correct. I hope now you
have a proper understanding of what is the prototype in
JavaScript.
Now let’s see how we can use above mentioned prototype object to
solve the issue we had earlier. Let’s see what happens if we put
all our custom functions into the prototype object instead of
creating a separate object for those and assign them inside the
function definition as follows :
function Person(name, age) {
this.name = name;
this.age = age;
}Person.prototype.eat = function () {
console.log(`${this.name} is eating.`)
}Person.prototype.sleep = function () {
console.log(`${this.name} is sleeping.`)
}Person.prototype.walk =function () {
console.log(`${this.name} is walking.`)
Then let’s create a new Person called Bob and logs out the Bob as
follows :
Ohh no!!, there are no methods available under the
names eat, age and walk. Isn’t it?
Well, that is not the case, remember what we learned earlier and
what we did? We added those methods to the function’s prototype
object. And as you can see there is something interesting has
happened.
There is another property in the Person instance Bob (i.e
__proto__), but we did not add that property to the object we
created right? So what is it? Basically, this __property__ is
the getterand setter to the function's prototype object. Okay I
know this sounds confusing, let me explain this in simple terms.
Let’s look at what we did to our constructor function :
• First, we defined our constructor function Person.
• Then we added methods to its prototype object.
When we add functions or properties (you also can add
properties) to the any function’s prototype object it will
be available to its instances through the prototype
object.
Then let’s look at what happened when we creating the instance
from the Person constructor function.
• We created an object called Bob with two attributes using the
Person function with the new keyword.
• Then behind the scene from the JavaScript engine, it adds a new
property called __proto__ to that instance which is a
getter/setter for the above Function’s prototype object.
• (Hope you read my article on Constructor Functions in
JavaScript if you are not familiar with JavaScript constructor
functions.)
That is what happened from the above code we wrote. And let me
illustrate those in a simple diagram which lets you understand
those very easily.
So basically if the __prototype__ property in the Bob is point to
the Prototype object of the Person constructor function object,
then it should have those methods we defined. To see that let’s
expand that __prototype__ property in the Bob.
If all the things we discussed are correct then prototype property
(__proto__) in the Person instance Bob pointing to the same object
of the Person construction function’s prototype object. We can
evaluate using the identity operator as we did before.
Yes, we were correct. Object instance prototype property (i.e
__proto__) and Function’s prototype property pointing to the same
object. Now let’s create another instance of Person and let’s see
whether that instance’s pointing to the same prototype object.
As we can see in the expanded console output, it looks like new
instance’s prototype property also pointing to the same object. If
that is true then identity operator evaluation for Alex.__proto__
=== Bob.__proto__ and Person.prototype === Bob.__proto__ should be
evaluated to true. Let’s see.
Yes, it is Alex’s prototype property (i.e __proto__)also pointing
to the same Object as the Alex prototype property (i.e __proto__).
Which gives a relationship as depicted in the following diagram.
So as a summary we can point out what we learned.
• When we create a function, JavaSctipt engine automatically
creates a Prototype object for that function and
add prototype property to Function object which can be used to
access that Prototype object, as well as it
adds constructor property which points back to the Function
object.
• Then when we create instances from the Function object, then
again JavaScript engine adds add getter/setter (i.e
__proto__) to object’s instance which can be used to access the
same prototype object of the Function object.
• This Prototype object of the constructor function is shared
among all the objects created using the constructor function.
We can add methods and properties into this prototype object
and then those automatically will be available to its
constructor function ’s instances.
NOTE: This __proto__ usually called it as dunder proto in
the JavaScript world.
Hope you have a solid understanding of what is known as Prototype
in JavaScript. Next will have a look at the Prototype chain.
Prototype Chain
By now you should have a solid understanding of what is
Prototype in JavaScript, next will try to understand what
is Prototype Chain. In order to understand that let’s do a small
exercise. Let’s create a simple object and then alert the object.
Alert output as follows:
Okay, how on earth we get this [object Object] from the alert as
an output? appleis an empty object and it does not have any
properties which hold such data or function which can generate
something like that. It seems like something has happened behind
the scene. Let’s dig this bit further. First, let’s console out
the apple and see whether we can find anything there.
Oh, there is nothing in it, but if we expand the apple object we
can see __proto__property in it. Okay cool, that’s interesting.
This gives us a hint that this is pointing to a some function’s
prototype object. Let’s console log that and see whether we can
find anything from that.
Ohh, There are lots of functions on it. But where this is coming
from? and Whose prototype object is this? And there is
a toString() function on it. To my sense, it feels like that
output we saw from alert might have generated from this method.
Let’s see.
Yes, it is!!!! Finally, we found out how we go that output from
the alert. That is when we alerting that apple object, the
JavaScript engine has called this toStringmethod in some object’s
prototype object’s function in order to generate this output. Then
we have another unresolved mystery. That is, whose prototype
object is this?
In JavaScript, there are set of built-in Objects such
as Object, Array, Date, Function etc and each of those objects
will have respective prototype objects attached to it.
In the above case, it was the Object construction function which
invoked to create the apple instance. That is because const apple
= {} is the same as const apple = new Object() where Object is the
built-in constructor function.
And that function has Object.prototype, which has all the methods
we saw earlier. If what we found out true then we can use the
identity operator (===) to evaluate the facts that we are familiar
with.
If Object constructor function was invoked when creating the apple
instance then Object.prototype and apple.__proto__ should point to
the same prototype object.
Yeah, we were correct. Those were pointing to the same prototype
object. And also following will also be obviously true if that
prototype object belongs to the Object constructor function
Object.
Let me draw a simple relationship diagram to show what we
discussed :
Also please note that unlike other function’s prototype object,
Object function constructor’s prototype object does not have
a __proto__ property inside it. If we console log its value, it
should be null.
To understand the reason for this; first, we need to have an
understanding of object lookup behavior in JavaScript. When we
look for a property of an object (including function
declarations), the JavaScript engine will first check the object
itself for the existence of that property.
If not found, it’ll go to the object’s prototype object and check
that object. If found, it’ll use that property. If that is not
found in that object then it will lookup on that prototype
object’s prototype object, If found it there, it’ll use that
property or else lookup continues until it finds an object with
a __proto__ property equal to null.
That is the JavaScript built-in object’s prototype object. Here it
has set to null in order to terminate the prototype lookup chain.
This is called the prototype chain. This is why we
see undefined for the values which are not defined in the any of
the prototype type chain objects.
Please Note [extracted from MDB Web Docs:
Following the ECMAScript standard, the
notation someObject.[[Prototype]]is used to designate the
prototype of someObject. Since ECMAScript 2015,
the [[Prototype]]is accessed using the
accessors Object.getPrototypeOf() and Object.setPrototypeO
f().
This is equivalent to the JavaScript
property __proto__which is non-standard but de-facto
implemented by many browsers.
It should not be confused with the func.prototype property
of functions, which instead specifies the [[Prototype]] to
be assigned to all instances of objects created by the
given function when used as a constructor.
The Object.prototype property represents
the Object prototype object.
Let me put all of these into a simple relationship diagram which
lets up to grasp this easily.
Also, other built-in Objects such as Array, Date, Function etc
also has an associated prototype and those have all additional
methods which are specific to that type.
For an instane, if we create a simple number array [1, 2, 3], the
default new Array() constructor function get invoked internally,
from the behind the scene by the JavaScript engine.
And also JavaScript will add a __proto__ pointer to newly created
array instance which points to the Array. prototype
(i.e Array.prototype) object which has all the methods relevant to
the Array operations such as concat, reduce, map, forEachetc.
And also if we log the newly created array instance prototype
object’s prototype (i.e numArray.__proto__.__proto__) we can see
that it has a pointer to another object, which should be
the Object.prototype.
Yes, it seems correct, as we did before let’s evaluate few
expressions with identity operator to check whether what we
learned is correct.
By specification, all built-in Objects in JavaScript has
prototype Object associated with it and it points to the
Object.prototype object. That is why many people
say “Everything in JavaScrtipt is inheriting from Object.”
There are few other things which I want to point out related to
the prototype chain in JavaScript, that is method override.
As we learned so far every object we create inherits its methods
and properties from its prototype objects chain. And also we
should know that we can override those methods as the way we want.
Let’s look at the following console output.
when we are logging out the number array that we created we can
see a nicely printed values array. How is this possible? That is
because Array.prototypeobject has a custom toString() method
implementation to do this.
So when we are console.log this array from the JavaScript engine,
behind the scene calls that method. But as we
learned Object.prototype object also has a toString()method.
But for the created numArray instance the closes method it fined
when looking up the toString( ) function along the prototype chain
it will be the Array.prototype object’s toString() method. Hence
engine will use that method to print out the elements in the array
to console output.
All the other built-in objects also work the same way. Such as
Functions, Date etc.
Prototype with Primitives
Next thing I want to highlight is the prototype
with Primitives. It is the most intricate thing happens when it
comes to the prototypes. As we know those are not objects in the
JavaScript, But when we try to access their properties JavaScript
engine will automatically create a temporary wrapper object
creates using built-in constructor function such as String,
Number, Boolean, Symbol(ES6)except for the null and undefined.
Those will provide additional methods to use with primitives.
Those objects created under the hood by the JavaScript engine and
will not be visible to us. Many JavaScript engines such as V8,
SpiderMonkey has their own optimizations to that as well.
Values null and undefined have no object wrappers. Those will
stand apart as special values in JavaScript when it comes to the
primitives.
Since they do not have object wrappers, simply they will not have
additional methods and properties for them and also they don’t
have any associated prototype object too.
So far we have learned quite a lot about
JavaScript Prototype and Prototype Chain , Now let’s put all of
our understandings into one big diagram to recap everything we
learned.
Hope I have covered everything related to the JavaScript Prototype
and Prototype Chain. If you have any questions related to these
concepts, feel free to ask anything in the comment section.
Cheers!!
