Maîtriser les fermetures en JavaScript : comprendre la portée, l'encapsulation et les performances

Fermeture

Définition

La fermeture est une fonctionnalité qui permet aux fonctions d'accéder à toutes les autres variables et fonctions qui sont déclarées dans le même niveau de portée (portée lexicale).

• La fermeture est une fonctionnalité qui permet aux fonctions d'accéder à toutes les autres variables et fonctions qui sont déclarées dans le même niveau de portée (portée lexicale).
• La fermeture sera créée lorsqu'une fonction est définie dans une autre fonction (fonction externe et fonction interne). La fonction interne créera une fermeture qui donne accès à la fonction interne à toutes les variables et fonctions créées dans cette fonction externe.
• Les fermetures permettent à la fonction interne d'accéder aux variables déclarées dans la fonction externe, même après le retour de la fonction externe.
• Nous devons gérer la mémoire correctement, la fermeture peut entraîner à la fois une fuite de mémoire et une meilleure gestion de la mémoire.

• Les fermetures en JavaScript ont un objectif similaire aux méthodes privées en Java en vous permettant de créer des variables privées et d'encapsuler des fonctionnalités.

  Exemple

  function outerFunction() {
      let outerVariable = 'I am from outer scope';
  
      function innerFunction() {
          console.log(outerVariable); // Accessing outerVariable from the outer scope
      }
  
      return innerFunction; // Return the inner function
  }
  
  const closureFunction = outerFunction(); // Call outerFunction, which returns innerFunction
  closureFunction(); // Outputs: I am from outer scope
  

  • Voir dans l'exemple ci-dessus, nous appelons la fonction interne uniquement parce qu'elle est uniquement renvoyée. Même si nous avons accès à externalVariable.
  • Voyons un autre meilleur exemple

      function handleCount() {
      let count = 0;
  
      return {
          increment: () => {
                  count++;
                  return count;
          },
          decrement: () => {
                  count--;
                  return count;
          },
          getCount: () => {
                  return count;
          },
      };
  }
  
  const counter = handleCount();
  console.log(counter.increment()); // Outputs: 1
  console.log(counter.increment()); // Outputs: 2
  console.log(counter.getCount());  // Outputs: 2
  console.log(counter.decrement()); // Outputs: 1
  console.log(counter.getCount());  // Outputs: 1
  

  • Maintenant, à chaque fois que nous appelons incrément, décrément, getCount et non handleCount sera lancé, seule la fonction appelée sera exécutée mais nous avons également accès aux variables en dehors de sa portée. C'est ce qu'on appelle la clôture.

Points clés à retenir

• Définition : Une fermeture est une fonction qui conserve l'accès à sa portée lexicale, même lorsque la fonction est exécutée en dehors de cette portée.
• Scope Chain : les fermetures sont créées lorsqu'une fonction est définie dans une autre fonction. La fonction interne forme une fermeture qui inclut la portée de la fonction externe.
• Accès aux variables : Les fermetures permettent à la fonction interne d'accéder aux variables déclarées dans la fonction externe, même après le retour de la fonction externe.
• Variables privées : les fermetures sont souvent utilisées pour créer des variables privées. Cela signifie que les variables peuvent être masquées de la portée globale et accessibles uniquement via la fermeture.
• Gestion de la mémoire : les fermetures peuvent conduire à une meilleure efficacité de la mémoire, car elles conservent uniquement les variables nécessaires à l'exécution.
• Considérations relatives aux performances : bien que les fermetures soient puissantes, elles peuvent également entraîner des fuites de mémoire si elles ne sont pas gérées correctement, en particulier dans les objets à longue durée de vie ou les écouteurs d'événements.

Cas d'utilisation

• Encapsulation : Pour créer des données ou des méthodes privées.
• Usines de Fonctions : Pour créer des fonctions avec des paramètres prédéfinis.
• Rappels : pour la programmation asynchrone (comme dans les gestionnaires d'événements ou setTimeout).
• CSS : rem et em. rem est dérivé de l'élément racine (html / body) mais em est dérivé de son parent proche.

Questions d'entretien courantes

• Qu'est-ce qu'une fermeture et comment ça marche ?
• Pouvez-vous expliquer la différence entre une fermeture et une fonction régulière ?
• Fournissez un exemple de fermeture en JavaScript.
• Quels sont les cas d’utilisation des fermetures en JavaScript ?
• Comment les fermetures peuvent-elles entraîner des fuites de mémoire et comment pouvez-vous les éviter ?

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!