What are Classes in JavaScript? Using Classes in JavaScript

What are Classes in JavaScript? Using Classes in JavaScript

·

3 min read

Classes were introduced in JavaScript ECMA2015. Unlike the classes in Object-Oriented Mode, JavaScript classes are just special type of functions. But instead of using the "function" keyword we use the "class". It was introduced in JavaScript to make the syntax look like other object-oriented languages (java, python, c++).


Defining

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}

To declare a class, you use the class keyword with the name of the class (Rectangle here).

Constructor: This is a special method for initializing an instance of that class. So what that means is that whenever we create a new instance of the class, it will invoke the constructor.

Methods in a Class

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width; 
    }
    // Prototype method
    area() {
        return console.log(`The are is ${this.height*this.width}`); 
    }
    // Static method
    static display(rect){
        return console.log(`Height: ${rect.height} Width: ${rect.width}`); 
    }
}

rectangle = new Rectangle(5, 4);  // Instantiate the class
rectangle.area(); 
// The area is 20
Rectangle.display(rectangle1); 
// Height: 5 Width: 4
  • Prototype Method: area() is a prototype method.
  • Static method: display() is a static method.

Prototype Method

A prototype method is a method that is only accessible when you create an instance of the class. As you can see in the example above, you can see the prototype method(line 17) by referring to the object's method name followed by parentheses (any parameters would go inside the parentheses).

Static Method

A static method is something you can call without instantiating the class. Static method are defined on the class itself, and not on the object. That means you cannot call static method on the object(rectangle1), but on the class (Rectangle) as shown in line 19.

Inheritance

class Car {
    constructor(brand) {
        this.carname = brand; 
    }
    present() {
        return 'I have a ' + this.carname;  
    }
}

class Model extends Car {
    constructor(brand, mod) {
        super(brand); 
        this.model = mod; 
    }
    show() {
        return console.log(`${this.present()} , it is a ${this.model}`); 
    }
}

mycar = new Model("Ford", "Mustang"); 
mycar.show(); 
// I have a Ford, it is a Mustang

To create a class inheritance, use the extends keyword.

A class created with a class inheritance, inherits all the methods from another class. In thie above example, the Model class inherits all the method from Car class.

The super() method refers to the parent class. By calling the super() method in the constructor method, we call the parent's constructor method and gets access to the parent's properties and method. Inheritance is useful for code-reusability, we can reuse properties and method of an existing class when you create a new class.


Removal.AI - [SPONSOR]

Remove background from multiple images in a single upload straight to your desktop using Bulk Photo Background Remover for Windows.

  • ✅ Drag & Drop Multiple Images
  • ✅ Optimize Product Images
  • ✅ Select Your Background
  • ✅ Set Your Output Size
  • ✅ Exceptional Results

Removal AI

Visit -> Removal AI

Did you find this article valuable?

Support Rahul by becoming a sponsor. Any amount is appreciated!