Select Page

Javascript Prototype Explained -Advanced JavaScript

Written by Asbar Ali


In this article, we’re going to understand javaScript Prototype from the basic level to advanced concepts. So this would help for the both freshers and experienced javaScript developers.

01. What is JavaScript prototype?

Almost every JavaScript object has an internal property that is linked to another object. That linked property is referred to as the prototype

 

Why do we say “Almost every” in the above definition?  The default object in JavaScript does not have a prototype and it is possible to create an object with a null prototype. It means, it is not linked to another object.

 

Javascript prototype inheritance – Objects inherit properties and methods from its prototype ancestry.

 

What is “inherit” in the above definition? Inherits means that the object has access to those properties & methods and it can use them. They don’t belong on the object and they are not a part of the object. They are part of the object’s prototype but the object is accessible to them

 

What is “prototype ancestry” in the above definition? The Object has a prototype but that prototype object can also have a prototype and so on. We call it the prototype chain. So the object can use any properties and methods that are on that prototype chain. That’s why I used prototype ancestry to the above definition.

 

Automatically assigned to any objects – Prototype is automatically assigned to any object when it’s created. All except primitive types are objects in javascript. So we’re talking about arrays, functions, javascript Objects and all.

 

Define an Object ProtoType –  You can define an object’s prototype and that’s where the power prototype comes in.


02. Understand prototype with diagrams

We have an Employee object in the following diagram and it is identified by Emp1. It has some properties and values such as userNameage,address, fullAddress and a default property. This default property is a link to another object.

 

If follow the link of the default property assigned to Emp1 object, we have another object that can have properties and methods assigned to it as well. It can also have the link to another object. We call this as the protoType Chain. You can continue the prototype chain until you get to the topmost object.

What if we refer Emp1.country ? JavaScript engine first look on the Emp1 object that we defined and it would look for the property of countryIf it can’t find, it would follow the prototype link to next object that is linked and look for the property of country at there. It it doesn’t find it, continues up the prototype chain. If it gets to the uppermost object in the prototype chain and not able to find the property that is referred to, then it returns undefined.


03. Understand prototype with Examples

 

Example 1

Now I have Emp1 object there’s nothing in it and I didn’t put any properties or methods as a part of that object. however, I can access a toString() method of the object.

var Emp1 = {};

Emp1.toString();
It displays the following information to the console

Result –

Why I am able to access toString() method?  Because toString() method is part of the default prototype that assigned when the object is created. Let’s take a look at the expanded object to result in the console.
In here, you can see the number of methods that are associated with the default object that is assigned to the prototype. One of those is toString() and that is why we could able to enter toString().

Example 2

What happens if we create our own toString() method in Emp1 object I create and set the custom function to the toString attribute in Emp1 object as follow,

var Emp1 = {};

Emp1.toString = ()=> {console.log('My own function')}
Result –

Explanation – JavaScript engine find the one that is on the object to execute and it doesn’t execute the one that is on the prototype. If we look at the current expanded Emp1 object, it looks like this.


Example 3

As mentioned at the beginning of the article, anything without primitive data types are objects in JavaScript. So an array is an object. In this example, we’re going to call the method in a bit of an upper prototype. So first create an array and see the all methods in it.

var emp1 = ["Asbar", "Sacheen", "Suhail", "Tharindu", "Thanushan"]

emp1.toString();

Result – 

'Asbar,Sacheen,Suhail,Tharindu,Thanushan' 

 

 

Now let see where toString() method is located in the prototype chain,

 

I hope you understand the usage of javaScript prototype and if you have any questions or queries, let us know in the comment section below. Happy coding! 🙂

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Related Articles

Binary Search Algorithm with Example | Data structures

Binary Search Algorithm with Example | Data structuresG, 0 Comments Binary search will take less time than the linear search. The one pre-request of binary search- Array should be sorted. If the data is not sorted in the array, you cannot apply a binary...

React Interview Questions with Answers- (2020)

React Interview Questions with Answers- (2020)G, 0 Comments  Follow me on Medium In this article, we're going to talk all react interview questions with answers and will be useful for the people who get readying or for the interviews or want to improve the...

Stay Up to Date With The Latest News & Updates

Join Our Newsletter

Follow Us