JavaScript OOP Concepts: Class-Based vs. Prototype-Based

To write a detailed blog on JavaScript's Object-Oriented Programming (OOP) concepts and prototypes, we'll go through first-class functions, first-class instances, inheritance, polymorphism, encapsulation, and abstraction, explaining both class-based and prototype-based approaches.

JavaScript is unique in that it can support both class-based OOP (introduced in ES6) and prototype-based OOP (the original way JavaScript handled OOP). This blog will dive into key OOP concepts like first-class functions, first-class instances, inheritance, polymorphism, encapsulation, and abstraction using both approaches.

1. First-Class Functions

In JavaScript, functions are first-class citizens. This means that functions can be:

Assigned to variables
Passed as arguments
Returned from other functions

Absolutely! Let's break down the blog post to cover both first-class functions and first-class instances using both functional and class-based approaches in JavaScript. This will provide a clear understanding of these concepts in the context of Object-Oriented Programming (OOP).

Functional Approach

Example: First-Class Functions

// Assigning a function to a variable
const greet = function(name) {
  return `Hello, ${name}!`;
};

// Passing a function as an argument
function logGreeting(fn, name) {
  console.log(fn(name));
}

// Returning a function
function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
  };
}

logGreeting(greet, "John");  // Output: Hello, John!

const double = createMultiplier(2);
console.log(double(5));  // Output: 10

Explanation:

Functions can be stored, passed, and returned like any other value, showcasing first-class functions.

Class-Based Approach

Although functions are first-class citizens, we can also create classes that mimic similar behavior.

Example: First-Class Functions in a Class Context

class Greeter {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return `Hello, ${this.name}!`;
  }
}

// Logging greeting
class Logger {
  static logGreeting(greeter) {
    console.log(greeter.greet());
  }
}

// Using classes to demonstrate first-class functions
const greeter = new Greeter("John");
Logger.logGreeting(greeter); // Output: Hello, John!

Explanation:

The Greeter class demonstrates a first-class function-like behavior by encapsulating the greet method, which can be passed to other functions (like logGreeting).

2. First-Class Instances

Instances of objects or classes can also be treated as first-class citizens. They can be assigned to variables, passed as arguments, and stored in collections.

Like functions, instances of objects or classes can also be treated as first-class citizens. They can be:

Assigned to variables
Passed as arguments
Returned from functions
Stored in collections like arrays

Functional Approach

Example: First-Class Instances

function Car(make, model) {
  this.make = make;
  this.model = model;

  this.startEngine = function() {
    console.log(`${this.make} ${this.model} engine started.`);
  };
}

const myCar = new Car("Toyota", "Corolla");
const yourCar = new Car("Tesla", "Model 3");

// Passing instance as an argument
function showCarDetails(car) {
  console.log(`Car: ${car.make} ${car.model}`);
}

showCarDetails(myCar);  // Output: Car: Toyota Corolla

Explanation:

Here, myCar and yourCar are instances of the Car function constructor. They can be passed to functions and stored in variables.

Class-Based Approach

Example: First-Class Instances in Class Context

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  startEngine() {
    console.log(`${this.make} ${this.model} engine started.`);
  }
}

const myCar = new Car("Toyota", "Corolla");
const yourCar = new Car("Tesla", "Model 3");

// Passing instance as an argument
function showCarDetails(car) {
  console.log(`Car: ${car.make} ${car.model}`);
}

showCarDetails(myCar);  // Output: Car: Toyota Corolla

Explanation:

In this example, myCar and yourCar are instances of the Car class, and just like the functional approach, they can be passed to functions and manipulated.

3. Inheritance

Class-Based Inheritance allows you to create a new class that inherits properties and methods from an existing class using the extends keyword.

Class-Based Example:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const myDog = new Dog("Buddy");
myDog.speak();  // Output: Buddy barks.

Prototype-Based Example:

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(`${this.name} makes a sound.`);
};

function Dog(name) {
  Animal.call(this, name);  // Inherit properties
}

Dog.prototype = Object.create(Animal.prototype);  // Inherit methods
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
  console.log(`${this.name} barks.`);
};

const myDog = new Dog("Buddy");
myDog.speak();  // Output: Buddy barks.

Explanation:

Class-based inheritance uses extends to inherit from a parent class, while prototype-based inheritance uses Object.create to link objects.

4. Polymorphism

Polymorphism allows different objects to define their own versions of the same method, which can be called on objects of a parent type.

Class-Based Example:

class Animal {
  speak() {
    console.log("Animal makes a sound.");
  }
}

class Dog extends Animal {
  speak() {
    console.log("Dog barks.");
  }
}

class Cat extends Animal {
  speak() {
    console.log("Cat meows.");
  }
}

const animals = [new Dog(), new Cat()];

