Het JavaScript dit trefwoord
Voorbeeld
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
Wat is dit ?
Het JavaScript this-sleutelwoord verwijst naar het object waartoe het behoort.
Het heeft verschillende waarden, afhankelijk van waar het wordt gebruikt:
- In een methode
thisverwijst naar het object owner . - Alleen,
thisverwijst naar het globale object . - In een functie
thisverwijst naar het globale object . - In een functie, in strikte modus,
thisisundefined. - In een gebeurtenis
thisverwijst naar het element dat de gebeurtenis heeft ontvangen. - Methoden zoals
call(), enapply()kunnen verwijzenthisnaar elk object .
dit in een methode
In een objectmethode thisverwijst dit naar de " eigenaar " van de methode.
In het voorbeeld bovenaan deze pagina thisverwijst het naar het persoonsobject .
Het person - object is de eigenaar van de methode fullName .
fullName : function() {
return this.firstName + " " + this.lastName;
}
dit alleen
Als het alleen wordt gebruikt, is de eigenaar het Global-object, dus thisverwijst het naar het Global-object.
In een browservenster is het Global-object [object Window]:
Voorbeeld
let x = this;
In de strikte modus verwijst , wanneer alleen gebruikt, thisook naar het Global-object
[object Window]:
Voorbeeld
"use strict";
let x = this;
dit in een functie (standaard)
In een JavaScript-functie is de eigenaar van de functie de standaardbinding voor this.
Dus, in een functie, thisverwijst naar het Global object [object Window].
Voorbeeld
function myFunction() {
return this;
}
dit in een functie (strikt)
De strikte modus van JavaScript staat geen standaardbinding toe.
Dus, wanneer gebruikt in een functie, in de strikte modus, thisis undefined.
Voorbeeld
"use strict";
function myFunction() {
return this;
}
dit in Event Handlers
Verwijst in HTML-gebeurtenishandlers thisnaar het HTML-element dat de gebeurtenis heeft ontvangen:
Voorbeeld
<button onclick="this.style.display='none'">
Click to
Remove Me!
</button>
Object Methode Binding
In deze voorbeelden thisis het persoonsobject (het persoonsobject is de "eigenaar" van de functie):
Voorbeeld
const person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
Voorbeeld
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " +
this.lastName;
}
};
Met andere woorden: this.firstName betekent de firstName eigenschap van dit (persoon)object.
Expliciete functiebinding
De call()en apply()-methoden zijn vooraf gedefinieerde JavaScript-methoden.
Ze kunnen beide worden gebruikt om een objectmethode aan te roepen met een ander object als argument.
Je leest er meer over call()en apply()verderop in deze tutorial.
In het onderstaande voorbeeld, wanneer person1.fullName wordt aangeroepen met person2 als argument, thiswordt verwezen naar person2, zelfs als het een methode van person1 is:
Voorbeeld
const person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName:"John",
lastName: "Doe",
}
person1.fullName.call(person2); // Will return "John Doe"