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. This post explores key concepts of classes and prototypes, including constructor functions, ES6 class syntax, inheritance, and method overriding.

---

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.

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

Key Highlights:

• Constructor functions enable object creation.
• The prototype property allows shared methods and inheritance.
• Instances access properties/methods through the prototype chain.

---

ES6 Class Syntax and Inheritance with extends

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. Here’s what you can typically define:

• Constructor: Initializes the object when it’s created.
• Methods: 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 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}.`;
  }
}

In the above example:

• 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.

---

Understanding 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.

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().

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

In this example:

• The Dog class overrides the makeSound method of the Animal class.
• The super.makeSound() references the parent class’s implementation.

---