Thursday, February 20, 2020

Classes In JavaScript

Classes In JavaScript

ECMAScript introduced classes in 2015. Javascript classes are a syntactical wrapper around the existing prototype-based inheritance. The keyword class is used to create a class that is followed by the name of the class.

Class Constructor

The method constructor() is used to initialize the object of the class. The class syntax has two components, class declarations and class expressions. The method constructor() is automatically invoked when the object is initialized. If a class does not have a constructor method, JavaScript will automatically add an invisible and empty constructor method. A constructor is a special method in itself.

for example


class Rectangle //class declaration

{//class body starts

    constructor(ht,wd)//Constructor

            {
                this.ht=ht;//class properties

                this.wd=wd;

            }
}//class body ends

The Body of the Class


The body of a class is the part that is in curly brackets {}. The class member methods and constructors are defined in the body part of the class. The body of the class is executed in strict mode in JavaScript. There can be only one "constructor" in a class otherwise syntax error will be thrown if the class is having more than one constructor. We can use "this" and "super" keywords within a constructor to refer to the current object and superclass respectively.


Class Methods or Prototype Methods

We can add methods to the JavaScript class as we can do in other object-oriented programming languages. A method is a piece of code defined within the class to implement some logic. There can be several methods in a class. A method is kind of a function within a class.


class Rectangle //class declaration

{//class body starts

    constructor(ht,wd)//Constructor

            {
                this.ht=ht;//class properties

                this.wd=wd;

            }
           calculateArea()//Method
           {
               document.write('The area of this reactangle is '+(this.ht*this.wd));
            }
}//class body ends

The "static" methods


A class can also contain static methods. The static methods are class methods, means we do not need to create the objects of the class to use static methods. Static methods can be invoked without initializing their class and cannot be called through a class instance. Generally, the static methods used to create utility functions for an application.


class Add //class declaration

{//class body starts
    constructor(a,b)//Constructor
            {
                this.a=a;//class properties
                this.b=b;

              }

           static sum(num1,num2)//Method
           {
               return num1 + num2;
            }
}//class body ends

console.log(Add.sum(5,7));


Try yourself




Inheritance


Inheritance is a feature of object-oriented programming languages. Inheritance can be applied with the "extends" keyword. All the properties and methods of parent class are inherited into the child class by the inheritance.

class A     //class declaration

{               //class body starts

    constructor(field)//Constructor

            {
                this.field=field;//class properties
              }
           method()//Methods
           {
              //do-or-return somthing
            }


}//class body ends
class B  extends A
{
     //Class body
}a=new A();//super class object
b=new B();//sub class object 

Try Yourself