Starting ECMA 6, JavaScript has class keyword to create a class. I have written in detail about class here. There is no second question that class simplifies the way object is created, inheritance is implemented etc. JavaScript class has,
- Constructors
- Methods
- Extends etc.
Above features of a class helps to easily write Object Oriented JavaScript. As a developer, you do not need to know complexities of prototype chains, relationship between function constructor and its prototype object, and value of object’s __proto__ properties etc. to write effective Object Oriented JavaScript. So, class keyword is good addition to JavaScript language, however it is not gospel perfect. It has some problems, which may restrict you to write full-fledged Object Oriented JavaScript. In this post, I am going to share two such problems. Read along,
No Static Member Properties in class
A static member property is shared by all object instance of the class. JavaScript class does not allow creating it inside the class.
You cannot declare properties directly in the class. You can only have it through class’s constructors, and properties created inside constructor is local to the object instances and not shared by all of them.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class Car { | |
| var a = 9; // unexpected indentifier error | |
| } |
Above code will throw error “unexpected identifier”. There is a work around to create static property using the class prototype.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class Speaker { | |
| constructor(name) { | |
| Speaker.prototype.count++; | |
| this.name = name; | |
| } | |
| } | |
| Speaker.prototype.count = 0; |
Now on the instances of Speaker class, you can access static property count.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var a = new Speaker('dj'); | |
| var b = new Speaker('Jason'); | |
| console.log(a.count); // 2 | |
| console.log(b.count); // 2 | |
| console.log(a.count === b.count) // true |
Therefore, you are able to create a static property, but not without help of understanding of prototype. In my opinion class should have a way to create static property directly inside the class like a method or constructor.
Object instances does not copy definitions from class
To understand this problem, let us first revise Constructor Invocation Pattern and prototype chain. You have a function constructor Speaker.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function Speaker(name) { | |
| this.name = name; | |
| this.hello = function () { | |
| console.log('hey ' + this.name); | |
| } | |
| } |
Using new operator, you can create object instances,
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var a = new Speaker('dj'); | |
| a.hello(); // hey dj | |
| var b = new Speaker('Jason'); | |
| b.hello(); // hey Jason |
In this approach, a and b object instances both have their own copy of hello method. Now if you add a hello method to Speaker.prototype, still a and b object instances will access their own copy of hello method. Consider below code:
Dhananjay Kumar 
Leave a Reply