Les fermetures JavaScript expliquées

Une introduction en douceur au sujet des fermetures, clé pour comprendre le fonctionnement des fonctions JavaScript

Si vous avez déjà écrit unfonctionen JavaScript, vous avez déjà utiliséfermetures.

C'est un sujet clé à comprendre, qui a des implications sur les choses que vous pouvez faire.

Lorsqu'une fonction est exécutée, elle est exécutéeavec la portée qui était en place lors de sa définition, etne pasavec l'État qui est en place quand il estréalisé.

La portée est essentiellement l'ensemble des variables qui sont visibles.

Une fonction se souvient de sonPortée lexicale, et il est capable d'accéder aux variables qui ont été définies dans la portée parent.

En bref, une fonction a tout un bagage de variables auxquelles elle peut accéder.

Permettez-moi de donner immédiatement un exemple pour clarifier cela.

const bark = dog => {
  const say = `${dog} barked!`
  ;(() => console.log(say))()
}

bark(Roger)

Cela se connecte à la consoleRoger barked!, comme prévu.

Que faire si vous souhaitez renvoyer l'action à la place:

const prepareBark = dog => {
  const say = `${dog} barked!`
  return () => console.log(say)
}

const bark = prepareBark(Roger)

bark()

Cet extrait se connecte également à la consoleRoger barked!.

Faisons un dernier exemple, qui réutiliseprepareBarkpour deux chiens différents:

const prepareBark = dog => {
  const say = `${dog} barked!`
  return () => {
    console.log(say)
  }
}

const rogerBark = prepareBark(Roger) const sydBark = prepareBark(Syd)

rogerBark() sydBark()

Cette imprime

Roger barked!
Syd barked!

As you can see, the state of the variable say is linked to the function that’s returned from prepareBark().

Also notice that we redefine a new say variable the second time we call prepareBark(), but that does not affect the state of the first prepareBark() scope.

This is how a closure works: the function that’s returned keeps the original state in its scope.


More js tutorials: