Die Methoden zur korrekten Verarbeitung dieses Zeigens in JavaScript -Verschlusssachen umfassen: 1. Verwenden Sie Pfeilfunktionen. Diese Methoden stellen sicher, dass diese intrinsische Funktion korrekt auf den Kontext der externen Funktion zeigt.

Einführung

Heute werden wir ein Problem diskutieren, das in der JavaScript -Entwicklung oft problematisch ist: wie man this Hinweis in Schlie?ungen korrekt behandelt. Ich wei?, dass viele Entwickler oft verwirrt sind, wenn sie mit diesem Problem konfrontiert sind, aber keine Sorge, ich werde Sie mitnehmen, um diese mysteri?se Schritte Schritt für Schritt zu l?sen. In diesem Artikel lernen Sie, wie Sie this Hinweis in Verschlüssen flexibel kontrollieren und einige praktische Tipps und Best Practices beherrschen.

überprüfung des Grundwissens

In JavaScript ist this ein ganz spezielles Schlüsselwort, und sein Zeigen wird je nach Kontexten variieren. Wenn wir über Schlie?ungen sprechen, wird this Zeigeproblem besonders kompliziert. Ein Verschluss ist eine Funktion, die die Erlaubnis hat, in einem anderen Funktionsbereich auf Variablen zuzugreifen, die normalerweise durch Definieren einer anderen Funktion innerhalb der Funktion implementiert werden.

Lassen Sie uns vor dem Diskussion this Zeigs das grundlegende Verhalten this überprüfen:

• In einer globalen Umgebung zeigt this auf ein globales Objekt ( window im Browser und global in Node.js).
• Wenn Sie eine Funktion aufrufen, h?ngt die Richtung this von der Methode zum Aufrufen der Funktion ab, z. B. Direktaufruf, aufrufen Objektmethode, Anruf mit call oder apply Methode usw.

Nachdem wir diese Grundlagen verstanden haben, k?nnen wir detaillierter erforschen, wie man this in Schlie?ungen richtig umgeht.

Kernkonzept oder Funktionsanalyse

this Zeigenproblem im Verschluss

In der Schlie?ung liegt das Problem, auf das this hinweist, haupts?chlich daran, dass this der inneren Funktion nicht mit this der ?u?eren Funktion synchronisiert ist. Schauen wir uns ein einfaches Beispiel an:

Funktion oterfunction () {
    this.name = '?u?ere';
    Funktion Innerfunction () {
        console.log (this.name); // worauf zeigt dieser hier?
    }
    Innerfunktion ();
}
<p>const obj = {
Name: 'Objekt'
};</p><p> ?u?ere Funktion.Call (OBJ); // Ausgabe: undefiniert</p>

In diesem Beispiel weist this in innerFunction auf ein globales Objekt hin, nicht this der outerFunction . Dies liegt daran, dass this im Nichtstreifenmodus standardm??ig in der internen Funktion auf das globale Objekt zeigt.

L?sung

Um this Zeiger in einem Verschluss richtig zu behandeln, k?nnen wir die folgenden Methoden verwenden:

Verwenden Sie Pfeilfunktionen

Ein wichtiges Merkmal der Pfeilfunktionen ist, dass sie this nicht selbst haben, sondern this des ?u?eren Bereichs erben. Dies macht die Pfeilfunktion in Verschlüssen sehr nützlich:

Funktion oterfunction () {
    this.name = '?u?ere';
    const Innerfunction = () => {
        console.log (this.name); // Dies zeigt hier auf das der ?u?eren Funktion
    };
    Innerfunktion ();
}
<p>const obj = {
Name: 'Objekt'
};</p><p> ?u?ere Funktion.Call (OBJ); // Ausgabe: ?u?ere</p>

Verwenden Sie die bind

Mit der bind -Methode k?nnen wir eine neue Funktion erstellen, deren this an den angegebenen Wert gebunden ist:

