Comprendre le but de "var that = this;" en JavaScript

Lorsque vous travaillez avec JavaScript, vous pouvez rencontrer des extraits de code qui incluent l'instruction "var that = this;". Cette construction joue un rôle crucial dans la préservation du contexte de « this » dans les fonctions imbriquées, en particulier dans les gestionnaires d'événements.

En JavaScript, le mot-clé « this » représente le contexte actuel ou l'objet qui possède le code qu'il utilise. in. Cependant, lorsqu'une fonction est invoquée dans une autre fonction, la valeur de "this" change. Cela peut conduire à un comportement inattendu, en particulier dans le code piloté par les événements où les gestionnaires d'événements résident dans les rappels.

Le but de l'attribution de « ceci » à « cela » est de capturer le contexte actuel de l'objet avant qu'il ne soit perdu en raison de à un changement de périmètre. En créant un alias de « ceci » en « cela », vous garantissez que la valeur d'origine de « ceci » reste accessible même dans les fonctions imbriquées.

Prenons l'exemple suivant :

$('#element').click(function() {
    // this is a reference to the element clicked on

    var that = this;

    $('.elements').each(function() {
        // this is a reference to the current element in the loop
        // that is still a reference to the element clicked on
    });
});

Dans ce code, la fonction de gestionnaire d'événements a accès à l'élément sur lequel on a cliqué via le mot-clé "this". Cependant, dans la fonction imbriquée (each()), la valeur de « this » fait référence à l'élément actuel dans la boucle. En capturant « ceci » comme « cela » dans la fonction externe, vous pouvez toujours accéder à l'élément sur lequel vous avez initialement cliqué.

L'utilisation d'alias autres que « cela » est une pratique recommandée pour des raisons de lisibilité. Dans l'exemple ci-dessus, un alias plus descriptif tel que "clickedEl" indiquerait plus clairement à quoi la variable fait référence.

En conclusion, "var that = this;" est une technique courante en JavaScript pour préserver la valeur de « ceci » dans différentes portées. Il garantit que le contexte d'origine de l'objet est conservé même lorsque des fonctions imbriquées sont invoquées.