Das JavaScript-Schlüsselwort „this“ verstehen

Was bedeutet das Das Schlüsselwort in JavaScript bedeuten? Und wie können Sie es praktisch in Ihrem JavaScript-Programm nutzen? Dies sind einige der häufigsten Fragen, die Neulinge und sogar einige erfahrene JavaScript-Entwickler zum Thema stellen Das Stichwort.

Wenn Sie einer dieser Entwickler sind, fragen Sie sich, was das ist Das Wenn es um das Schlüsselwort geht, dann ist dieser Artikel genau das Richtige für Sie. Entdecken Sie was Das bezieht sich in unterschiedlichen Zusammenhängen und machen Sie sich mit einigen Fallstricken vertraut, um Verwirrung und natürlich Fehler in Ihrem Code zu vermeiden.

„dieses“ im globalen Rahmen

Im globalen Kontext Das Werde das zurückgeben Fenster Objekt, solange es außerhalb einer Funktion liegt. Globaler Kontext bedeutet, dass Sie ihn nicht innerhalb einer Funktion platzieren.

if(true) {
console.log(this) // returns window object
}

instagram viewer
let i = 2
while(i < 10) {
console.log(this) // returns window object till i 9
 i++
}

Wenn Sie den obigen Code ausführen, erhalten Sie das Fensterobjekt.

„diese“ Inside-Funktionen (Methoden)

Bei Verwendung innerhalb von Funktionen Das bezieht sich auf das Objekt, an das die Funktion gebunden ist. Die Ausnahme ist, wenn Sie verwenden Das in einer eigenständigen Funktion, in diesem Fall wird die zurückgegeben Fenster Objekt. Sehen wir uns einige Beispiele an.

Im folgenden Beispiel wird die sayName Funktion ist innerhalb der Mich Objekt (d. h. es ist eine Methode). In Fällen wie diesem Das bezieht sich auf das Objekt, das die Funktion enthält.

 
functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley",
 sayName: sayName
}
console.log(me.sayName()) // My name is Kingsley

Das ist der Mich Objekt, so sagen dieser Name im Inneren sayName Methode ist genau die gleiche wie ich.name.

Eine andere Möglichkeit, es sich vorzustellen, ist, dass alles, was sich beim Aufruf auf der linken Seite der Funktion befindet, auch vorhanden sein wird Das. Dies bedeutet, dass Sie die wiederverwenden können sayName Funktion in verschiedenen Objekten und Das wird sich jedes Mal auf einen völlig anderen Kontext beziehen.

Nun, wie bereits erwähnt, Das gibt die zurück Fenster Objekt, wenn es innerhalb einer eigenständigen Funktion verwendet wird. Dies liegt daran, dass eine eigenständige Funktion an gebunden ist Fenster Objekt standardmäßig:

functiontalk() {
returnthis
}
talk() // returns the window object

Berufung sprechen() ist dasselbe wie anrufen window.talk(), und alles, was sich auf der linken Seite der Funktion befindet, wird automatisch zu Das.

Nebenbei bemerkt, die Das Das Schlüsselwort in der Funktion verhält sich anders in Der strikte Modus von JavaScript (es kehrt zurück nicht definiert). Dies ist auch zu beachten, wenn Sie UI-Bibliotheken verwenden, die den strikten Modus verwenden (z. B. React).

Verwenden von „this“ mit Function.bind()

Es kann Szenarien geben, in denen Sie die Funktion nicht einfach als Methode zu einem Objekt hinzufügen können (wie im letzten Abschnitt).

Möglicherweise gehört das Objekt nicht Ihnen und Sie ziehen es aus einer Bibliothek. Das Objekt ist unveränderlich, Sie können es also nicht einfach ändern. In solchen Fällen können Sie die Funktionsanweisung immer noch getrennt vom Objekt ausführen, indem Sie die verwenden Funktion.bind() Methode.

Im folgenden Beispiel wird die sayName Funktion ist keine Methode auf der Mich Objekt, aber Sie haben es trotzdem mit dem gebunden binden() Funktion:

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
const meTalk = sayName.bind(me)
meTalk() // My name is Kingsley

In welches Objekt auch immer Sie geraten binden() wird als Wert von verwendet Das in diesem Funktionsaufruf.

Zusammenfassend können Sie verwenden binden() auf jede Funktion und übergeben Sie einen neuen Kontext (ein Objekt). Und dieses Objekt wird die Bedeutung von überschreiben Das innerhalb dieser Funktion.

Verwenden von „this“ mit Function.call()

