JavaScript - prototype VS __proto__

As the elders explain it – “Example is better than percept.”

Let’s get straight to creating a constructor function. I’m going to be using browser console to do so. (ctrl+shift+I  for Chrome and Firefox Browser)

function Person() {

    this.name = 'rana'

}

Now let’s create two objects ‘person1’ and ‘person2’.

let person1 = new Person()

let person2 = new Person()

I want to add a new property to the ‘person1’ object. I can definitely do it by writing the following code.

person1.age = 12

Now we have two properties in the ‘person1’ object.

 

What about ‘person2’ ? Does it have the same properties? Let’s see.

 

Nope! It doesn’t. But we want the properties (and methods) which are shared across all the objects created from Person() constructor function.

So we have to add properties to the Person() functions itself.

What if we want to add a new property to the constructor function using the following code the same way we add to an existing object?

Person.bloodgroup = 'B+'

Let’s take a look at the console.

The property wasn’t included really. Now what?

Well, we have to use the following code when we want to add new properties and methods to a constructor function at later stage.

Person.prototype.bloodgroup = 'B+'

Here the ‘prototype’ is a default , in other words ‘readymade’, object which comes with every constructor function. It can be used to add new properties and methods to the constructor function at later stage.

Now we’ll check if this property is really inserted. From browser console we’re going to check our objects.

 

 
As we can see, bloodgroup: “B+” was inserted into Person() which is shared across all the objects created from Person().

But one thing is noticeable. The newly created property was not included as a direct property of the objects. It is included as a property of ‘__proto__‘ object. And __ proto__ object has two other properties like ‘constructor’ and ‘__proto__’.

Let’s analyse the ‘__proto__ ‘ property. It has three properties.

First one contains the properties which is/are inserted into Person() using ‘prototype’ property. We’re going to explain it in detail in a second.

Second one contains the constructor function from which the __proto__  itself are created. So it is shown. Notice our objects, ‘person1’ and ‘person2’, are also created from this constructor. That means this__proto__‘s constructor indicates the constructor of the main objects too.

Third one is another ‘__proto__’. That means this is the ‘__proto__’ of the ‘__proto__’ something like

person1.__proto__.__proto__

If you click on this second ‘__proto__’, you’ll see it also has a constructor function as we see for the first ‘__proto__’. For the first __proto__, the constructor was Person() which we created at the very first stage. But for the second ‘__proto__’, it is Object(). Why it is so.

Keep it in mind that every object in JavaScript is based on a default constructor. And that is Object() constructor. ‘__ proto__’  itself is a JavaScript object as well. For the first ‘__proto__’, we created it from Person() constructor. But for the second one, we didn’t create any constructor for it. So it has its own default constructor Object().

Now again for the first property, look at the following image.

 

Person.prototype and person1.__proto__ are identical. That means the __proto__ of the person1 contians the same property (bloodgroup: “B+”) as the protoype of the Person() does. The properties we include into a constructor function using prototype are stored in the __proto__ of the objects created from that specific constructor function. 

The only difference is that prototype is associated with the constructor function 

Person.prototype

Let’s click on the constructor: f Person() or see the image below:


 

It has a ‘protoype’ property.

And __proto__ is associated with objects.

person1.__proto__

Look at the image below.

We can run another test like this one:

Person.prototype === person1.__proto__

It returns true. So it’s proven that  objectInstance.__proto__ refers to  objectConstructor.prototype.

So what did we learn from this article?

Let’s sum those up.

‘prototype’ is a property (which returns an object) with which we can add properties and methods to a constructor function at later stage. And it comes with constructor functions.

‘__ptoto__’ is a property (which returns an object) by which we can find the properties and methods created/inserted into the specific constructor function using ‘prototype’. And it comes with objects.

I believe this discussion makes sense to you. If it really does, please consider sharing, liking and commenting.