ES5 Pseudoclassical Class and ES6/ES7 Class

Some notes on the differences in the classes…

JavaScript classes are different from Java classes…

JavaScript class is nothing like the class in the traditional OO languages like Java. The Java class is like a template where it acts like a blueprint to allow its structure and behaviour to be inherited to the subclass. JavaScript Prototypal inheritance can achieve the same result with the prototypal chain method lookup delegation. A JavaScript class is essentially a function itself, which has all the methods attached to the prototype property. All the instances produced will access the methods by looking up the prototypal chain to the prototype property.

http://stackoverflow.com/questions/2800964/benefits-of-prototypal-inheritance-over-classical

This is a typical ES5 pseudoclassical class

Property prototypal inheritance: Parent.call(this, argsToParent);

Function prototypal inheritance:
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

// parent class
var Person = function (name){
this.name = name;
}
Person.prototype.toString = function() {
return `${this.name} is me`;
}
// subclass
var Employee = function (name, title){
Person.call(this, name);
this.title = title;
}
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.toString = function (){
return `${this.title} ${Person.prototype.toString.call(this)}`
}
Employee.prototype.constructor = 'Employee';
// invocation
const jane = new Employee('Jane', 'CEO');
console.log(jane.toString()); // CEO Jane is me

This is a ES6 Class

ES6 uses the familiar class syntax for prototypal inheritance. This syntactical sugar makes subclassing a lot easier to write with less code.

// parent class
class Person {
constructor(name) {
this.name = name;
}
toString(){
return `${this.name} is me`;
}
}
// subclass
class Employee extends Person {
constructor(name, title) {
super(name);
this.title = title;
}
toString(){
return `${this.title} $super(name).toString()`;
}
}

reference: http://exploringjs.com/es6/ch_classes.html#details-of-subclassing

Apart from the syntactical difference in the class representation, ES6 also comes with other goodies~ One of them is the introduction of the arrow function, ()=>{} and this is finally bound to the context in the scope of the surrounding code!

‘this’ in ES5 function and ES6 arrow function

In ES5, the this keyword is not bound to the right context if a function is passed through callbacks. There are 2 ways to get around that in ES5. 1. Pass an anonymous function and preserve the this context using closure. 2. Use .bind() to bind the right context.

In ES6, the arrow function preserves the this context in the lexical scoping. i.e. this is bound to the context defined between the scope. There is no need to create additional closure or .bind() to preserve the right context!

So?

Arrow function can be used in places like ES7 property initializer syntax and significantly reduces code size! Take React as an example: In order to use class methods as event handlers, we need to .bind(this) in the constructor. It means we need to add N lines of .bind(this) in the constructor for N event handlers in the class.

On the other hand, with class property in ES7, we can effectively shorten the number of lines needed in a class.

The reduction of 1 line of code may not have seem much in my minimal examples. The following references would be able to show the power of class properties and arrow functions!

https://medium.com/@jahans3/writing-clean-and-concise-react-components-by-making-full-use-of-es6-7-features-and-the-container-4ba0473b7b01

Like what you read? Give Sherry Hsu a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.