Pattern de chaînage de méthodes

Fait partie de la section Programmation Orientée Objet du Journey JavaScript de Coddy — leçon 16 sur 56.

Le chaînage de méthodes est un patron de programmation qui vous permet d'appeler plusieurs méthodes sur le même objet dans une seule instruction. Chaque méthode retourne l'objet lui-même (this), vous permettant ainsi d'appeler la méthode suivante sur la même ligne.

Créer un objet compteur simple :

const counter = {
  count: 0,
  
  increment() {
    this.count++;
    return this;
  },
  
  decrement() {
    this.count--;
    return this;
  },
  
  getValue() {
    return this.count;
  }
};

Vous pouvez maintenant enchaîner les méthodes :

// Enchaîner plusieurs opérations
counter.increment().increment().decrement();

// Le compteur est maintenant à 1
console.log(counter.getValue()); // Résultat : 1

La clé du chaînage de méthodes est de retourner this depuis chaque méthode que vous souhaitez rendre chaînable.

Défi

On vous donne un objet calculator qui possède déjà les méthodes add() et subtract(). Votre tâche consiste à ajouter les méthodes multiply et divide qui retournent this pour permettre le chaînage.

Aide-mémoire

Le chaînage de méthodes permet d'appeler plusieurs méthodes sur le même objet en une seule instruction. Chaque méthode retourne l'objet lui-même (this), ce qui permet d'appeler la méthode suivante sur la même ligne.

Pour permettre le chaînage de méthodes, retournez this dans chaque méthode :

const counter = {
  count: 0,
  
  increment() {
    this.count++;
    return this;
  },
  
  decrement() {
    this.count--;
    return this;
  },
  
  getValue() {
    return this.count;
  }
};

Enchaînez plusieurs méthodes les unes après les autres :

counter.increment().increment().decrement();
console.log(counter.getValue()); // Résultat : 1

Essayez vous-même

import { calculator } from './calculator.js';

// Code de test - ne pas modifier
const result1 = calculator.add(10).multiply(2).getValue();
console.log(result1); // Devrait afficher 20

// Réinitialisation pour le deuxième test
calculator.value = 0;
const result2 = calculator.add(20).divide(4).subtract(1).getValue();
console.log(result2); // Devrait afficher 4