JavaScriptLeçon 12 sur 16

Closures (fermetures)

Une fonction JavaScript se souvient des variables de l’endroit où elle a été créée, même quand la fonction extérieure a fini. C’est une closure, ou fermeture : une façon de donner à une fonction sa mémoire privée.

L’essentiel

Une fonction intérieure voit les variables de la fonction extérieure et en garde l’accès
Chaque appel de la fonction extérieure crée une mémoire nouvelle et séparée
Le code extérieur ne peut pas atteindre ces variables : les données restent privées
Une fabrique de fonctions : makeGreeter("Hello") renvoie une fonction de salutation toute prête
Compteurs, caches, once() et gestionnaires d’événements reposent sur les closures

Exemple

function createCounter() {  let count = 0;  return () => {    count += 1;    return count;  };} const next = createCounter();console.log(next(), next(), next()); const other = createCounter();console.log(other()); const makeGreeter = (greeting) => (name) => `${greeting}, ${name}!`;const hello = makeGreeter("Hello");console.log(hello("Max"));

next se souvient de son propre count et l’augmente à chaque appel. other a été créé à part, il a donc commencé à 1. makeGreeter a renvoyé une fonction qui a retenu le mot Hello.

Exercice

Utiliser l’éditeur⌘ Entrée ou Ctrl Entrée lance le code, ⇧ ⌘ Entrée vérifie l’exercice.Tab et Maj Tab indentent la ligne ou la sélection ; Échap puis Tab quitte l’éditeur.La vérification compare ce que le programme a affiché à l’exercice ; les espaces en fin de ligne ne comptent pas.Après deux vérifications ratées, la solution s’ouvre. Votre code reste dans ce navigateur.

Terminez la tirelire : add(amount) ajoute la somme à balance et renvoie le nouveau solde, total() renvoie balance. Écrivez ensuite once(fn) : elle renvoie une fonction qui ne lance fn que la première fois. Sortie : Mia: 20, Leo: 3 et From outside: undefined.

// Piggy banks: the balance is private, only add() and total() can reach itfunction createPiggyBank() {  let balance = 0;  return {    add(amount) {      // TODO: add amount to balance and return the new balance      return amount;    },    total() {      // TODO: return the balance      return 0;    },  };} // TODO: once(fn) returns a new function that runs fn only the first timefunction once(fn) {  return fn;} const mia = createPiggyBank();const leo = createPiggyBank();mia.add(10);mia.add(5);leo.add(3); const welcomeBonus = once(() => mia.add(5));welcomeBonus();welcomeBonus(); console.log(`Mia: ${mia.total()}`);console.log(`Leo: ${leo.total()}`);console.log(`From outside: ${mia.balance}`);

// Piggy banks: the balance is private, only add() and total() can reach it
function createPiggyBank() {
  let balance = 0;
  return {
    add(amount) {
      // TODO: add amount to balance and return the new balance
      return amount;
    },
    total() {
      // TODO: return the balance
      return 0;
    },
  };
}

// TODO: once(fn) returns a new function that runs fn only the first time
function once(fn) {
  return fn;
}

const mia = createPiggyBank();
const leo = createPiggyBank();
mia.add(10);
mia.add(5);
leo.add(3);

const welcomeBonus = once(() => mia.add(5));
welcomeBonus();
welcomeBonus();

console.log(`Mia: ${mia.total()}`);
console.log(`Leo: ${leo.total()}`);
console.log(`From outside: ${mia.balance}`);

Sortie

Ce que le programme affiche apparaîtra ici.