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

// 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:

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

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

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

Prototype-Based Example:

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:

• 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 {
  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:

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

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

// 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

Prototype-Based Example:

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:

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

---

The above is the detailed content of JavaScript OOP Concepts: Class-Based vs. Prototype-Based. For more information, please follow other related articles on the PHP Chinese website!