En JavaScript, les closures sont un mécanisme fondamental permettant à une fonction d'accéder aux variables de sa portée externe, même après l'exécution de cette fonction externe. Pour maîtriser ce concept, il est crucial de saisir plusieurs principes sous-jacents.

Fondamentaux

Chaîne de portée : La portée en JavaScript est déterminée de manière lexicale (statique), ce qui signifie qu'elle est fixée lors de la définition de la fonction. La création d'une fonction engendre une chaîne de portée incluant sa propre portée et celles des fonctions englobantes.

Fonctions imbriquées : Les fonctions peuvent être définies à l'intérieur d'autres fonctions. Une fonction interne peut accéder aux variables de sa fonction parente.

Références externes : Lorsqu'une fonction interne fait référence à des variables de sa fonction externe, ces variables sont retenues dans une closure, garantissant leur accessibilité ultérieure.

Visibilité des variables

Par défaut, une variable locale à une portée interne est inaccessible depuis l'extérieur. Illustration :

function initialise() {
    let secret = 123;
}
initialise();
console.log(secret); // Erreur : secret n'est pas défini

Les closures offrent une solution à cette limitation.

Exposition des variables locales

Pour récupérer une variable locale d'une fonction parente, on peut retourner une fonction enfant qui la référence :

function fonctionParente() {
    let compteur = 0;
    function fonctionEnfant() {
        compteur++;
        console.log(compteur);
    }
    return fonctionEnfant;
}
let incrementer = fonctionParente();
incrementer(); // Affiche 1
incrementer(); // Affiche 2

Applications courantes

Les closures apparaissent dans de nombreux scénarios, notamment lors du passage de fonctions en argument. Exemple :

function appliquerTraitement(callback) {
    callback();
}
function usine() {
    let statut = "actif";
    function action() {
        console.log("Statut : " + statut);
    }
    appliquerTraitement(action);
}

Elles sont également omniprésentes dans les fonctions asynchrones comme setTimeout, ainsi que dans des patterns tels que le debounce et le throttle.

Considérations

Les closures peuvent entraîner une consommation mémoire importante puisque les variables sont conservées indéfiniment. Il est recommandé de libérer explicitement les ressources inutilisées. De plus, lors de l'utilisation avec this, la capture du contexte requiert une attention particulière pour éviter des comportements inattendus.

Cas pratique avec le contexte

Examinons un exemple impliquant this et les closures :

var identifiant = "Alice";
var objet = {
    identifiant : "Bob",
    obtenirIdentifiant : function() {
        var reference = this;
        return function() {
            return reference.identifiant;
        };
    }
};
console.log(objet.obtenirIdentifiant()()); // Affiche "Bob"

Ici, la closure capture la référence reference pointant vers l'objet, permettant d'accéder à sa propriété identifiant de manière fiable.