How JavaScript Classes Work Under the Hood
For JavaScript Web Developers
When you use my referral link above 👆 to become a Medium member, all proceeds will be donated towards the construction of the Silicon Wat Campus for children in Ukraine and Cambodia ❤️
Introduction
The introduction of Classes to the JavaScript language substantially reduces the boilercode for creating Objects. Understandably, this can cause confusion for someone from a more “traditional” programming background. In JavaScript, classes are just syntactic sugar. Under the hood, they are still objects! Classes in the “classical” sense do not exist.
For example, a JavaScript class to create a Car now has this simple syntax:
To create a Tesla class that inherits from the Car class, the syntax is simply:
Unfortunately, such simplicity can conceal true understanding of the language. To understand what’s really happening under the hood, we will attempt to recreate the Tesla class that inherits from the Car class using only vanilla JavaScript.
If you’re looking for A Complete Frontend Developer Course for Beginners, check out this textbook written by Thon Ly exclusively for Medium:
To help you achieve full mastery, all three web languages (HTML, CSS, and JavaScript) are taught together in parallel within a musical context in order to deepen your understanding of their interrelationships in a fun and memorable way!
Constructor
The Constructor is used to set properties of the object at the moment of instantiation. Although similar to other languages, in JavaScript however, this is just a function.
The new keyword is used as a special operator that returns a new object from executing the constructor function while making its this variable point to that new object.
Methods
Class Methods are also just functions in JavaScript. Though it’s possible to define method functions inside the constructor, it’s inefficient as every new object created from the constructor will have redundant copies of the method definitions. It’s more efficient to define method functions on the prototype property of the constructor, which exists for this very reason.
The new keyword also sets the new object’s __proto__ property to this prototype property. This way, calling a method on the new object is still possible even though it’s not directly on the object. The nature of JavaScript is such that the engine will keep looking up the __proto__ chain, even if it has to go all the way up to the root Object itself.
Inheritance
Moreover, JavaScript takes advantage of this prototype chain to create Inheritance. To make the Tesla class inherit from the Car class, first we define the Tesla constructor, making sure to call the Car’s constructor with its this context pointing to Tesla’s. This is equivalent to calling super().
Then, using Object.create(), we pass in Car’s prototype to return a new object with its __proto__ property assigned to it, pointing the returned object to Tesla’s prototype. For clarity, we also point Tesla’s prototype constructor to itself because JavaScript does not do this automatically. Finally, we can define the charge() method on the prototype.
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
When you use my referral link above 👆 to become a Medium member, all proceeds will be donated towards the construction of the Silicon Wat Campus for children in Ukraine and Cambodia ❤️
Conclusion
As you can see, whenever we make a class definition in JavaScript, a lot is happening under the hood! Although syntactically identical to the class signature of other languages, JavaScript classes are intrinsically different. “Classes” are still objects under the hood, and any object can inherit properties from any other object. Inheritance in this prototypal fashion is a lot simpler, and therefore, a lot more elegant in this author’s opinion.