Was ist, wenn Sie keine völlig neue Funktion zurückgeben möchten, sondern die Funktion einfach aufrufen möchten, nachdem Sie sie an ihren Kontext gebunden haben? Die Lösung dafür ist die Anruf() Methode:

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
sayName.call(me) // My name is Kingsley

Der Anruf() Die Methode führt die Funktion sofort aus, anstatt eine andere Funktion zurückzugeben.

Wenn die Funktion einen Parameter erfordert, können Sie ihn über übergeben Anruf() Methode. Im folgenden Beispiel übergeben Sie die Sprache an sayName() Funktion, sodass Sie sie verwenden können, um bedingt verschiedene Nachrichten zurückzugeben:

functionsayName(lang) {
if (lang "en") {
return`My name is ${this.name}`
 } elseif (lang "it") {
return`Io sono ${this.name}`
 }
}
const me = {
 name: "Kingsley"
}
sayName.call(me, 'en') // My name is Kingsley
sayName.call(me, 'it') // Io sono Kingsley

Wie Sie sehen, können Sie der Funktion einfach einen beliebigen Parameter als zweites Argument übergeben Anruf() Methode. Sie können auch beliebig viele Parameter übergeben.

Der anwenden() Methode ist sehr ähnlich Anruf() Und binden(). Der einzige Unterschied besteht darin, dass Sie mehrere Argumente übergeben, indem Sie sie durch ein Komma trennen Anruf(), wohingegen Sie mit mehrere Argumente innerhalb eines Arrays übergeben anwenden().

In Summe, bind(), call() und apply() Alle ermöglichen es Ihnen, Funktionen mit einem völlig anderen Objekt aufzurufen, ohne dass irgendeine Beziehung zwischen den beiden besteht (d. h. die Funktion ist keine Methode für das Objekt).

„dieses“ innerhalb von Konstruktorfunktionen

Wenn Sie eine Funktion mit a aufrufen neu Schlüsselwort, es erstellt ein Das Objekt und gibt es zurück:

functionperson(name){
this.name = name
}
const me = new person("Kingsley")
const her = new person("Sarah")
const him = new person("Jake")
me.name // Kingsley
her.name // Sarah
him.name // Jake

Im obigen Code haben Sie drei verschiedene Objekte aus derselben Funktion erstellt. Der neu Das Schlüsselwort erstellt automatisch eine Bindung zwischen dem zu erstellenden Objekt und dem Das Schlüsselwort innerhalb der Funktion.

„diese“ Inside Callback-Funktionen

Rückruffunktionen sind unterscheidet sich von regulären Funktionen. Rückruffunktionen sind Funktionen, die Sie als Argument an eine andere Funktion übergeben, sodass sie sofort ausgeführt werden können, nachdem die Ausführung der Hauptfunktion abgeschlossen ist.

Der Das Das Schlüsselwort bezieht sich auf einen völlig anderen Kontext, wenn es in Rückruffunktionen verwendet wird:

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the window object

Nach einer Sekunde des Anrufs Person Konstruktorfunktion und Erstellen einer neuen Mich Wenn Sie ein Objekt verwenden, wird das Fensterobjekt als Wert von protokolliert Das. Wenn es also in einer Rückruffunktion verwendet wird, Das bezieht sich auf das Fensterobjekt und nicht auf das „konstruierte“ Objekt.

Es gibt zwei Möglichkeiten, dies zu beheben. Die erste Methode ist die Verwendung binden() um die zu binden Person Funktion zum neu konstruierten Objekt:

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }.bind(this), 1000)
}
const me = new person("Kingsley") // returns the me object

Mit der oben genannten Änderung Das im Rückruf wird auf dasselbe verweisen Das als Konstruktorfunktion (die Mich Objekt).

Der zweite Weg, das Problem zu lösen Das in Rückruffunktionen erfolgt die Verwendung von Pfeilfunktionen.

„diese“ Innenpfeilfunktionen

Pfeilfunktionen unterscheiden sich von regulären Funktionen. Sie können Ihre Rückruffunktion in eine Pfeilfunktion umwandeln. Mit Pfeilfunktionen brauchen Sie nichts mehr binden() weil es automatisch an das neu erstellte Objekt bindet:

functionperson(name){
this.name = name
 setTimeout(() => {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the me object

Erfahren Sie mehr über JavaScript

Sie haben alles über das Schlüsselwort „this“ und seine Bedeutung in den verschiedenen Kontexten in JavaScript erfahren. Wenn Sie neu bei JavaScript sind, wird es für Sie von großem Nutzen sein, alle Grundlagen von JavaScript und seine Funktionsweise zu erlernen.