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

„var that = this;“ verstehen in JavaScript

In JavaScript repräsentiert das Schlüsselwort „this“ das aktuelle Objekt. Durch die Zuweisung von „this“ zu „var that“ können Entwickler einen Verweis auf die ursprüngliche Objektreferenz beibehalten, auf den später zugegriffen werden kann, auch innerhalb verschachtelter Funktionen, in denen sich „this“ ändern kann.

Beachten Sie den folgenden Codeausschnitt:

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

Hier stellt die Zuweisung von „this“ zu „that“ sicher, dass sich „that“ innerhalb des „Somefunction“-Bereichs immer auf die ursprüngliche Objektinstanz bezieht. Dies ist von Vorteil, wenn Sie mit Abschlüssen oder Ereignishandlern arbeiten, bei denen sich die „this“-Referenz nach dem Aufruf einer verschachtelten Funktion ändern kann.

Zur Veranschaulichung: Angenommen, Sie haben eine Funktion, die auf ein „click“-Ereignis für ein Element wartet:

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

Im Event-Handler bezieht sich „this“ auf das Element, auf das geklickt wurde, aber innerhalb der inneren „forEach“-Funktion wird „this“ undefiniert. Indem Sie es mit „that“ aliasen, können Sie immer noch auf den ursprünglichen Verweis auf das angeklickte Element zugreifen.

Zusammenfassend: „var that = this;“ stellt sicher, dass ein konsistenter Verweis auf das aktuelle Objekt beibehalten wird, was es besonders nützlich in Ereignisbehandlungs- oder Abschlussszenarien macht, in denen sich „dies“ dynamisch ändern kann. Erwägen Sie jedoch aus Gründen der Klarheit die Verwendung eines aussagekräftigeren Alias, z. B. „clickedEl“ oder „currentElement“, um die Codeabsicht deutlicher zu machen.

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