Apprendre Class-Based vs Prototype-Based OOP

When you create objects in JavaScript, you can use either class-based or prototype-based object-oriented programming (OOP) approaches. Both methods ultimately allow you to define reusable blueprints for objects, but they differ in syntax and how you think about object creation.

In class-based OOP, which is familiar from many other languages and introduced in JavaScript with ES6, you define a blueprint with the class keyword. This approach uses clear, readable syntax for constructing objects and defining their behavior.

In prototype-based OOP, which is JavaScript's original model, you create objects that inherit directly from other objects. You define constructor functions and attach shared methods to their prototype. This approach is more flexible but can be less intuitive for those coming from class-based languages.

Here is a side-by-side comparison of the two approaches:

Class-based OOP:
- Uses the class keyword;
- Methods are defined inside the class body;
- Inheritance uses the extends keyword;
- Syntax is more declarative and familiar to developers from other OOP languages.
Prototype-based OOP:
- Uses constructor functions and the prototype property;
- Methods are attached to the constructor's prototype;
- Inheritance is achieved by manipulating the prototype chain;
- Syntax is more manual and flexible, but less structured.

Despite these differences, both approaches ultimately create objects that share methods and properties through prototypes under the hood.


              1234567891011121314151617181920212223
            
// Prototype-based approach
function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function () {
  return this.name + " makes a noise.";
};

const dog1 = new Animal("Rex");
console.log(dog1.speak()); // Rex makes a noise.

// Class-based approach
class AnimalClass {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return this.name + " makes a noise.";
  }
}

const dog2 = new AnimalClass("Buddy");
console.log(dog2.speak()); // Buddy makes a noise.

Tout était clair ?

Merci pour vos commentaires !

Section 3. Chapitre 2

Demandez à l'IA

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

Can you explain the main differences between class-based and prototype-based OOP in JavaScript?

Which approach should I use for my project?

Can you show how inheritance works in both approaches?

Awesome!

Completion rate improved to 6.25

Glissez pour afficher le menu

Here is a side-by-side comparison of the two approaches:

Class-based OOP:
- Uses the class keyword;
- Methods are defined inside the class body;
- Inheritance uses the extends keyword;
- Syntax is more declarative and familiar to developers from other OOP languages.
Prototype-based OOP:
- Uses constructor functions and the prototype property;
- Methods are attached to the constructor's prototype;
- Inheritance is achieved by manipulating the prototype chain;
- Syntax is more manual and flexible, but less structured.

Despite these differences, both approaches ultimately create objects that share methods and properties through prototypes under the hood.


              1234567891011121314151617181920212223
            
// Prototype-based approach
function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function () {
  return this.name + " makes a noise.";
};

const dog1 = new Animal("Rex");
console.log(dog1.speak()); // Rex makes a noise.

// Class-based approach
class AnimalClass {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return this.name + " makes a noise.";
  }
}

const dog2 = new AnimalClass("Buddy");
console.log(dog2.speak()); // Buddy makes a noise.

Tout était clair ?

Merci pour vos commentaires !

Section 3. Chapitre 2