animals.forEach(animal => animal.speak());
// Output:
// Dog barks.
// Cat meows.

Prototype-Based Example:

function Animal() {}

Animal.prototype.speak = function() {
  console.log("Animal makes a sound.");
};

function Dog() {}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.speak = function() {
  console.log("Dog barks.");
};

function Cat() {}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.speak = function() {
  console.log("Cat meows.");
};

const animals = [new Dog(), new Cat()];
animals.forEach(animal => animal.speak());
// Output:
// Dog barks.
// Cat meows.

Explanation:

Polymorphism allows both class-based and prototype-based objects to define their own version of the speak method while still inheriting from a parent type.

5. Encapsulation

Encapsulation involves hiding the internal details of an object and exposing only what is necessary. In JavaScript, we achieve this by using private fields (with #) in class-based OOP or closures in prototype-based OOP.

Class-Based Example:

class Car {
  #engineStarted = false;

  startEngine() {
    this.#engineStarted = true;
    console.log("Engine started.");
  }

  drive() {
    if (this.#engineStarted) {
      console.log("Car is driving.");
    } else {
      console.log("Start the engine first.");
    }
  }
}

const car = new Car();
car.drive();  // Output: Start the engine first.
car.startEngine();  // Output: Engine started.
car.drive();  // Output: Car is driving.

Prototype-Based Example:

function Car() {
  let engineStarted = false;  // Private via closure

  this.startEngine = function() {
    engineStarted = true;
    console.log("Engine started.");
  };

  this.drive = function() {
    if (engineStarted) {
      console.log("Car is driving.");
    } else {
      console.log("Start the engine first.");
    }
  };
}

const car = new Car();
car.drive();  // Output: Start the engine first.
car.startEngine();  // Output: Engine started.
car.drive();  // Output: Car is driving.

Explanation:

Class-based encapsulation uses private fields (introduced in ES6) to hide data, while prototype-based encapsulation achieves privacy through closures.

6. Abstraction

Abstraction hides complex logic and only exposes necessary details. It can be achieved by abstracting away internal details and exposing essential methods.

Class-Based Example:

class Robot {
  #batteryLevel = 100;

  recharge() {
    this.#batteryLevel = 100;
    console.log("Battery fully charged.");
  }

  performTask() {
    if (this.#batteryLevel > 0) {
      this.#batteryLevel -= 10;
      console.log("Task performed. Battery level:", this.#batteryLevel);
    } else {
      console.log("Battery low. Recharge needed.");
    }
  }
}

const robo = new Robot();
robo.performTask();  // Output: Task performed. Battery level: 90
robo.recharge();     // Output: Battery fully charged.

Prototype-Based Example:

function Robot() {
  let batteryLevel = 100;  // Private via closure

  this.recharge = function() {
    batteryLevel = 100;


    console.log("Battery fully charged.");
  };

  this.performTask = function() {
    if (batteryLevel > 0) {
      batteryLevel -= 10;
      console.log("Task performed. Battery level:", batteryLevel);
    } else {
      console.log("Battery low. Recharge needed.");
    }
  };
}

const robo = new Robot();
robo.performTask();  // Output: Task performed. Battery level: 90
robo.recharge();     // Output: Battery fully charged.

Explanation:

Both approaches encapsulate the complexity of managing battery levels, exposing only the necessary methods for interaction.

Conclusion

Understanding the differences and similarities between class-based and prototype-based OOP in JavaScript enhances your programming skills. First-class functions and instances, inheritance, polymorphism, encapsulation, and abstraction are fundamental concepts that you can leverage to write cleaner and more maintainable code.

While the modern class-based syntax (introduced in ES6) is more readable and familiar to developers coming from other OOP languages, the prototype-based approach is more fundamental to JavaScript's underlying behavior.

This blog demonstrates how core OOP concepts — first-class functions, first-class instances, inheritance, polymorphism, encapsulation, and abstraction — can be achieved in both paradigms. Whether you're using classes or prototypes, JavaScript offers robust mechanisms to implement OOP in a flexible and powerful way.

Blog

JavaScript OOP Concepts: Class-Based vs. Prototype-Based

Omor Faruk

1. First-Class Functions

Functional Approach

Example: First-Class Functions

Class-Based Approach

Example: First-Class Functions in a Class Context

2. First-Class Instances

Functional Approach

Example: First-Class Instances

Class-Based Approach

Example: First-Class Instances in Class Context

3. Inheritance

Class-Based Example:

Prototype-Based Example:

4. Polymorphism

Class-Based Example:

Prototype-Based Example:

5. Encapsulation

Class-Based Example:

Prototype-Based Example:

6. Abstraction

Class-Based Example:

Prototype-Based Example:

Conclusion

Join Our Newsletter. No Spam, Only the good stuff.

Related