Class in JS

‘Class’ is nothing but a code template which is used to create objects. JS Class is introduced in ECMAScript 6 (ES6) release.

				
					
class User{
    constructor(name, id){
        this.name = name
        this.id = id
    }
}
let b = new User("Mayur", 822290)  // Instantiating class using 'new' keyword
console.log(b)

// Output :
User { name: 'Mayur', id: 822290 }

Creating methods in class

The way we create any function inside an object in the same fashion we create a  method inside a class. 

				
					
class Car{
    constructor(make, model){
        this.make = make
        this.model = model
    }

    start(){
        console.log("Car starts")
    }

    stop(){
        console.log("Car stops")
    }
}

let car1 = new Car("Honda", "CRV")
car1.start()
car1.stop()

//Output :
Car starts
Car stops

Method chaining

Method chaining comes into picture when you want to invoke methods of a class in a sequential manner using an object. In all such methods, we need to return instance of current object using ‘this’ keyword.

				
					class MouseActions{
    constructor(sourceX, sourceY, targetX, targetY){
        this.sourceX = sourceX
        this.sourceY = sourceY
        this.targetX = targetX
        this.targetY = targetY
    }

    clickAndHold(){
        console.log(`Object click and hold at ${this.sourceX},${this.sourceY}`)
        return this
    }

    dragAndDrop(){
        console.log(`Object drag and drop at ${this.targetX},${this.targetY}`)
        return this
    }

    release(){
        console.log("Mouse released")
        return this
    }
}

let anction1 = new MouseActions(1, 5, 3, 9)
anction1.clickAndHold().dragAndDrop().release()

// Output :
Object click and hold at 1,5
Object drag and drop at 3,9
Mouse released

Class Inheritance

A class inherits all the methods and member variables from parent class when it extends parent class. 

				
					class Employee{
    constructor(name, id, email){
        this.name = name
        this.id = id
        this.email = email
    }

    getName(){
        return this.name
    }

    getId(){        
        return this.id
    }
}

class Manager extends Employee{
    createReport(){
        console.log("Manager report created")
    }
}

let manager1 = new Manager("Mayur", 8222, "mayur@dezlearn.com")

manager1.createReport()
console.log(manager1.getName())
console.log(manager1.getId())

// Output :
Manager report created
Mayur
8222

Super Constructor

If child class needs to have an explicit constructor then we need to specify super constructor in child constructor in order to initialise parent class fields.

				
					class Employee{
    constructor(name, id, email){
        this.name = name
        this.id = id
        this.email = email
    }

    getName(){
        return this.name
    }

    getId(){        
        return this.id
    }
}

class Manager extends Employee{
    constructor(name, id, email, managerId){
        super(name, id, email)  // Invoking parent class constructor to initialise Employee fields
        this.managerId = managerId
    }
    createReport(){
        console.log("Manager report created")
    }
}

let manager1 = new Manager("Mayur", 8222, "mayur@dezlearn.com", 1299)

manager1.createReport()
console.log(manager1.getName())
console.log(manager1.getId())
console.log(manager1)

// Output :
Manager report created
Mayur
8222
Manager {
  name: 'Mayur',
  id: 8222,
  email: 'mayur@dezlearn.com',
  managerId: 1299
}

Assignments

  1. Create a class Student with constructor and pass fields such as name, age, school. Instantiate this class using ‘new’ keyword.
  2. Create a class names as ‘Animal’ with constructor and pass fields such as name, colour. Add methods eat() and getName(). Instantiate this class using ‘new’ keyword and invoke all methods.
  3. Create any class with constructor and required methods to demonstrate method chaining.
  4. Create a parent class named as ‘Bank’ with field rateOfInterest. Create child class named as ‘AxisBank’ with child class constructor and super constructor. Child class can have additional fields such as bankId, bankLocation and  method bankPolicy.