Wie greife ich im Rückruf auf das richtige „this' zu?
In diesem Tutorial erfahren Sie, wie Sie im Callback auf das richtige „this“ zugreifen.
Schlüsselwort „dieses“
Jede Funktion enthält ein Schlüsselwort namens this, auch „Kontext“ genannt, dessen Wert dadurch bestimmt wird, wie die Funktion aufgerufen wird, nicht dadurch, wie, wann oder wo die Funktion definiert ist. Im Gegensatz zu anderen Variablen wird sie nicht vom lexikalischen Gültigkeitsbereich beeinflusst. Im Vergleich zu anderen Sprachen verhält sich JavaScript etwas anders, wenn das Schlüsselwort „this“ einer Funktion verwendet wird. Es gibt einige weitere Änderungen zwischen dem strikten und dem nicht strikten Modus.
Die Art und Weise, wie die Funktion am häufigsten aufgerufen wird, bestimmt den Wert von „this“ (Laufzeitbindung). Sie kann sich bei jedem Aufruf der Funktion ändern und kann nicht durch Zuweisung zur Ausführungszeit geändert werden. Wie oft die Funktion aufgerufen wird, kann die Methode bind() diesen Wert festlegen, da Pfeilfunktionen keine eigene „this“-Bindung bereitstellen (sie behält den „this“-Wert des umschließenden lexikalischen Kontexts bei).
Was ist ein Rückruf?
Eine Funktion, die Parameter von einer anderen Funktion empfängt, wird Callback genannt und wird normalerweise später in einer externen Funktion verwendet. Unter Funktion höherer Ordnung versteht man externe Funktionen, die Rückrufe akzeptieren.
Callbacks haben ihre eigenen Methoden und Eigenschaften, da Funktionen Objekte in JavaScript sind. Das „this“-Attribut, das einem Rückruf zugewiesen wird, wenn er in einer Funktion höherer Ordnung ausgeführt wird, hängt vollständig davon ab, wie der Rückruf durchgeführt wird, nicht davon, wo, wie oder wann er definiert wird.
Indem wir die Funktion höherer Ordnung untersuchen, die den Rückruf aufruft, können wir den „this“-Wert im Rückruf ermitteln. Die tatsächliche Definition der einschließenden Funktion kann lokal gültige Eigenschaften enthalten, was die Hauptursache für diese Probleme bei Rückrufen ist. Da sich der Kontext des Rückrufs jedoch je nach Aufruf dynamisch ändert, ist die Eigenschaft nicht vorhanden, wenn über die „this“-Bindung im Rückruf auf sie zugegriffen wird.
Jetzt lernen wir, wie wir im Callback auf das richtige „this“ zugreifen.
Verwenden Sie den „Selbst“-Modus
Das Erstellen einer Variablen namens self und das Zuweisen dieses Werts im Rahmen der deklarierten Funktion ist ein typisches Muster. Wir können das gewünschte Verhalten erreichen, indem wir eine neue Variable namens self erstellen (oder jeder andere gültige Variablenname reicht aus) und ihr den Wert „this“ geben.
Beispiel
<html>
<body>
<h2 id="this-Inside-a-Callback-using-the-i-self-pattern-i"> 'this' Inside a Callback using the <i> 'self' pattern </i> </h2>
<button onclick="myFunction()"> Click here </button>
<div id="root" style="
background-color: rgb(240, 248, 255);
border: 1px solid gray;
margin: 5px 0px;
padding: 10px;
">
Welcome to Tutorialspoint!
</div>
<script>
const root = document.getElementById('root')
function myFunction() {
this.variable = 'I am this variable'
const variable = 'I am a const variable'
const self = this
setTimeout(() => {
root.innerHTML = this.variable + '<br/>'
root.innerHTML += variable
}, 1000)
}
</script>
</body>
</html>
Pfeilfunktionen verwenden
ECMAScript 6 erlebt das Debüt von JavaScript-Pfeilfunktionen. Sie haben keine eigenen Bindungen und sind eine sauberere Alternative zu herkömmlichen Funktionsausdrücken. Dies stellt sicher, dass, wenn innerhalb einer Pfeilfunktion darauf verwiesen wird, es im Gültigkeitsbereich als reguläre Variable durchsucht wird.
Beispiel
<html>
<body>
<h2 id="this-Inside-a-Callback-using-the-i-arrow-function-i"> 'this' Inside a Callback using the <i> arrow function </i> </h2>
<button onclick="myFunction('ABC')"> Click here </button>
<div id="root" style="
background-color: rgb(240, 248, 255);
border: 1px solid gray;
margin: 5px 0px;
padding: 10px;
">
Welcome to Tutorialspoint!
</div>
<script>
const root = document.getElementById('root')
function myFunction(name) {
this.name = name
let obj = {
run: function(callback) {
setTimeout(callback, 1000)
},
}
obj.run(() => {
root.innerHTML = this.name
})
}
</script>
</body>
</html>
Verwenden Sie eine andere Variable, um das „dieses“ Objekt zu speichern
Das Objekt ist damit verknüpft. Dies ist normalerweise das Objekt, auf das wir tatsächlich zugreifen möchten, wenn wir versuchen, im Rückruf darauf zuzugreifen. Das Erstellen einer Variablen und das Speichern ihres Werts vor dem Callback-Bereich ist eine Möglichkeit, dies zu erreichen (obwohl einige Programmierer davor zurückschrecken, dies zu tun, weil es verwirrend aussieht).
Manche Leute bezeichnen es als „das“ oder „selbst“, aber solange die Terminologie klar ist, spielt es keine Rolle. Diese Problemumgehung funktioniert hervorragend, da die Variable die Anforderungen des lexikalischen Bereichs erfüllt und daher im Rückruf verwendet werden kann. Sie haben weiterhin Zugriff auf die Dynamik des Rückrufs dieser Bindung, was ein weiterer Vorteil dieses Ansatzes ist.
Beispiel
<html>
<body>
<h2>
'this' Inside a Callback using the
<i> another variable to store the 'this' object </i>
</h2>
<button onclick="myFunction('XYZ')"> Click here </button>
<div id="root" style="
background-color: rgb(240, 248, 255);
border: 1px solid gray;
margin: 5px 0px;
padding: 10px;
">
Welcome to Tutorialspoint!
</div>
<script>
const root = document.getElementById('root')
function myFunction(name) {
this.name = name
let that = this
let obj = {
run: function(callback) {
setTimeout(callback, 1000)
},
}
obj.run(function() {
root.innerHTML = this.name
})
}
</script>
</body>
</html>
Verwenden Sie die explizite Bindung davon an das Objekt
Wenn wir einen Rückruf definieren, können wir angeben, was wir wollen. Wir können den „this“-Wert mit der Methode bind() festlegen und sicherstellen, dass er während der gesamten Funktionsausführung so bleibt, unabhängig davon, wie oder wo er aufgerufen oder übergeben wird.
Die Methodebind() ist in jeder Funktion verfügbar und erstellt eine neue Funktion mit der Eigenschaft „this“, die mit dem angegebenen Objekt verbunden ist. Der einzige Unterschied zwischen der zurückgegebenen Funktion und der ursprünglichen Funktion besteht darin, dass Sie die vollständige Kontrolle darüber haben, worauf das Attribut „this“ verweist.
Beispiel
<html>
<body>
<h2>
'this' Inside a Callback using
<i> explicitly binding this to an object </i>
</h2>
<button onclick="myFunction('Tutorialspoint')"> Click here </button>
<div id="root" style="
background-color: rgb(240, 248, 255);
border: 1px solid gray;
margin: 5px 0px;
padding: 10px;
">
Welcome to Tutorialspoint!
</div>
<script>
const root = document.getElementById('root')
function myFunction(name) {
this.name = name
let callbackFunction = function() {
root.innerHTML = this.name
}.bind(this)
let obj = {
run: function(callbackFunction) {
setTimeout(callbackFunction, 1000)
},
}
obj.run(callbackFunction)
}
</script>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie greife ich im Rückruf auf das richtige „this' zu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1382
52
Wie erstelle ich meine eigenen JavaScript -Bibliotheken?
Mar 18, 2025 pm 03:12 PM
In Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.
Wie optimiere ich den JavaScript -Code für die Leistung im Browser?
Mar 18, 2025 pm 03:14 PM
In dem Artikel werden Strategien zur Optimierung der JavaScript -Leistung in Browsern erörtert, wobei der Schwerpunkt auf die Reduzierung der Ausführungszeit und die Minimierung der Auswirkungen auf die Lastgeschwindigkeit der Seite wird.
Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße?
Apr 04, 2025 pm 02:42 PM
Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...
Wer bekommt mehr Python oder JavaScript bezahlt?
Apr 04, 2025 am 12:09 AM
Es gibt kein absolutes Gehalt für Python- und JavaScript -Entwickler, je nach Fähigkeiten und Branchenbedürfnissen. 1. Python kann mehr in Datenwissenschaft und maschinellem Lernen bezahlt werden. 2. JavaScript hat eine große Nachfrage in der Entwicklung von Front-End- und Full-Stack-Entwicklung, und sein Gehalt ist auch beträchtlich. 3. Einflussfaktoren umfassen Erfahrung, geografische Standort, Unternehmensgröße und spezifische Fähigkeiten.
Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools?
Mar 18, 2025 pm 03:16 PM
In dem Artikel werden effektives JavaScript -Debuggen mithilfe von Browser -Entwickler -Tools, der Schwerpunkt auf dem Festlegen von Haltepunkten, der Konsole und der Analyse der Leistung erörtert.
Wie fusioniere ich Arrayelemente mit derselben ID mit JavaScript in ein Objekt?
Apr 04, 2025 pm 05:09 PM
Wie fusioniere ich Array -Elemente mit derselben ID in ein Objekt in JavaScript? Bei der Verarbeitung von Daten begegnen wir häufig die Notwendigkeit, dieselbe ID zu haben ...
Wie verwende ich Quellkarten zum Debuggen, um den JavaScript -Code zu debuggen?
Mar 18, 2025 pm 03:17 PM
In dem Artikel wird erläutert, wie Quellkarten zum Debuggen von JavaScript verwendet werden, indem er auf den ursprünglichen Code zurückgegeben wird. Es wird erläutert, dass Quellenkarten aktiviert, Breakpoints eingestellt und Tools wie Chrome Devtools und WebPack verwendet werden.
Entmystifizieren JavaScript: Was es tut und warum es wichtig ist
Apr 09, 2025 am 12:07 AM
JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.
