Que signifie 'var that = this;' en JavaScript?

Question

Dans un fichier JavaScript, j'ai vu :

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

Quel est le but de déclarer that et d'assigner this à celui-ci ?

Answer 1

Voici un exemple

$(document).ready(function() {
        var lastItem = null;
        $(".our-work-group > p > a").click(function(e) {
            e.preventDefault();

            var item = $(this).html(); //Ici, la valeur de "this" est ".our-work-group > p > a"
            if (item == lastItem) {
                lastItem = null;
                $('.our-work-single-page').show();
            } else {
                lastItem = item;
                $('.our-work-single-page').each(function() {
                    var imgAlt = $(this).find('img').attr('alt'); //Ici, la valeur de "this" est '.our-work-single-page'. 
                    if (imgAlt != item) {
                        $(this).hide();
                    } else {
                        $(this).show();
                    }
                });
            }

        });
    });

Donc, vous pouvez voir que la valeur de "this" est deux valeurs différentes en fonction de l'élément DOM ciblé, mais lorsque vous ajoutez "celui-ci" au code ci-dessus, vous modifiez la valeur de "this" que vous ciblez.

$(document).ready(function() {
        var lastItem = null;
        $(".our-work-group > p > a").click(function(e) {
            e.preventDefault();
            var item = $(this).html(); //Ici, la valeur de "this" est ".our-work-group > p > a"
            if (item == lastItem) {
                lastItem = null;
                var that = this;
                $('.our-work-single-page').show();
            } else {
                lastItem = item;
                $('.our-work-single-page').each(function() {
                   ***$(that).css("background-color", "#ffe700");*** //Ici, la valeur de "that" est ".our-work-group > p > a"....
                    var imgAlt = $(this).find('img').attr('alt'); 
                    if (imgAlt != item) {
                        $(this).hide();
                    } else {
                        $(this).show();
                    }
                });
            }

        });
    });

.....$(that).css("background-color", "#ffe700"); //Ici, la valeur de "that" est ".our-work-group > p > a" car la valeur de var that = this; donc même si nous sommes sur "this" = '.our-work-single-page', nous pouvons toujours utiliser "that" pour manipuler l'élément DOM précédent.

Answer 2

Juste considérez:

var self = this;

"Self" est un nom très commun pour cela.