ES6-Class Keyword

JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript’s existing prototype-based inheritance.

JavaScript is not a class-based language. In fact, it uses functions to create objects and link objects together by prototypal inheritance. Classes are just a thin mirage over regular functions and prototypal inheritance. The goal of the Class keyword is to re-use code. Class is like a blueprint that can be used to create multiple instances.

Class declaration

To declare a class, use the class keyword with the name of the class.

class Person{
constructor(name='Anonymous'){
this.name=name;
}
getGreeting(){
return `Hi I am ${this.name}`;
}}
const me = new Person('Mike Ross');   //Creating a new instance
console.log(me);                      // Person {name:'Mike Ross'}
console.log(me.getGreeting());       //Hi I am Mike Ross
const other= new Person();
console.log(other);                      //Person {name:'Anonymous'}
console.log(other.getGreeting());
  //Hi I am Anonymous

The Construction function is the function that gets called when we make a new instance and it gets called with all the arguments passed in. It is a special method that exists in a class and is used to initialize new objects.

Comparing with ES-5 Function Constructor Syntax:

function Person(name='Anonymous'){
this.name=name;
}
Person.prototype.getGreeting = function(){
return `Hi I am ${this.name}.`;
}
const me = new Person('Mike Ross');  //Creating a new instance
console.log(me);                     // Person {name:'Mike Ross'}
console.log(me.getGreeting());       //Hi I am Mike Ross.

On comparing the two we get to know that:

getGreeting(method) exists on the prototype explicitly but now it appears inside of a Class but the functionality is exactly the same.

Points to note about the Function constructor:

  • the constructor function is called with the new keyword

  • the constructor function controls the setting of data on the objects that will be created

  • “inherited” methods are placed on the constructor function’s prototype object

The way to define or create a new instance is the same in both cases.

Subclasses with ES6

super and extends keywords

class Person{
constructor(name='Anonymous'){
this.name=name;
}
getGreeting(){
return `Hi I am ${this.name}.`;
}}
//Subclass
class Student extends Person {
constructor(name, major){
super(name);  
this.major=major;
}
hasMajor(){
return !!this.major;
}
getDescription(){                   //Over-riding function
let description=super.getDescription();
if(this.hasMajor()){
description += `My major is ${this.major} .`;
}}}
const me = new Student('Mike Ross', 'Computer Science');
console.log(me);           //Student {name: "Mike Ross",
                                     major: "Computer Science"}
console.log(me.hasMajor());//true
console.log(me.getDescription());
//Hi I am Mike Ross.My major is Computer science.

super is a special keyword that refers to the Parent Class(Person) so that the default values are set up for subclass when calling it.

super can also be used to access all the Parent method (getDescription in this case)

extends allow us to get all the behavior of the parent class without needing to copy-paste code. The Student class gets all the behavior/blueprints of its parent class i.e Person through inheritance.

Benefits of classes

  • There’s a lot less code that you need to write to create a function

  • Inside the class definition, you can clearly specify the constructor function.

  • All code that’s needed for the class is contained in the class declaration. Instead of having the constructor function in one place, then adding methods to the prototype one-by-one, you can do everything all at once!

© 2021 Asim Ansari | Software Engineer at Simpplr