Was bedeutet 'var that = this;' in JavaScript?

Question

In einer JavaScript-Datei habe ich gesehen:

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

Was ist der Zweck der Erklärung von that und die Zuweisung this dies zu tun?

Answer 1

H `

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

            var item = $(this).html(); //Here value of "this" is ".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'); //Here value of "this" is '.our-work-single-page'. 
                    if (imgAlt != item) {
                        $(this).hide();
                    } else {
                        $(this).show();
                    }
                });
            }

        });
    });`

Sie können also sehen, dass der Wert von "this" je nach DOM-Element, auf das Sie abzielen, zwei verschiedene Werte hat, aber wenn Sie dem obigen Code "that" hinzufügen, ändern Sie den Wert von "this", auf den Sie abzielen.

`$(document).ready(function() {
        var lastItem = null;
        $(".our-work-group > p > a").click(function(e) {
            e.preventDefault();
            var item = $(this).html(); //Here value of "this" is ".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");*** //Here value of "that" is ".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"); //Hier ist der Wert von "that" ".our-work-group > p > a", weil der Wert von var that = this; also auch wenn wir bei "this"= '.our-work-single-page' sind, können wir dennoch "that" verwenden, um das vorherige DOM-Element zu manipulieren.