Le bouton qui ne vide rien — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 6)

Le bouton qui ne vide rien

Classes et modules · niveau 2

Énoncé

Une fonction surClic(rappel) simule un bouton : elle appelle rappel() et affiche le résultat ou l'erreur. Expliquer ce qu'affichent les trois appels suivants, la classe Panier ayant une méthode vider qui écrit dans un champ privé.


surClic(panier.vider);
surClic(() => panier.vider());
surClic(panier.vider.bind(panier));

Corrigé


class Panier {
  #articles = ["Programmation Java"];

  vider() {
    this.#articles = [];
    return `panier vidé (${this.#articles.length} article)`;
  }
}

// Simule un bouton : le rappel est appelé « seul », sans objet devant.
function surClic(rappel) {
  try {
    console.log(rappel());
  } catch (erreur) {
    console.log(`${erreur.name} : ${erreur.message}`);
  }
}

const panier = new Panier();
surClic(panier.vider);
surClic(() => panier.vider());
surClic(panier.vider.bind(panier));


TypeError : Cannot set properties of undefined (setting '#articles')
panier vidé (0 article)
panier vidé (0 article)

L'argument panier.vider ne transmet que la fonction ; rappel() l'appelle sans objet, avec this === undefined, et l'écriture du champ privé échoue. La fonction fléchée refait l'appel complet panier.vider() ; bind fabrique une fonction dont this est fixé à panier. C'est exactement ce qui se passera avec addEventListener au chapitre 8.