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

Tutto è chiaro?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 2

Chieda ad AI

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Awesome!

Completion rate improved to 6.25

Scorri per mostrare il 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.

Tutto è chiaro?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 2