Das JavaScript -Schlüsselwort this
Beispiel
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
Was ist das ?
Das JavaScript- thisSchlüsselwort bezieht sich auf das Objekt, zu dem es gehört.
Es hat unterschiedliche Werte, je nachdem, wo es verwendet wird:
- Verweist in einer Methode
thisauf das Besitzerobjekt . - Allein
thisbezieht sich auf das globale Objekt . - Bezieht sich in einer Funktion
thisauf das globale Objekt . thisIn einer Funktion ist im strikten Modusundefined.- Bezieht sich in einem Ereignis
thisauf das Element , das das Ereignis erhalten hat. - Methoden wie
call()undapply()können sichthisauf jedes Objekt beziehen .
dies in einer Methode
Bezieht sich in einer Objektmethode thisauf den „ Besitzer “ der Methode.
Im Beispiel oben auf dieser Seite thisbezieht sich auf das Personenobjekt .
Das Person - Objekt ist der Besitzer der fullName- Methode.
fullName : function() {
return this.firstName + " " + this.lastName;
}
dies allein
Bei alleiniger Verwendung ist der Eigentümer das globale Objekt, thisbezieht sich also auf das globale Objekt.
In einem Browserfenster ist das globale Objekt [object Window]:
Beispiel
let x = this;
Im strikten Modus bezieht sich bei alleiniger Verwendung thisauch auf das globale Objekt
[object Window]:
Beispiel
"use strict";
let x = this;
dies in einer Funktion (Standard)
In einer JavaScript-Funktion ist der Eigentümer der Funktion die Standardbindung für this.
Bezieht sich also in einer Funktion thisauf das globale Objekt [object Window].
Beispiel
function myFunction() {
return this;
}
dies in einer Funktion (Strict)
Der strikte JavaScript -Modus lässt keine Standardbindung zu.
Wenn es also in einer Funktion im strikten Modus verwendet wird, thisist undefined.
Beispiel
"use strict";
function myFunction() {
return this;
}
Dies in Ereignishandlern
Bezieht sich in HTML-Ereignishandlern thisauf das HTML-Element, das das Ereignis empfangen hat:
Beispiel
<button onclick="this.style.display='none'">
Click to
Remove Me!
</button>
Objektmethodenbindung
In diesen Beispielen thisist das Personenobjekt (Das Personenobjekt ist der "Eigentümer" der Funktion):
Beispiel
const person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
Beispiel
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " +
this.lastName;
}
};
Mit anderen Worten: this.firstName bedeutet die firstName- Eigenschaft dieses (Personen-)Objekts.
Explizite Funktionsbindung
Die Methoden call()und apply()sind vordefinierte JavaScript-Methoden.
Sie können beide verwendet werden, um eine Objektmethode mit einem anderen Objekt als Argument aufzurufen.
Sie können mehr über call()und apply()später in diesem Tutorial lesen.
Im folgenden Beispiel wird beim Aufrufen von person1.fullName mit person2 als Argument thisauf person2 verwiesen, auch wenn es sich um eine Methode von person1 handelt:
Beispiel
const person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName:"John",
lastName: "Doe",
}
person1.fullName.call(person2); // Will return "John Doe"