An explanation of the relationship between the two concepts.

Andrew Chung
Sep 23 · 3 min read

So you’re wondering, what’s with all that __proto__ and prototype nonsense in JavaScript?

Aren’t they exactly the same thing? Let’s find out.

An explanation of prototype

Apple recently released its new iPhone, the iPhone 11. That phone has certain qualities — for example, Face ID and 4K video. Every iPhone 11 that is produced must have those exact same features.

Now, let’s assume that there’s a constructor function that produces a new iPhone 11 every time it’s called. In order to properly build an iPhone 11, a prototype — a model of an iPhone 11 to refer to — is needed. This prototype or model ensures that every iPhone has Face ID, that every iPhone can take 4K video. Thus, the iPhone constructor must know and have access to the prototype that it must build. This is the constructor’s prototype property.

function iPhone() {}; // constructor// a method for recognizing faces
iPhone.prototype.faceID = function() { ... };
// a method for taking 4k video
iPhone.prototype.video = function() { ... };
let newPhone = new iPhone(); // an iPhone 11

So far so good, right? Let’s get into __proto__ next.

The relationship between __proto__ and prototype

I’ve now made a new iPhone 11, and saved it in a variable called newPhone. The contents of newPhone will look something like this:

The contents of a new iPhone instance.

So it seems like this new iPhone 11 comes with FaceID and video! In fact, you can execute newPhone.faceID() or newPhone.video() and see that these methods work fine. However, why are these features stored in an object called __proto__, and not stored directly as properties of newPhone?

__proto__ is an object in every class instance that points to the prototype it was created from. Here, newPhone.__proto__ is a reference to iPhone.prototype, and thus holds the exact same contents as well. By having a __proto__ property identical to iPhone.prototype, newPhone is essentially saying, “Look, since I’m an iPhone 11, I have the exact same features as any other iPhone 11! I’ve got Face ID, 4K video, you name it.”

In reality, the only true difference between prototype and __proto__ is that the former is a property of a class constructor, while the latter is a property of a class instance. In other words, while iPhone.prototype provides a blueprint for building an iPhone, newPhone.__proto__ affirms that the iPhone has indeed been built according to that specific blueprint. But with regards to the properties and methods present in those two objects… well, they’re exactly the same.

Lastly, you might be wondering about the meaning of __proto__: Object in the last line. That’s there because newPhone.__proto__ is actually a JavaScript object, and JavaScript objects are also built according to a specific “blueprint”. In this example, newPhone.__proto__.__proto__ refers to Object.prototype, which is the prototype or blueprint that all JavaScript objects are based on. And that’s about it!

JavaScript in Plain English

Learn the web's most important programming language.

Andrew Chung

Written by

Aspiring developer from Seoul, South Korea.

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade