Javascript: Is “ES-6 Class” a lie? 🤔
We all know that Javascript is awesome. But also it is weird. When we compare some concepts, In javascript those are useless just like “Infinity Stones 💎 in Sacred Timeline 🪄”.
Okay! So in this story, I am going a talk about one of the strangest things in javascript called “Classes”.
Objects in Javascript
Javascript is not like other languages, It treats pretty much everything as an object. Let’s create a simple object and inspect it.
As you can see, We just created an object with a simple method. But when we inspect it, We can see some strange things are there. Especially the property __proto__.
What the hell is that? 🤨 Where does it come from? 🙄
Prototypes
Javascript is not a class-based object-oriented language. Instead, it’s a prototype-based language. This means Javascript uses a mechanism called Prototype to provide the inheritance between objects.
Let’s create an object using Prototypes.
Look at the image. This time we did not define a method tap() inside the object. Instead, We define it inside the __proto__ property. But still, we can call it in the usual way.
Basically, Prototypes are templates of an object which describe the properties and abilities of the object.
Why Prototypes?
OK. If the prototype does the same thing as the basic literal, Then why should we use the prototype?
Well, The answers are,
- Keep the object definitions in the centralized position.
- Share methods between objects via inheritance.
Centralized Position
See the above image. We created a “Dog” constructor method. Then prototyped a method “bark” which prints “Woaw, Woaw”. So when we called the method on both objects “jimmy” and “puppy”, It printed the message as we expected.
After we update the bark method to print “Meow, Meow”, We did not re-initialize objects from the ‘Dog’. But the method of both objects got updated automatically. Why is that?
Because Prototypes are keeping definitions in the common space and give access to its objects. So when we change the prototyped methods, It will affect the existing objects instantly. So even if we create 10000 objects, Those will not get any dedicated method. This behaviour saves memory in the run-time.
Inheritance
In the above image, You can see that we created Dog’s prototype object from the Animal’s prototype object. So now the Dog has all the power of the Animal. In other words Parent-Child behaviour.
If we inspect the puppy object, It will look like,
As you can see, The Dog has a __proto__ of Animal, And it has another __proto__. Inside the second __proto__ there is another __proto__ of Object.
This is how the prototypes are being inherited through the objects. This is called the “prototype chain”.
I hope, Now you got an idea about Prototypes. Let’s move to Classes.
🏃♀️️️️🏃♀️🏃♀️
Classes
The Class was introduced in ECMA Script 2015 aka ES6. Before talking further about classes, let’s have a hands-on.
I just created a simple class and its object. But still, it has property __proto__. It looks exactly the same as the object that we created using the prototype.
OK, One more test. 🧪
WTF! 😱😱😱😱 It looks exactly the same as prototyping.
That’s true. Classes are not giving anything new to javascript. It is just a syntactic sugar built on top of the existing prototyping mechanism. So There is no difference between Classes and Prototypes. Classes are just a modern syntax to do the exact same thing but it gives the look that javascript is more object-oriented.
Conclusion
When someone learns javascript with other language backgrounds, They really mess with Prototypes. Because they are much familiar with classes, interfaces and etc. So the Javascript introduced Classes to give familiar syntaxes. But it did not change any mechanism. It still uses prototyping.
You can take prototypes and classes like girls and girls with makeup.
Lol…. 😂😂
In other words, What javascript says is “Hey bruh, I don’t care whatever you do with Classes. But I still use the same sh💩t behind the scenes.”
