Understanding Classes, Objects, Prototype, Inheritance, Constructors, super(), and this in JavaScript

JavaScript, is an object-oriented language, with various principles such as classes, inheritance, constructors, super(), and this facilitates the creation and organization of code. Let's dive into these concepts and understand their significance through simple examples.

Classes in JavaScript

JavaScript introduced the concept of classes in ECMAScript 2015 (ES6), providing a more structured way to create objects. A class is a blueprint for creating objects with shared properties and methods.

Example: Creating a Simple JavaScript Class

Let's consider a Vehicle class:

class Vehicle {

  constructor(make, model) {

    this.make = make;

    this.model = model;

  }

  displayInfo() {

    console.log(`Make: ${this.make}, Model: ${this.model}`);

  }

}

In this example, a Vehicle is a class with a constructor that initializes its make and model properties. It also contains a displayInfo() method to show the vehicle's information.

Objects in JavaScript

Let's use our classes to create objects:

The object is an entity having a state and behavior (properties and methods)

Example: Creating Object of Vehicle and Car

class Vehicle {

  constructor(make, model) {

    this.make = make;

    this.model = model;

  }

  displayInfo() {

    console.log(`Make: ${this.make}, Model: ${this.model}`);

  }

}

const vehicle1 = new Vehicle('Toyota', 'Camry');

// Displaying vehicle information

vehicle1.displayInfo(); 

// Output: Make: Toyota, Model: Camry

In this example, we created instances of Vehicle and utilized their displayInfo() methods to showcase their information.

Prototype in JavaScript

Objects have a special property called prototype. (a prototype is also an object)

If the object and prototype have the same method, the object's method will be used.

Example: for Prototype

class Vehicle {

  constructor(make, model) {

    this.make = make;

    this.model = model;

  }

  displayInfo() {

    console.log(`Make: ${this.make}, Model: ${this.model}`);

  }

}

// Adding a method using prototype to the Vehicle class

Vehicle.prototype.honk = function() {

  console.log('Beep beep!');

};

const vehicle1 = new Vehicle('Toyota', 'Camry');

console.log(vehicle1.honk()) 

Inheritance in JavaScript

Inheritance allows a class (subclass) to inherit properties and methods from another class (superclass). This enables code reusability and promotes a hierarchical structure.

If the child and parent have the same method, the child's method will be used. [Method overriding]

Example: Inheriting from the Vehicle Class

Let's create a Car class that inherits from the Vehicle class:

class Car extends Vehicle {

  constructor(make, model, year) {

    super(make, model);

    this.year = year;

  }

  displayInfo() {

    super.displayInfo();

    console.log(`Year: ${this.year}`);

  }

}

const car1 = new Car('Ford', 'Mustang', 2022); 

//Output: Make: Ford, Model: Mustang,  Year:2022

Here, the Car class extends the Vehicle class using the extends keyword. The super(make, model) inside the constructor calls the superclass constructor, setting the make and model properties. Additionally, Car has its year property and overrides the displayInfo() method to include the year information.

Constructors, super(), and this Keyword

Constructors :

Constructors are special methods used for initializing objects when a class is instantiated. They allow us to assign initial values to class properties. 

Constructors are automatically invoked by new keyword.

super() :

The super() method is used inside a subclass constructor to call the superclass constructor. It passes arguments to the superclass constructor and allows access to the superclass's properties and methods.

this Keyword :

this refers to the current instance of the class and is used to access its properties and methods within its scope.

Understanding classes, inheritance, constructors, super(), and this in JavaScript allows for better code organization and reusability, enhancing the overall structure of your programs. Practice and experimentation with these concepts will further solidify your understanding.