Classes and Prototypes

Object-Oriented Programming (OOP) is a programming paradigm that allows developers to design and structure code using objects, encapsulating both data and behavior. In JavaScript, understanding prototypes and classes is fundamental to leveraging OOP principles.

Constructor Functions and Prototype

Before the introduction of ES6 classes, JavaScript developers relied on constructor functions and the prototype chain to create objects and define inheritance.

A constructor function is a regular function used to create objects.

Every function in JavaScript has a prototype property by default, which is used when creating inheritance between objects. The prototype property allows shared methods and inheritance.

When a new object is created using a constructor function, methods defined on the prototype can be accessed by all instances, optimizing memory usage.

ES6 Class Syntax

JavaScript’s ES6 introduced the class syntax, which provides a cleaner and more intuitive way to define classes and objects. This is essentially syntactic sugar over the already existing prototype-based inheritance.

Defining a Class

A class in JavaScript encapsulates properties and methods.

We can define following inside a class

1. Constructor that initializes the object when it’s created.
2. Methods to encapsulate behavior for the class instances.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  describe() {
    return `${this.name} is ${this.age} years old.`;
  }
}

Inheriting Classes with extends

Inheritance is an OOP principle that allows one class to gain properties and behavior from another. In JavaScript, this is done using the extends keyword,

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  describe() {
    return `${this.name} is ${this.age} years old.`;
  }
}

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age); // Calls the parent class constructor
    this.grade = grade;
  }
  describe() {
    return `${super.describe()} They are in grade ${this.grade}.`;
  }
}

Here the Student class extends the Person class. super() is used to invoke the parent class’s constructor, retaining its functionality. Additional properties or methods can be added to enhance the child class.

super() and Method Overriding

The super keyword is essential in JavaScript’s class inheritance model. It allows access to the parent class’s methods or constructor,

1. Invoking Parent Constructor Use super() to call the parent’s constructor when creating a subclass. This is mandatory when extending a class that has a constructor, as it sets up the parent attributes. We saw the example of extended class invoking parent class’ constructor.

2. Overriding Methods Methods in the parent class can be overridden by redefining them in the subclass. However, you can call the parent version of the method via super.methodName(). The Dog class overrides the makeSound method of the Animal class and super.makeSound() references the parent class’s implementation.

class Animal {
  makeSound() {
    return "Some generic animal sound";
  }
}
class Dog extends Animal {
  makeSound() {
    return `${super.makeSound()}... but I bark!`;
  }
}