Fermetures - Javascript

Vous savez quoi ? En JavaScript, toutes les fonctions sont naturellement des fermetures (à une seule exception près). Vraiment, passons en revue pour comprendre comment cela fonctionne.

Les fermetures sont des fonctions regroupées avec ses références lexicales. Bien que ce soit la définition formelle, que signifient réellement les fermetures ? Avant de plonger dans les fermetures, comprendre les fonctions de première classe est bénéfique, car cela fournit des connaissances fondamentales qui vous aident à comprendre le fonctionnement des fermetures.

Concepts clés à connaître en premier :

1. Fonctions de première classe : Fonctions qui peuvent être affectées à des variables, passées en argument et renvoyées par les fonctions.
2. Portée de la fonction : Les fonctions peuvent accéder aux variables depuis leur propre portée et depuis la portée (externe) environnante.
3. Contexte d'exécution : Chaque fois qu'une fonction est invoquée, un nouveau contexte d'exécution est créé. Cela inclut l'environnement variable et la chaîne de portée.

En général, les variables créées dans une fonction sont limitées à cette fonction et sont détruites immédiatement après la fin de l'exécution de la fonction. Par exemple, considérons une fonction nommée premiumContentAccess qui contient deux variables : articlesAllowedToAccess et currentlyAccessed.

function premiumContentAccess() {
  let articlesAllowedToAccess = 3;
  let currentlyAccessed = 0;
}

premiumContentAccess();

Lorsque premiumContentAccess est exécuté, les variables locales articlesAllowedToAccess et currentlyAccessed sont créées. Une fois l'exécution de la fonction terminée, ces variables sortent de la portée et sont éligibles au garbage collection, ce qui signifie qu'elles sont effectivement détruites et ne sont plus accessibles par la suite.

Est-il possible de conserver l'accès à ces variables même après l'exécution de premiumContentAccess ? Voici la clôture.

Qu'est-ce que la fermeture ?

Une fermeture est formée lorsqu'une fonction est renvoyée et a accès à ses variables environnantes (externes). Ces références de variables sont regroupées avec la fonction, ce qui leur permet de persister.

function premiumContentAccess() {
  let articlesAllowedToAccess = 3;
  let currentlyAccessed = 0;  

  function accessArticle() {
    if (currentlyAccessed >= articlesAllowedToAccess) {
      return 'Premium Article Access Reached';
    }
    currentlyAccessed++;
    return 'Article accessed';
  }
  return accessArticle;
}

let accessArticle = premiumContentAccess();

console.log(accessArticle()); // Outputs: Article accessed
console.log(accessArticle()); // Outputs: Article accessed
console.log(accessArticle()); // Outputs: Article accessed
console.log(accessArticle()); // Outputs: Premium Article Access Reached

Décomposition de l'exemple

1. Fonction externe : premiumContentAccess() est la fonction externe qui définit les variables articlesAllowedToAccess et currentlyAccessed.
2. Fonction interne : accessArticle est la fonction interne qui accède aux variables à partir de sa portée lexicale, qui est définie dans la fonction externe.
3. Fermeture : Lorsque premiumContentAccess() est appelé, il renvoie la fonction accessArticle conservant l'accès aux variables articlesAllowedToAccess et currentlyAccessed, même après la fin de l'exécution de la fonction externe.
4. Rétention de l'état : La fermeture permet à accessArticle de maintenir son propre état concernant le nombre d'articles consultés. Chaque appel à accessArticle modifie actuellementAccessed, qui est conservé du fait de la fermeture.

Toutes les fonctions sont des fermetures :

Comme nous l'avons mentionné au début, toutes les fonctions sont naturellement des fermetures.

C'est-à-dire : ils conservent automatiquement une référence à leur contexte de création via une propriété [[Environnement]] cachée, permettant à leur code d'accéder aux variables externes.

Exception : Les fonctions créées à l'aide du nouveau constructeur Function définissent le [[Environnement]] sur le contexte global au lieu du contexte de création.

---

Merci d'avoir lu ! J'espère que vous avez trouvé ce blog informatif et engageant. Si vous remarquez des inexactitudes ou avez des commentaires, n'hésitez pas à me le faire savoir.

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!