Classes

JavaScript has been a prototypal based language using object prototypes to create object inheritance and code reuse.

The new ES6 Class adds a new syntax on top of traditional prototypes.

The class syntax has two components: class expressions and class declarations.

Class declarations

One way to define a class is using a class declaration. To declare a class, you use the class keyword with the name of the class ("Person" here).

class Person{
    constructor(_firstName, _lastName) {
        this._firstName = _firstName;
        this._lastName = _lastName;
    }
}

Class expressions

A class expression is another way to define a class. Class expressions can be named or unnamed. The name given to a named class expression is local to the class's body.

//Unnamed
var Person = class {
    constructor(_firstName, _lastName) {
        this._firstName = _firstName;
        this._lastName = _lastName;
    }
}
//named
var Person = class Person{
    constructor(_firstName, _lastName) {
        this._firstName = _firstName;
        this._lastName = _lastName;
    }
}

Constructor

The constructor method is a special method for creating and initializing an object created with a class.

There can only be one special method with the name "constructor" in a class.

A SyntaxError will be thrown if the class contains more than one occurrence of a constructor method.

A constructor can use the super keyword to call the constructor of a parent class.

class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    fullName() {
        return this.firstName+' '+this.lastName;
    }
}
let p = new Person('java', 'script');
console.log(p.fullName()); // java script

Hoisting

An important difference between function declarations and class declarations is that function declarations are hoisted and class declarations are not. You first need to declare your class and then access it, otherwise code like the following will throw a ReferenceError:

var p = new Person(); // ReferenceError
class Person {}

Static methods

The static keyword defines a static method for a class. Static methods are called without instantiating their class and are also not callable when the class is instantiated.

Static methods are often used to create utility functions for an application.

class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    fullName() {
        return this.firstName+' '+this.lastName;
    }
    static MarksFirstLast(...marks) {
        let sorted = marks.sort(function(a, b){return b-a});
        return 'First '+sorted[0]+' '+'Last '+sorted[marks.length-1];
    }
}
console.log(Person.MarksFirstLast(7, 4, 8, 2, 9)); // First 9 Last 2

Inheritance

The extends keyword is used in class declarations or class expressions to create a class as a child of another class.

ES6 introduced two keywords extends and super to inherit properties and methods from parent class.

The extends keyword is used in class declarations or class expressions to create a class as a child of another class.

The super keyword is used to call functions on an object's parent.

class Person{
    constructor(_firstName, _lastName) {
        this._firstName = _firstName;
        this._lastName = _lastName;
    }
    fullName() {
        return (this._firstName+' '+this._lastName).toUpperCase();
    }
}
class student extends Person {
    constructor(_firstName, _lastName, _grade) {
        super(_firstName, _lastName);
        this._grade = _grade;
    }
    studentDetail() {
        return 'FirstName:'+this._firstName+' LastName:'+this._lastName+' Grade:'+this._grade;
    }
}

var s = new student('firstname', 'lastname', '3rd');
//Calling parent function
console.log(s.fullName()); // FIRSTNAME LASTNAME
console.log(s.studentDetail()); // FirstName:firstname LastName:lastname Grade:3rd