Funktion oterfunction () {
    this.name = '?u?ere';
    Funktion Innerfunction () {
        console.log (this.name);
    }
    Innerfunktion.bind (this) ();
}
<p>const obj = {
Name: 'Objekt'
};</p><p> ?u?ere Funktion.Call (OBJ); // Ausgabe: ?u?ere</p>

Speichern Sie this mit Variablen

Eine weitere h?ufige Methode besteht darin, this aus einer externen Funktion in eine Variable zu speichern und diese Variable in der internen Funktion zu verwenden:

Funktion oterfunction () {
    this.name = '?u?ere';
    const self = this;
    Funktion Innerfunction () {
        console.log (self.name);
    }
    Innerfunktion ();
}
<p>const obj = {
Name: 'Objekt'
};</p><p> ?u?ere Funktion.Call (OBJ); // Ausgabe: ?u?ere</p>

Beispiel für die Nutzung

Grundnutzung

Schauen wir uns ein Beispiel für eine praktische Anwendung an und nehmen wir an, wir m?chten eine Gegenklasse erstellen, bei der eine Methode im Verschluss verwendet wird:

Klassenz?hler {
    constructor () {
        this.count = 0;
    }
<pre class='brush:php;toolbar:false;'>Increment () {
    setTimeout (() => {
        this.count;
        console.log (this.count);
    }, 1000);
}

}

const counter = neuer counter (); counter.increment (); // Ausgabe nach 1 Sekunde: 1

In diesem Beispiel verwenden wir die Pfeilfunktion, um sicherzustellen, dass this auf Counter Z?hlerinstanz zeigt.

Erweiterte Verwendung

In komplexeren Szenarien müssen wir m?glicherweise die Richtung des this dynamisch ver?ndern. Nehmen wir beispielsweise an, wir haben eine Schaltfl?che Klicken Sie auf Ereignishandler und m?chten den Status eines Objekts aktualisieren, wenn Sie klicken:

Klasse ButtonHandler {
    Konstruktor (Taste) {
        this.button = button;
        this.clicks = 0;
        this.button.addeventListener ('klick', this.handleclick.bind (this));
    }
<pre class='brush:php;toolbar:false;'>Handleclick () {
    this.clicks;
    console.log (`button klickte $ {this.clicks} Times`);
}

}

const button = document.getElementById ('myButton'); const handler = neuer buttonHandler (button);

In diesem Beispiel verwenden wir die bind -Methode, um sicherzustellen, this in der handleClick -Methode auf ButtonHandler -Instanz zeigt.

H?ufige Fehler und Debugging -Tipps

H?ufige Fehler beim Umgang mit this Zeiger in Schlie?ungen umfassen:

• Ich habe vergessen, Pfeilfunktionen zu verwenden oder Methoden bind , was dazu führt, dass this auf das globale Objekt hinweist.
• Im strengen Modus wird this in der internen Funktion anstelle eines globalen Objekts undefined .

Debugging -Tipps:

• Verwenden Sie console.log(this) , um this Wert an verschiedenen Orten auszugeben, um Ihnen zu helfen, das Zeigen this zu verstehen.
• Verwenden Sie das Breakpoint -Debugging in Entwicklungswerkzeugen, um ?nderungen in this allm?hlich zu verfolgen.

Leistungsoptimierung und Best Practices

Es gibt mehrere Best Practices, die es wert sind, sich mit this Zeiger in Schlie?ungen zu befassen:

• Verwenden Sie Pfeilfunktionen : Pfeilfunktionen k?nnen this Zeigeproblem nicht nur l?sen, sondern auch den Code pr?gnanter machen.
• Vermeiden Sie eine überbeanspruchung von bind : Obwohl die bind funktioniert, erh?ht überbeanspruchung den Speicherverbrauch, da mit jedem Aufruf eine neue Funktion erstellt wird.
• Halten Sie Ihren Code lesbar : Stellen Sie bei der Verwendung von Schlie?ungen sicher, dass Ihr Code strukturiert und gut gef?rdert ist, damit andere Entwickler Ihre Absichten leicht verstehen k?nnen.

