What Exactly is a Class in Javascript?
How a class works under the hood — JavaScript
Why am I writing this?
In Javascript, Classes
don’t behave the same as in the other languages. As a result, we run into problems very often because we think classes
are the same as in the other languages.
Now that React is popular, we often run into such problems. As a result, React introduced functional components. So, understanding class
in JavaScript is very important. Today, we are going to understand what exactly is a class in JavaScript.
What to Expect?
- Object creation in JavaScript
- Factory functions
- Constructor functions
class
in JavaScript
Object Creation in JavaScript
The primary purpose of a class
is to create objects. There are 4 ways to create objects in JavaScript.
- Object literals
- Factory functions
- Constructor functions
- Classes
To understand class
in JavaScript, we have to know object creation using factory functions and constructor functions.
Factory Functions
var circleFunctions = {
draw:function(){
console.log("draw")
}
}
function createCircle(radius){
var newCircle = Object.create(circleFunctions);
newCircle.radius = radius;
return newCircle;
}
var circle = createCircle(5);
circle.draw() // draw
Object.create(obj)
returns an empty object with a link established to the object passed as the argument.
var newCircle = Object.create(circleFunctions)
The above line of code will establish a link between circleFunctions
and newCircle
. After the above line, we will have an empty object with a link established to circleFunctions
, assigned to newCircle
. The link is stored in __proto__
. i.e:
newCircle={__proto__:circleFunctions}
var circle = createCircle(5)
After the above line,
circle={
radius:5,
__proto__:circleFunctions
}
When we access the draw
method on the circle
object, Javascript will look for the draw
method inside the circle
object. obviously, there is no draw method defined inside circle
object. JavaScript doesn’t stop there. Rather, it looks for the draw
method inside the object assigned to the __proto__
property. There the JavaScript engine can find the draw
method. That’s how we get “draw”
as the output.
We call circleFunctions
as prototype
in JavaScript.
Constructor Functions
function Circle(radius){
this.radius = radius
}
Circle.prototype.draw=function(){
console.log("Draw")
}var circle = new Circle(5);
circle.draw()// Draw
We need a new
keyword to correctly invoke constructor functions. As a convention, we use the pascal naming method to name the constructor functions. Here, the new
keyword does several things for us. Basically, it does these 4 things:
- Create a new empty object i.e
{}
- Assign the newly created empty object to
this
keyword i.ethis = {}
- Establish a link between
this
andprototype
object i.ethis = {__proto__:Circle.prototype}
- return
this
If you want a deep understanding of the new
keyword, refer to the following article:
var circle = new Circle(5)
When we get to the above line, we will have an object with the property radius
and a link to Circle.prototype
i.e.,
circle = {
radius:5,
__proto__:Circle.prototype
}
Now, if we invoke the draw
method on circle
object, the JavaScript engine doesn’t find the draw
method inside circle
object. And it continues its search through the __proto__
and finds the draw method.
Class
class Circle{
constructor(radius){
this.radius = radius
}
draw(){
console.log(“Draw”)
}
}
var circle = new Circle(5);
circle.draw()//"Draw"
The draw
method in the class Circle
is actually assigned to Circle.prototype.draw
.
The above code segment and the following code segments are the same.
function Circle(radius){
this.radius = radius
}
Circle.prototype.draw=function(){
console.log("Draw")
}var circle = new Circle(5);
circle.draw()// Draw
The class
is just syntactical sugar for constructor functions. It makes our world a lot easier when it comes to sub-classing.
Conclusion
The class in JavaScript is nothing but syntactical sugar for constructor functions. It hides all the complexity and automates several things for us. That way, our code is way simpler and cleaner.
More content at plainenglish.io