Dive into Javascript deeper with an explanation of Object.Prototype and classes

What is a prototype?

Almost every object is linked to another object. That linked object is called the prototype. 

It’s a native property, meaning we don't have to set it ourselves. 

It allows Javascript to introduce Inheritance as well. 

‍

This way you can get an object of class Person with the name property e.g. Kacper.

Then, we can refer to the constructor using the prototype property built into each class. This way, we can generate a new object of the Person class with the name property Mark.

Prototype in a class

We can refer to the class constructor using a property built into each instance object - __proto__. This is the same as the prototype in classes. 🧐

‍

Prototype &  __proto__

In the prototype of the Person class there is the Person class constructor.

And now let’s check kacper.__proto__

‍

We can see that __proto__ and the prototype of the class both contain the Person class constructor. That's because __proto__  and prototype are actually the same thing but are named differently depending where you access them from - on a class or an object level.

Below is a graph with the connections between prototype, __proto__, class, and object explained. 

If we add something to kacper.__proto__ then all other objects in the class will have it ( in their __proto__ )!

‍

‍

Now, when we go into kacper.__proto__ we’ll see:

‍

‍

and when we go into  pawel.__proto__ or mark.__proto__ , we’ll see: 

‍

‍

As you can notice, it’s only visible in the prototype of the class! 

Whereas in the body of the class we see only the name property, and no age property, which means we can create methods that can be secretly called by objects. 

That’s how we’ll secretly call the tellSecret method!

‍

‍

However, according to the specification, we shouldn't use it this way, I just wanted to show how it's all interconnected! 

You can also get to kacper.__proto__ using

or to set a prototype for an object

Remember that using this in code spoils the optimization of the application because operating on prototypes is VERY slow.

``` obj.__proto__ = … ``` effects affect any piece of code that references any property of an object whose ```[[Prototype]]``` has been changed.

If you want to keep the highest level of performance you should avoid this operation.

Good luck & thanks for your attention,

Kacper

‍

‍