Le JavaScript de ce mot- clé
Exemple
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
Qu'est- ce que c'est ?
Le mot-clé JavaScript thisfait référence à l'objet auquel il appartient.
Il a des valeurs différentes selon l'endroit où il est utilisé :
- Dans une méthode,
thisfait référence à l' objet propriétaire . - Seul,
thisfait référence à l' objet global . - Dans une fonction,
thisfait référence à l' objet global . - Dans une fonction, en mode strict,
thisvautundefined. - Dans un événement,
thisfait référence à l' élément qui a reçu l'événement. - Des méthodes telles que
call(), etapply()peuvent faire référencethisà n'importe quel objet .
ceci dans une méthode
Dans une méthode objet, thisfait référence au " propriétaire " de la méthode.
Dans l'exemple en haut de cette page, thisfait référence à l' objet personne .
L' objet person est le propriétaire de la méthode fullName .
fullName : function() {
return this.firstName + " " + this.lastName;
}
ce seul
Lorsqu'il est utilisé seul, le propriétaire est l'objet global, il fait donc thisréférence à l'objet global.
Dans une fenêtre de navigateur l'objet Global est [object Window]:
Exemple
let x = this;
En mode strict , lorsqu'il est utilisé seul, thisfait également référence à l'objet Global
[object Window]:
Exemple
"use strict";
let x = this;
ceci dans une fonction (par défaut)
Dans une fonction JavaScript, le propriétaire de la fonction est la liaison par défautthis pour .
Ainsi, dans une fonction, thisfait référence à l'objet Global [object Window].
Exemple
function myFunction() {
return this;
}
this dans une fonction (Strict)
Le mode strict de JavaScript n'autorise pas la liaison par défaut.
Ainsi, lorsqu'il est utilisé dans une fonction, en mode strict, thisvaut undefined.
Exemple
"use strict";
function myFunction() {
return this;
}
ceci dans les gestionnaires d'événements
Dans les gestionnaires d'événements HTML, thisfait référence à l'élément HTML qui a reçu l'événement :
Exemple
<button onclick="this.style.display='none'">
Click to
Remove Me!
</button>
Liaison de méthode d'objet
Dans ces exemples, thisest l' objet person (L'objet person est le "propriétaire" de la fonction) :
Exemple
const person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
Exemple
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " +
this.lastName;
}
};
En d'autres termes : this.firstName signifie la propriété firstName de cet objet (personne).
Liaison de fonction explicite
Les méthodes call()et apply()sont des méthodes JavaScript prédéfinies.
Ils peuvent tous deux être utilisés pour appeler une méthode objet avec un autre objet comme argument.
Vous pouvez en savoir plus sur call()et apply()plus loin dans ce didacticiel.
Dans l'exemple ci-dessous, lors de l'appel de person1.fullName avec person2 comme argument, thisfera référence à person2, même s'il s'agit d'une méthode de person1 :
Exemple
const person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName:"John",
lastName: "Doe",
}
person1.fullName.call(person2); // Will return "John Doe"