Concepts JavaScript POO : basés sur les classes ou basés sur les prototypes

Pour rédiger un blog détaillé sur les concepts et les prototypes de programmation orientée objet (POO) de JavaScript, nous passerons en revue les fonctions de première classe, d'abord -instances de classe, héritage, polymorphisme, encapsulation et abstraction, expliquant à la fois basé sur les classes et approches basées sur des prototypes.

---

JavaScript est unique en ce sens qu'il peut prendre en charge à la fois la POO basée sur les classes (introduite dans ES6) et la POO basée sur les prototypes (la manière originale dont JavaScript gérait la POO). Ce blog plongera dans les concepts clés de la POO tels que les fonctions de première classe, les instances de première classe, l'héritage, le polymorphisme, encapsulation et abstraction en utilisant les deux approches.

1. Fonctions de première classe

En JavaScript, les fonctions sont des citoyens de première classe. Cela signifie que les fonctions peuvent être :

• Attribué aux variables
• Passé en arguments
• Revenu d'autres fonctions

Absolument ! Décomposons l'article de blog pour couvrir à la fois les fonctions de première classe et les instances de première classe en utilisant à la fois des approches fonctionnelles et basées sur les classes en JavaScript. Cela permettra de comprendre clairement ces concepts dans le contexte de la programmation orientée objet (POO).

Approche fonctionnelle

Exemple : fonctions de première classe

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

Explication :

• Les fonctions peuvent être stockées, transmises et renvoyées comme n'importe quelle autre valeur, présentant des fonctions de première classe.

Approche basée sur les classes

Bien que les fonctions soient des citoyens de première classe, nous pouvons également créer des classes qui imitent un comportement similaire.

Exemple : fonctions de première classe dans un contexte de classe

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!

Explication :

• La classe Greeter démontre un comportement semblable à celui d'une fonction de première classe en encapsulant la méthode greet, qui peut être transmise à d'autres fonctions (comme logGreeting).

---

2. Instances de première classe

Les instances d'objets ou de classes peuvent également être traitées comme des citoyens de première classe. Ils peuvent être attribués à des variables, passés en arguments et stockés dans des collections.

Comme les fonctions, les instances d'objets ou de classes peuvent également être traitées comme des citoyens de première classe. Ils peuvent être :

• Attribué aux variables
• Passé en arguments
• Revenu des fonctions
• Stocké dans des collections comme des tableaux

Approche fonctionnelle

Exemple : instances de première classe

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

Explication :

• Ici, myCar et yourCar sont des instances du constructeur de fonction Car. Ils peuvent être transmis aux fonctions et stockés dans des variables.

Approche basée sur les classes

Exemple : instances de première classe dans un contexte de classe

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!

Explication :

• Dans cet exemple, myCar et yourCar sont des instances de la classe Car, et tout comme l'approche fonctionnelle, elles peuvent être transmises à des fonctions et manipulées.

---

3. Héritage

Héritage basé sur les classes vous permet de créer une nouvelle classe qui hérite des propriétés et des méthodes d'une classe existante à l'aide du mot-clé extends.

Exemple basé sur une classe :

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

Exemple basé sur un prototype :

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

Explication :

• L'l'héritage basé sur les classes utilise extends pour hériter d'une classe parent, tandis que l'l'héritage basé sur les prototypes utilise Object.create pour lier des objets.

---

4. Polymorphisme

Le polymorphisme permet à différents objets de définir leurs propres versions de la même méthode, qui peuvent être appelées sur des objets d'un type parent.

Exemple basé sur une classe :

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.

Exemple basé sur un prototype :

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.

Explication :

• Le Polymorphisme permet aux objets basés sur une classe et sur un prototype de définir leur propre version de la méthode speak tout en héritant d'un type parent.

---

5. Encapsulation

L'

Encapsulation consiste à masquer les détails internes d'un objet et à n'exposer que ce qui est nécessaire. En JavaScript, nous y parvenons en utilisant des champs privés (avec #) dans la POO basée sur les classes ou des fermetures dans la POO basée sur les prototypes.

Exemple basé sur une classe :

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.

Exemple basé sur un prototype :

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.

Explication :

• L'Encapsulation basée sur les classes utilise des champs privés (introduits dans ES6) pour masquer les données, tandis que l'encapsulation basée sur un prototype assure la confidentialité grâce à des fermetures.

---

6. Abstraction

L'

Abstraction cache une logique complexe et n'expose que les détails nécessaires. Cela peut être réalisé en faisant abstraction des détails internes et en exposant les méthodes essentielles.

Exemple basé sur une classe :

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

Exemple basé sur un prototype :

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!

Explication :

• Les deux approches résument la complexité de la gestion des niveaux de batterie, en exposant uniquement les méthodes nécessaires à l'interaction.

---

Conclusion

Comprendre les différences et les similitudes entre la POO basée sur les classes et la basée sur les prototypes en JavaScript améliore vos compétences en programmation. Les fonctions et instances de première classe, l'héritage, le polymorphisme, l'encapsulation et l'abstraction sont des concepts fondamentaux que vous pouvez exploiter pour écrire un code plus propre et plus maintenable.

Alors que la syntaxe moderne basée sur les classes (introduite dans ES6) est plus lisible et familière aux développeurs issus d'autres langages POO, l'approche basée sur des prototypes est plus fondamentale pour JavaScript. comportement sous-jacent.

Ce blog montre comment les concepts fondamentaux de la POO : fonctions de première classe, instances de première classe, héritage, polymorphisme, encapsulation et abstraction — peuvent être réalisées dans les deux paradigmes. Que vous utilisiez des classes ou des prototypes, JavaScript offre des mécanismes robustes pour implémenter la POO de manière flexible et puissante.

---

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!