Leistungsvergleich

Vergleichen wir die Leistung verschiedener Methoden:

Funktion testarrowfunction () {
    const obj = {
        Name: 'Test'
    };
    const func = () => {
        console.log (this.name);
    };
    für (sei i = 0; i <1000000; i) {
        func.call (obj);
    }
}
<p>Funktion testbindMethod () {
const obj = {
Name: &#39;Test&#39;
};
Funktion func () {
console.log (this.name);
}
const bandfunc = func.bind (obj);
für (sei i = 0; i <1000000; i) {
boundfunc ();
}
}</p><p> Funktion testvariablemethod () {
const obj = {
Name: &#39;Test&#39;
};
Funktion func () {
const self = this;
return function () {
console.log (self.name);
};
}
const innerfunc = func.call (obj);
für (sei i = 0; i <1000000; i) {
Innerfunc ();
}
}</p><p> console.time (&#39;Pfeilfunktion&#39;);
testArrowfunction ();
console.timeend (&#39;Pfeilfunktion&#39;);</p><p> console.time (&#39;Bind -Methode&#39;);
testbindMethod ();
console.timeend (&#39;Bind -Methode&#39;);</p><p> console.time (&#39;variable Methode&#39;);
testVariablemethod ();
console.timeend (&#39;variable Methode&#39;);</p>

Führen Sie diesen Code aus und Sie werden feststellen, dass die Leistung der Pfeilfunktion normalerweise die beste ist, da keine neuen Funktionsinstanzen erstellt werden müssen.

Auf Grubenpunkte treten und tief denken

Bei this Zeiger in Schlie?ungen gibt es mehrere gemeinsame Fallstricke:

• Einschr?nkungen der Pfeilfunktionen : Pfeilfunktionen k?nnen nicht als Konstruktoren verwendet werden, da sie this nicht selbst haben. In Szenarien, in denen Konstruktoren erforderlich sind, müssen Sie herk?mmliche Funktionsdefinitionen verwenden.
• Overhead of bind -Methode : Obwohl die bind this Zeigeproblem effektiv l?sen kann, werden eine neue Funktionsinstanz erstellt, die m?glicherweise ein Problem bei leistungsempfindlichen Anwendungen darstellt.
• Variablen speichern this Komplexit?t : Dieser Ansatz kann zwar effektiv zu einer Abnahme der Code -Lesbarkeit im komplexen Code führen, als zus?tzliches Verst?ndnis der Rolle von Variablen wie self oder that .

Denken Sie tief nach:

• Auswahl der Entwurfsmuster : Wenn Sie Code entwerfen, sollten Sie Entwurfsmuster wie Modulmuster oder sofortige Ausführung von Funktionsausdrücken (IIFEs) verwenden, die Ihnen helfen k?nnen, den Umfang und this Zeigungsausdruck besser zu verwalten.
• Auswirkungen des strengen Modus : Im strengen Modus variiert this Standardverhalten, und das Verst?ndnis dieser Unterschiede kann Ihnen helfen, robusteren Code zu schreiben.
• Funktionslehrplatte : In einigen F?llen kann die Funktionskurrierung bei der Funktion this Zeigen besser verwalten und gleichzeitig die Wiederverwendbarkeit und Flexibilit?t der Code verbessern.

Mit diesen Methoden und Techniken k?nnen Sie this Hinweise in Verschlüsse flexibel steuern und effizienter und einfacher schreiben, um den JavaScript -Code aufrechtzuerhalten. Ich hoffe, dieser Artikel kann Ihnen helfen, this Zeigeproblem bei Schlie?ungen besser zu verstehen und zu l?sen.

Das obige ist der detaillierte Inhalt vonWie kann man mit diesem Zeigen in einem Verschluss korrekt umgehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!