JavaScript

What is a Prototype in JavaScript

JavaScript is a dynamic and prototype based language hence prototypes are one of the most important concepts of JavaScript. Let’s first discuss why we need prototypes.

Why do we need prototypes?

As mentioned earlier, JavaScript is a dynamic language which means we can add properties to an object anytime we want. Let us go through an example to explain this:

function Player() {
   this.name = 'Hazard';
   this.club = 'Chelsea';
}

var player1 = new Player();
player1.age = 30;
alert(player1.age);

var player2 = new Player();
alert(player2.age);

In this Example, we gave another property to the object player. However, the first object i-e player1 will have age property but not the second object i-e player2. The reason for this is that the age property is only defined for the player1 object.

We can see the player2 object shows undefined in the below output of the above example:

Now that we know what problem we are facing, the question arises: what is the solution? The Solution to this problem is “prototype”.

Solution

Prototypes are a built-in feature of JavaScript. Each time you create a JavaScript function, JavaScript automatically adds a prototype to that function. We can say that a prototype is an object that allows you to add new properties to an existing object. In short, Prototypes contain a base class of all objects, helping us achieve inheritance.

We can attach additional properties to the prototype object which will then be shared across all the instances.

Now we will use prototype property in the above example to solve the problem of sharing age property to all the objects i-e player1 and player2.

function Player() {
   this.name = 'Hazard';
   this.club = 'Chelsea';
}
Player.prototype.age=30;

var player1 = new Player();
alert(player1.age);

var player2 = new Player();
alert(player2.age);

We will see that both players’ ages will be 30 now. The output is shown below:

To put simply, the prototype property of JavaScript helps us in adding new properties to object constructors as shown in the above example.

Prototype Property of an object

Every object that is initiated using the literal syntax or initiated using the constructor syntax using the new keyword, includes __proto__ property. This will point to the prototype object which created this object.

If you wish to see the prototype property of an object, we can see it in the debugging developer tool. In the below example we will implement it and will view it in the console window.

Example

function Player() {
   this.name = 'Hazard';
   this.club = 'Chelsea';
}

var playerObject=new Player();

//console window

console.log(Player.prototype);
console.log(playerObject.prototype);
console.log(playerObject.__proto__);
console.log(typeof Player);
console.log();

In this example we can see that the function prototype property is accessed using the function name which is Player.prototype.

We can also see in this example that the prototype property is not exposed to the object, we can only access it using the “__proto__”.

Object’s Prototype

In the previous example, we saw that the object prototype property is undefined which means it is invisible. We can use the Object.getPrototypeOf(obj) method instead of the one we used i-e “__proto__”. By this it won’t be undefined and we will be able to access the prototype object.

function Player() {
   this.name = 'Hazard';
   this.club = 'Chelsea';
}

var playerObject=new Player();

Player.prototype.selected= function(){
   alert("Selected for today's team");
}


var player1 = new Player();
var checkingProto= Object.getPrototypeOf(player1);
//this will return player1 prototype object
alert(checkingProto.constructor);
//this will return player1 function that is selected

Conclusion

In this article we mainly discussed the basic concept of Prototypes in JavaScript. We dug a little deeper and  discussed what is a prototype in JavaScript. We also discussed a problem and gave the solution using the prototype. Apart from this we discussed finding object properties and methods in JavaScript using prototypes. All of this was demonstrated with the help of examples to develop better understanding of the concept.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.