Il JavaScript questa parola chiave
Esempio
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
Cos'è questo ?
La parola chiave JavaScript thissi riferisce all'oggetto a cui appartiene.
Ha valori diversi a seconda di dove viene utilizzato:
- In un metodo,
thisfa riferimento all'oggetto proprietario . - Da solo,
thissi riferisce all'oggetto globale . - In una funzione,
thisfa riferimento all'oggetto globale . - In una funzione, in modalità rigorosa,
thisèundefined. - In un evento,
thissi riferisce all'elemento che ha ricevuto l'evento. - Metodi come
call(), eapply()possono fare riferimentothisa qualsiasi oggetto .
questo in un metodo
In un metodo oggetto, thissi riferisce al " proprietario " del metodo.
Nell'esempio nella parte superiore di questa pagina, thissi riferisce all'oggetto persona .
L' oggetto persona è il proprietario del metodo fullName .
fullName : function() {
return this.firstName + " " + this.lastName;
}
questo da solo
Se utilizzato da solo, il proprietario è l'oggetto Global, quindi thissi riferisce all'oggetto Global.
In una finestra del browser l'oggetto Global è [object Window]:
Esempio
let x = this;
In modalità rigorosa , quando utilizzato da solo, thissi riferisce anche all'oggetto Global
[object Window]:
Esempio
"use strict";
let x = this;
questo in una funzione (impostazione predefinita)
In una funzione JavaScript, il proprietario della funzione è l' associazione predefinitathis per .
Quindi, in una funzione, thisfa riferimento all'oggetto Global [object Window].
Esempio
function myFunction() {
return this;
}
questo in una funzione (rigorosa)
La modalità rigorosa JavaScript non consente l'associazione predefinita.
Quindi, se utilizzato in una funzione, in modalità rigorosa, thisè undefined.
Esempio
"use strict";
function myFunction() {
return this;
}
questo in Gestori di eventi
Nei gestori di eventi HTML, thisfa riferimento all'elemento HTML che ha ricevuto l'evento:
Esempio
<button onclick="this.style.display='none'">
Click to
Remove Me!
</button>
Associazione del metodo dell'oggetto
In questi esempi, thisè l' oggetto persona (l'oggetto persona è il "proprietario" della funzione):
Esempio
const person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
Esempio
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " +
this.lastName;
}
};
In altre parole: this.firstName indica la proprietà firstName di questo oggetto (persona).
Associazione di funzioni esplicite
I metodi call()e apply()sono metodi JavaScript predefiniti.
Possono essere usati entrambi per chiamare un metodo oggetto con un altro oggetto come argomento.
Puoi leggere di più su call()e apply()più avanti in questo tutorial.
Nell'esempio seguente, quando si chiama person1.fullName con person2 come argomento, thisfarà riferimento a person2, anche se si tratta di un metodo di person1:
Esempio
const person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName:"John",
lastName: "Doe",
}
person1.fullName.call(person2); // Will return "John Doe"