Pourquoi utiliser 'var that = this;' en Javascript ?

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 » au sein des 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 à 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.

Considérez 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 vous avez 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.

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!