Pourquoi utiliser `var that = this;` en JavaScript ?

Comprendre 'var that = this;' en JavaScript

En JavaScript, le mot-clé 'this' représente l'objet actuel. L'attribution de « ceci » à « var that » permet aux développeurs de conserver une référence à la référence d'objet d'origine, accessible ultérieurement, même dans les fonctions imbriquées où « ceci » peut changer.

Considérez l'extrait de code suivant :

function Somefunction(){
   var that = this; 
   ... 
}

Ici, attribuer « ceci » à « cela » garantit que dans la portée « Somefunction », « cela » fait toujours référence à l'original. instance d'objet. Ceci est utile lorsque vous travaillez avec des fermetures ou des gestionnaires d'événements où la référence « this » peut changer après l'appel d'une fonction imbriquée.

Pour illustrer, supposons que vous ayez une fonction qui écoute un événement « clic » sur un élément :

var colours = ['red', 'green', 'blue'];
document.getElementById('element').addEventListener('click', function() {
    // this is a reference to the element clicked on

    var that = this;

    colours.forEach(function() {
        // this is undefined
        // that is a reference to the element clicked on
    });
});

Dans le gestionnaire d'événements, « this » fait référence à l'élément sur lequel on a cliqué, mais à l'intérieur de la fonction interne « forEach », « this » devient indéfini. En l'aliasant sur « cela », vous pouvez toujours accéder à la référence originale à l'élément cliqué.

En conclusion, « var that = this ; » garantit qu'une référence cohérente à l'objet actuel est conservée, ce qui la rend particulièrement utile dans les scénarios de gestion d'événements ou de fermeture où « ceci » peut changer dynamiquement. Cependant, envisagez d'utiliser un alias plus descriptif pour plus de clarté, tel que « clickedEl » ou « currentElement », pour rendre l'intention du code plus évidente.

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!