Javascript Class, Constructor, Inheritance and Static Method

What is class in Javascript

In 2015, javascript version ES6 was introduced with some new features like arrow function, let and const, classes etc. With classes you can implement OOP. In javascript, class is a template to create an object.

How to write class

First of all write class keyword followed by class name followed by curly braces. Inside curly braces, constructor is written first than other class methods are defined. Class name is usually started with capital letter.

class className{

    constructor(){

        body

    }

    firstMethod(){

        body

    }

    secondMethod(){

        body

    }

}

What is Constructor

• Constructor is called automatically when class object is created
• Its name must be "constructor"
• Inside constructor, object properties are initialized
• Javascript add a default constructor, if you do not write your own constructor

Class Method

Class method is same as object method. You can write a class method to get parameters, to access object properties and return something.

In below example, we will write a class Student. Its constructor will initialize two properties, first name and second name. 

class Student{

    constructor(name,rollNo){

        this.name = name

        this.rollNo = rollNo

    }

}

var std = new Student('John',123)

Now we will write a class method that will return full name of student as

class Student{

    constructor(fname,sname){

        this.fName = fname

        this.sName = sname

    }

    fullName(){

        return this.fName+' '+this.sName

    }

}

var std = new Student('John','Wick')

var fName = std.fullName()

console.log(fName)

Output: John Wick

Class Inheritance

Keyword extends is used to inherit one class from another class. In this way, the class inherits all the methods of other class.

When multiple objects have some common properties than a separate class is created having common properties. All others inherits from that class.

In below example, We have a general class Person having a method getName() that returns property name

class Person{

    constructor(name){

        this.name = name

    }

    getName(){

        return this.name

    }

}

Now class Student inherits from class Person using keyword extends. In Student constructor, its mandatory to call its parent class constructor using super(name). Student show method display name and roll no of student. You can see that name is get using parent class method getName().

class Student extends Person{

    constructor(name, rollNo){

        super(name)

        this.rollNo = rollNo

    }

    show(){

        console.log('Name: '+this.getName())

        console.log('Roll No: '+this.rollNo)

    }

}

Now create object of Student and call its method show() as

var std = new Student('John',123)

std.show()

Output: 

Name: John
Roll No: 123

Now create another class Teacher that inherits from Person class. Write show method in Teacher class, get name by calling parent class method getName() and salary from Teacher class property.

class Teacher extends Person{

    constructor(name, salary){

        super(name)

        this.salary = salary

    }

    show(){

        console.log('Name: '+this.getName())

        console.log('Salary: '+this.salary+'$')

    }

}

Now create object of class Teacher and call its method show as

var teacher = new Teacher('Vicky',10000)

teacher.show()

Output: 

Name: Vicky
Salary: 1000$

Class Static Method

You can write static method in class using static keyword. Static method is called without creating object of class. Just call class method using class name directly as below.

class Person{

   

    static show(){

        console.log('I am John')

    }

}

Person.show();

Output: I am John

You can pass parameter to class static method as

class Person{

    

    static show(name){

        console.log('I am '+name)

    }

}

Person.show('John');

Output: I am John