Prototypes in JavaScript
By: Rupesh Mishra
Tags: Prototype, JavaScript, Programming, Object Oriented

In the previous post, we had learned various ways of creating objects in JavaScript. One of the ways to create objects in JavaScript is using the constructor function.

Problem with creating objects with the constructor function:

Consider the constructor function below:

Let’s create objects person1 and person2 using the Human constructor function:

var person1 = new Human("Virat", "Kohli");

var person2 = new Human("Sachin", "Tendulkar");

On executing the above code, the JavaScript engine will create two copies of the constructor function, each for person1 and person2 .

i.e. every object created using the constructor function will have its own copy of properties and methods. It doesn’t make sense to have two instances of function fullName that do the same thing. Storing separate instances of function for each object results in wastage of memory. We will see as we move forward, how we can solve this issue.

Prototypes

When a function is created in JavaScript, the JavaScript engine adds a prototype property to the function. This prototype property is an object (called a prototype object) that has a constructor property by default. The constructor property points back to the function on which prototype object is a property. We can access the function’s prototype property using functionName.prototype .

As shown in the above image, Human constructor function has a prototype property that points to the prototype object. The prototype object has a constructor property that points back to the Human constructor function. Let’s see an example below:

console.log(person1);

To access the prototype property of the Human constructor function, use the below syntax:

console.log(Human.prototype)

As seen from the above image prototype property of the function is an object (prototype object) with two properties:

constructor property which points to Human function itself __proto__ property: We will discuss this while explaining inheritance in JavaScript

Creating an object using the constructor function

When an object is created in JavaScript, JavaScript engine adds a __proto__ property to the newly created object which is called dunder proto. dunder proto or __proto__ points to the prototype object of the constructor function.

As shown in the above image, the person1 object which is created using the Human constructor function has a dunder proto or __proto__ property which points to the prototype object of the constructor function.

//Create an object person1 using the Human constructor function

var person1 = new Human("Virat", "Kohli");

As can be seen from the above image, both person1’s dunder proto or __proto__ property and Human.prototype property is equal. Let’s check if they point at the same location using === operator

Human.prototype === person1.__proto__ //true

This shows that person1’s dunder proto property and Human.prototype are pointing to the same object.

Now, let’s create another object person2 using the Human constructor function

var person2 = new Human("Sachin", "Tendulkar");

console.log(person2);

Above console output shows that even person2’s dunder proto property is equal to the Human.prototype property and they point to the same object.

Human.prototype === person2.__proto__ //true person1.__proto__ === person2.__proto__ //true

Above statement proves that the person1’s and person2’s dunder proto properties point to Human constructor function’s prototype object.

The prototype object of the constructor function is shared among all the objects created using the constructor function.