Heim >Web-Frontend >js-Tutorial >Warum „var that = this;' in verschachtelten JavaScript-Funktionen verwenden?

Warum „var that = this;' in verschachtelten JavaScript-Funktionen verwenden?

Barbara Streisand
Barbara StreisandOriginal
2024-12-02 10:51:11272Durchsuche

Why Use `var that = this;` in JavaScript Nested Functions?

Was bedeutet „var that = this;“ Syntax in JavaScript erfüllen?

In JavaScript stößt man häufig auf Codeblöcke, die den folgenden ähneln:

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

Diese Syntax weist den Wert von this einer Variablen mit dem Namen that zu . Der Zweck dieser Redewendung besteht darin, innerhalb verschachtelter Funktionen einen Verweis auf den richtigen Kontext beizubehalten.

Um die Notwendigkeit dafür zu veranschaulichen, betrachten Sie das folgende Beispiel:

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
    });
});

Innerhalb der anonymen Funktion Wenn das Schlüsselwort this an forEach übergeben wird, verweist es nicht mehr auf das angeklickte Element, da sich sein Gültigkeitsbereich geändert hat. Wenn wir dies zuweisen, können wir die gewünschte Referenz innerhalb der verschachtelten Funktion beibehalten.

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

In der Praxis ist es von Vorteil, dafür einen aussagekräftigeren Alias ​​zu verwenden, um die Lesbarkeit des Codes zu verbessern. In den obigen Beispielen wäre clickedEl beispielsweise die passendere Wahl.

Das obige ist der detaillierte Inhalt vonWarum „var that = this;' in verschachtelten JavaScript-Funktionen verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn