Pourquoi utiliser `var that = this;` dans les fonctions imbriquées JavaScript ?

Qu'est-ce que le 'var that = this;' Syntaxe Accomplish en JavaScript ?

En JavaScript, il est courant de rencontrer des blocs de code similaires aux suivants :

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

Cette syntaxe attribue la valeur de this à une variable nommée that . Le but de cet idiome est de conserver une référence au contexte correct dans les fonctions imbriquées.

Pour illustrer la nécessité de cela, considérons l'exemple suivant :

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 la fonction anonyme passé à forEach, le mot-clé this ne fait plus référence à l'élément cliqué car sa portée a changé. Attribuer ceci à cela nous permet de conserver la référence souhaitée dans la fonction imbriquée.

$('#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
    });
});

En pratique, il est avantageux d'utiliser un alias plus descriptif pour améliorer la lisibilité du code. Par exemple, dans les exemples ci-dessus, clickedEl serait un choix plus approprié.

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!