Difference between prototype and __proto__

What's the difference?

So I've been wondering this myself and I(after a ton of reading) actually think that I(kind of?) grasp it now! Let's start off with a short definition I found in the MDN documentation about prototypes.

What does this really mean? Well let's try to simplify this abit. Let's create a class called Dog and we'll also create an object instance of this class which we will call charlie.

Let's log charlie to the console and open him up.

As you can see charlie has a __proto__ property attached to him. This __proto__ property is the prototype of charlie and it's the same object that is returned from Object.getPrototypeOf(charlie) which is reffered to in the MDN documentation text.

Alright so this tells us that __proto__ refers to the prototype of an object instance. But what is prototype in the MDN documentation referring to then? It's referring to the class(Dog) prototype(not the __proto__ property).

We can access it by going back to the console and typing out Dog.prototype.

Hmmmm... Doesn't this look really familiar? It should, because it's actually the same object as the __proto__ object attached to charlie.

What?! but if they are the same and there is no difference, Y U MAKE THIS POST!?!? 🤬 Well they are the same object but the difference lies in how they are used!

The prototype is used to create the __proto__ on the object instance.

WHILE

The __proto__ is the object that is used when looking up properties and methods on the prototype-chain.

Exploring this abit more

This is great for inheritance, we can just add properties or methods either inside a class or on the prototype of a class(they both end up on the __proto__ of each instance) and then all of the instances created from that class will have access to it aswell!

Let's try and show this abit more visually by adding two methods that will be accessible to charlie. We're going to add one inside the Dog class and one directly on the Dog.prototype object and see where they end up.

And this is where they end up, inside the prototype of charlie!

Adding the method to the Dog.prototype was mainly for educational purposes, you might have noticed that the method that we added directly onto the Dog.prototype has a darker shade of purple? That means that the method is enumerable so it's recommended to just add the method inside the class.

TL;DR __proto__ is the prototype on object instances that is used in the prototype-chain when accessing methods or properties.

prototype is the prototype on the constructor function and is used to create the __proto__.

Well that's it for this post, thank you for reading and I hope you liked it!