The Hidden Truths in ES6 Classes
The Hidden Truths in ES6 Classes
For those who have a great passion for OOP paradigm, ES6 is a huge win as classes have finally been included.
Join the DZone community and get the full member experience.
Join For FreeDeploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.
For many developers, especially those coming from traditional languages such as Java, C#, PHP, etc. and those who have a great passion for OOP paradigm, ES6 is a huge win as the most wanted feature in Javascript finally has finally been included: classes.
Old Wine in a New Bottle
We declare a class in ES6 like below:
class A {
}
When we inspect type of A
typeof A
It will print out function. If we type above code in Chrome’s console, it will print
function class A {
}
A is just a special function in that it isn’t callable (until this point in time). Trying to invoke A() will generate ReferenceError:
Uncaught ReferenceError: A is not defined
Apparently, nothing new is shipped with ES6.
Just Convenient Syntax
Let’s see what the Javascript engine will do when it deals with a class:
class Rectangle {
constructor(width, height) {
this.height= height;
this.width = width;
}
getArea() {
return this.height* this.width;
}
toString() {
return `Rectangle: width(${this.width}), height(${this.height})`;
}
static create(height, width) {
return new Rectangle(height, width);
}
}
class Square extends Rectangle {
constructor(height) {
super(height, height);
}
toString() {
return `Square: length(${this.height})`;
}
}
const s1 = new Square(10);
Below is what the Javascript engine will see:
Apparently, nothing new with ES6 classes.
It’s just syntactic sugar on top of prototype based inheritance.
An Apple vs. an Orange
Let’s see what are the differences between ES6 class and OOP language class.
Concept
In traditional OOP languages, class is a blueprint or template from which instances are created.
In Javascript, class is just a constructor function.
Behavior
In traditional languages, when creating instances, methods, properties, etc. are copied down from parent classes to child classes and then from the class to new instances.
While in Javascript, there is no such a copy from classes to classes and from classes to instances. There are just links between objects.
Features
Classes are at the heart of OOP languages. It’s no strange that OOP languages support a lot of features such as: class variable scopes, multiple inheritances, static block, nested class..
In Javascript, class is just syntactic sugar on top of prototype inheritance. Features support in class is limited. Currently, only the following are supported:
- Constructor
- Instance method
- Static method
Note that class property is not supported.
So, comparing Javascript classes to OOP language classes is like comparing an apple to an orange.
Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.
Published at DZone with permission of Can Ho , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}