Qu'est-ce qu'une fermeture ? (DÉFINITION SIMPLE JS)

Je me souviens de mon premier entretien d'embauche lorsque l'intervieweur m'a demandé de définir la clôture. C’était un cauchemar car je ne connaissais pas le terme technique. Mais au fond de moi, j’avais le sentiment de comprendre ce que cela signifiait, même si je ne pouvais pas l’expliquer.

Après la fin de l’entretien (spoiler : je n’ai pas été sélectionné), je me suis précipité sur Google pour en savoir plus sur les fermetures. Le premier terme que j'ai rencontré était Lexical Scoping = _What?

Ne vous inquiétez pas, la portée lexicale n'est qu'un terme sophistiqué pour désigner quelque chose de simple !

Alors plongeons-nous et comprenons-le étape par étape.

Portée lexicale

Pensez à votre maison. Imaginez que vous êtes dans votre chambre et que vous souhaitez allumer la lampe de la chambre. Vous ne pouvez allumer que la lampe qui se trouve dans la pièce dans laquelle vous vous trouvez actuellement. Il s’agit de la portée lexicale : vous ne pouvez accéder et modifier que les éléments (comme la lampe) qui se trouvent dans votre contexte actuel.

const bedroom = () => {
  let bedroomLamp = 'off'

  const turnOnBedroomLamp = () => {
    bedroomLamp = 'on'
  }

  const turnOffBedroomLamp = () => {
    bedroomLamp = 'off'
  }
}

Les fonctions turnOnBedroomLamp et turnOffBedroomLamp existent dans le contexte de la chambre, elles peuvent donc accéder et modifier la variable roomLamp.

Maintenant, imaginez que vous êtes dans la cuisine et essayez d’éteindre la lampe de la chambre. Cela ne fonctionnera pas car vous êtes dans un contexte différent et la cuisine n'a pas accès à la variable chambreLamp :

const kitchen = () => {
  const turnOnBedroomLamp = () => {
    bedroomLamp = 'on' // You can't do this!!
  }
}

Très simple, non ?

Quelle est la relation entre la portée lexicale et la clôture ?

Maintenant, allons plus loin. Imaginez que votre maison dispose d'une télécommande qui vous permet d'allumer la lampe de la chambre, quelle que soit la pièce dans laquelle vous vous trouvez. Cette télécommande « se souvient » de la lampe de la chambre qu'elle contrôle, même si vous êtes dans la cuisine.

Cette « mémoire » est ce qu'est une fermeture !

Voici un exemple en code :

const bedroom = () => {
  let bedroomLamp = 'off'

  const turnOnBedroomLamp = () => {
    bedroomLamp = 'on'
  }

  return turnOnBedroomLamp // Returning the function
}

const remoteControl = bedroom() // Creating the closure
remoteControl() // Using the closure to turn on the bedroom lamp

Dans cet exemple :

La fonction chambre crée une variable locale chambreLampe et une fonction turnOnBedroomLamp.

turnOnBedroomLamp se souvient du contexte dans lequel il a été créé (la fonction chambre).

Lorsque nous appelons remoteControl (la fonction renvoyée), elle a toujours accès à la variable chambreLamp, même si nous sommes maintenant en dehors de la fonction chambre.

Vous voyez ? C'est une idée très simple, c'est juste du Javascript qui mémorise les choses afin que vous puissiez les utiliser à différents endroits de différentes manières.

En réfléchissant maintenant dans un contexte réel de code, voyons comment nous pouvons utiliser la fermeture de nos jours. Le code ci-dessous crée une fonction pour ajouter des remises dans la valeur d'un produit.

const createDiscount = (discount) => {
  return (price) => price - price * discount
}

const tenPercentOff = createDiscount(0.1) // 10% off
const twentyPercentOff = createDiscount(0.2) // 20% off

// Using discount functions
console.log(tenPercentOff(100)) // returns 90
console.log(twentyPercentOff(200)) // returns 160

Maintenant, vous êtes conscient de la clôture et préparé lorsque certains entretiens vous demandent la définition. Pour plus de contenu, consultez la section références.

Références

Fermeture - Docks Web MDN

Fermeture en JavaScript - GeeksForGeeks

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!