Explorer la programmation orientée objet (POO) en JavaScript

Explorer la programmation orientée objet (POO) en JavaScript

Date : 17 décembre 2024

La programmation orientée objet (POO) est un paradigme qui utilise des objets pour modéliser des entités du monde réel. JavaScript, étant un langage de programmation polyvalent, offre une prise en charge robuste de la POO grâce à ses prototypes, ses classes ES6 et ses améliorations modernes. Aujourd'hui, nous allons approfondir les principes et les fonctionnalités de la POO en JavaScript.

---

Concepts de base de la POO en JavaScript

1. Objets

Les objets sont les éléments constitutifs de la POO. En JavaScript, un objet est une collection de paires clé-valeur.

Exemple : Création d'objets

const car = {
  brand: "Toyota",
  model: "Corolla",
  start() {
    return `${this.brand} ${this.model} is starting.`;
  }
};

console.log(car.start()); // Output: Toyota Corolla is starting.

---

2. Cours

Les cours sont des plans pour créer des objets. Ils encapsulent les données et le comportement. JavaScript a introduit le mot-clé class dans ES6.

Exemple : Créer une classe

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

  makeSound() {
    return `${this.name} is making a sound.`;
  }
}

const dog = new Animal("Buddy", "Dog");
console.log(dog.makeSound()); // Output: Buddy is making a sound.

---

3. Encapsulation

L'encapsulation signifie regrouper les données et les méthodes tout en restreignant l'accès direct à certains composants. JavaScript y parvient en utilisant des membres publics, privés et protégés.

Champs privés

Les champs privés sont désignés par un préfixe # et ne sont accessibles qu'au sein de la classe.

Exemple : Champs privés

class BankAccount {
  #balance;

  constructor(initialBalance) {
    this.#balance = initialBalance;
  }

  deposit(amount) {
    this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(100);
account.deposit(50);
console.log(account.getBalance()); // Output: 150
// console.log(account.#balance); // Error: Private field '#balance' must be declared in an enclosing class

---

4. Héritage

L'héritage permet à une classe d'hériter des propriétés et des méthodes d'une autre classe à l'aide du mot-clé extends.

Exemple : Héritage

class Vehicle {
  constructor(brand) {
    this.brand = brand;
  }

  start() {
    return `${this.brand} vehicle is starting.`;
  }
}

class Car extends Vehicle {
  constructor(brand, model) {
    super(brand); // Calls the parent class constructor
    this.model = model;
  }

  display() {
    return `${this.brand} ${this.model} is ready to go.`;
  }
}

const myCar = new Car("Tesla", "Model S");
console.log(myCar.display()); // Output: Tesla Model S is ready to go.

---

5. Polymorphisme

Le polymorphisme permet à une sous-classe de remplacer une méthode de sa classe parent pour fournir une implémentation spécifique.

Exemple : remplacement de méthode

class Shape {
  area() {
    return "Area is not defined.";
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius ** 2;
  }
}

const circle = new Circle(5);
console.log(circle.area()); // Output: 78.53981633974483

---

6. Abstraction

L'abstraction se concentre sur l'exposition uniquement des détails essentiels tout en masquant les complexités de mise en œuvre. Bien que JavaScript ne dispose pas nativement de classes abstraites, vous pouvez les simuler.

Exemple : Simulation de l'abstraction

class Animal {
  constructor(name) {
    if (this.constructor === Animal) {
      throw new Error("Abstract class cannot be instantiated directly.");
    }
    this.name = name;
  }

  makeSound() {
    throw new Error("Abstract method must be implemented.");
  }
}

class Dog extends Animal {
  makeSound() {
    return "Bark!";
  }
}

const dog = new Dog("Buddy");
console.log(dog.makeSound()); // Output: Bark!
// const animal = new Animal("Some Animal"); // Error: Abstract class cannot be instantiated directly.

---

7. Prototypes et chaîne de prototypes

JavaScript est un langage basé sur des prototypes. Chaque objet possède un lien interne vers un autre objet appelé son prototype.

Exemple : Chaîne prototype

const car = {
  brand: "Toyota",
  model: "Corolla",
  start() {
    return `${this.brand} ${this.model} is starting.`;
  }
};

console.log(car.start()); // Output: Toyota Corolla is starting.

---

8. Composition d'objets et héritage

Au lieu d'utiliser l'héritage, vous pouvez composer des objets en combinant des fonctionnalités. Cette approche évite les complexités des hiérarchies d’héritage profondes.

Exemple : Composition

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

  makeSound() {
    return `${this.name} is making a sound.`;
  }
}

const dog = new Animal("Buddy", "Dog");
console.log(dog.makeSound()); // Output: Buddy is making a sound.

---

Principes clés de la POO

1. DRY (Ne vous répétez pas) : Réutilisez le code via les classes et l'héritage.
2. Principes SOLID : suivez les meilleures pratiques pour écrire du code POO évolutif et maintenable.

---

Exemple concret : système de gestion des utilisateurs

Étape 1 : Définir une classe de base

class BankAccount {
  #balance;

  constructor(initialBalance) {
    this.#balance = initialBalance;
  }

  deposit(amount) {
    this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(100);
account.deposit(50);
console.log(account.getBalance()); // Output: 150
// console.log(account.#balance); // Error: Private field '#balance' must be declared in an enclosing class

Étape 2 : étendre les fonctionnalités

class Vehicle {
  constructor(brand) {
    this.brand = brand;
  }

  start() {
    return `${this.brand} vehicle is starting.`;
  }
}

class Car extends Vehicle {
  constructor(brand, model) {
    super(brand); // Calls the parent class constructor
    this.model = model;
  }

  display() {
    return `${this.brand} ${this.model} is ready to go.`;
  }
}

const myCar = new Car("Tesla", "Model S");
console.log(myCar.display()); // Output: Tesla Model S is ready to go.

Étape 3 : Créer des instances

class Shape {
  area() {
    return "Area is not defined.";
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius ** 2;
  }
}

const circle = new Circle(5);
console.log(circle.area()); // Output: 78.53981633974483

---

Tâches pratiques

1. Créez une hiérarchie de classes pour un système de gestion de bibliothèque.
2. Implémentez une classe BankAccount avec des champs privés pour le solde et des méthodes publiques pour le dépôt et le retrait.
3. Écrivez une classe Vehicle avec des sous-classes comme Car et Bike démontrant le polymorphisme.

---

Conclusion

La POO en JavaScript offre un moyen puissant d'écrire du code propre, modulaire et réutilisable. En maîtrisant des concepts tels que les classes, l'héritage, l'encapsulation et le polymorphisme, vous serez bien équipé pour créer des applications évolutives. Continuez à expérimenter et à appliquer ces concepts à des problèmes du monde réel pour consolider votre compréhension !

Sujet de demain : Nous explorerons la Programmation asynchrone en JavaScript, en approfondissant les rappels, les promesses et l'asynchrone/l'attente. Restez à l'écoute !

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!