Javascript’s __proto__ vs prototype

Javascript is confusing. And among all the mysterious stuff, the difference between __proto__ and prototype stands out uniquely. It confuses most programmers who try to learn the object-oriented aspect of the language.

This article is for developers who have a basic understanding of object-oriented programming in general and exploring Javascript’s way of doing this.

Let’s start afresh with the following points:

1. Everything in Javascript is an object (except the primitive types)
2. Every object has a prototype
3. The default prototype of an object is Object.prototype
4. When a property is accessed on an object, the object looks at its own properties. If not found then it looks at its prototype’s properties. And it continues to do so unless either the property is found or it reached the Object.prototype. If the property is not found in the Object.prototype, undefined is returned.

If these are unclear to you, you may check out the MDN documentation for prototypes in Javascript.

1. What is __proto__ and what is its purpose?

To better understand this let’s continue with some examples.

person is a simple object that has three properties name, age and, gender.

Upon using console.dir on that person object we can see that it has a __proto__property.

The __proto__ property is a default property added to every object. This property points to the prototype of the object.

The default prototype of every object is Object.prototype. Therefore, the __proto__ property of the person object points to the Object.prototype.

If whatever I said is actually true then the illustration would look something like that.

Let’s verify what I’m claiming is actually true.

As you can see that the __proto__ property of the person object is indeed equal toObject.prototype.

Now, I want to create another object teacher. That object would have the same properties and values as the person object. Only one additional property — subject — will be added.

By default, the teacher’s __proto__ property would point to the Object.prototype object.

And the illustration would look something like this.

Can you see the problem here?teacher and person has three common properties with the same values. It would be really nice if we could somehow inherit teacher’s properties from person.

To do that let’s first abandon the current teacher object. And create a new one with only the subject property because we will inherit other properties from the person object.

Now, the structure looks something like that.

Notice that the new teacher’s __proto__ property still points to theObject.prototype object. To inherit, we have to maketeacher’s __proto__ property point toperson.

We can do the using the Object.setPrototypeOf function.

The illustration, now, looks something like this.

teacher’s __proto__ property points to the person object and person’s __proto__ property points to Object.prototype object.

Let’s verify whether teacher’s __proto__ property actually points to the person object.

We’ve successfully inherited the properties of the person object through prototype chaining.

Now, we can access the properties from the teacher object. If the property is found in the object itself it would return that. Otherwise, it would ask its prototype and so on.

One important thing to notice is that the __proto__ is just a reference to the prototype and not an instantiation. Hence, if we modify any property in the prototype object, it would affect the child objects as well.

See how modifying person’s property changes the __proto__ property of the teacher as well.

Therefore, it could be safely said that the term prototypal inheritance is not entirely accurate. It is more of a delegation than actual inheritance!

In nutshell, the __proto__ property of every object points to the prototype of the object.

2. What is prototype property in constructor functions and what is its purpose?

Let’s begin with examples as it helps to understand the topic more smoothly.

What if we had to create a bunch of person objects with the same properties, but different values?

We can easily create a constructor to meet the purpose.

A constructor is a special type of function. It is like a blueprint of an object. You can use the constructor to create objects with the same properties but different values.

The constructor would look something like this.

As functions are also objects, it would have a __proto__ property that would point to the prototype of the function.

Functions are special types of objects. Function’s __proto__ property points toFunction.prototype as opposed to Object.prototype.

However, apart from the __proto__ property, constructor functions also have a prototype property.

Notice the __proto__ property nested inside the prototype property of thePersonconstructor.

It turns out that the nested __proto__ property actually points toObject.prototype .

The diagram looks something like that,

And let’s verify whether the diagram is true.

But what is the purpose of the prototype property in the Person constructor?

It turns out that whenever we instantiate an object with the Person constructor, the constructor makes the __proto__ property of the new object point to the same object as its prototype property.

This might not make a lot of sense.

Let’s see some real examples.

Let’s instantiate a new object named mySelf using the Person constructor.

And notice how the constructor makes the __proto__ property of mySelf point to Person.prototype .

The final illustration looks something like this,

Therefore, the sole purpose of the prorotype property of a constructor function is to initialize the __proto__ property of the objects that get instantiated using that constructor.

Conclusion

Hopefully, I didn’t confuse you more than you already were. And now you understand a little bit more about the difference between __proto__ and prototype .

It’s undoubtedly a bad design that confuses a lot of programmers. But as you know, Javascript is more of a revolved language than a well-designed one. So, we have to make peace with it sooner or later.

I am glad that you have finished reading the article. I would really appreciate a couple of words on your thought. ✏️