this
Mot-clé qui désigne l’objet sur lequel une fonction a été appelée.
Exemple
#const course = {
title: 'cours JavaScript',
describe() {
return `C’est le ${this.title}`
}
}
console.log(course.describe())
const describe = course.describe
try {
describe()
} catch (error) {
console.log(error.name)
}Définition et utilisation
#La valeur de this dépend de la façon dont une fonction a été appelée, pas de l’endroit où elle a été définie. Dans une méthode appelée comme objet.méthode(), this désigne objet. Dans un appel de fonction ordinaire, en mode strict, this vaut undefined.
Les fonctions fléchées n’ont pas leur propre this. Elles le reprennent de l’endroit où elles ont été écrites. C’est pourquoi elles sont excellentes comme callbacks à l’intérieur de méthodes, mais ne conviennent pas comme méthodes d’objet elles-mêmes.
L’erreur la plus fréquente consiste à « perdre » this en transmettant une méthode plus loin, par exemple comme gestionnaire d’événement. Une fonction fléchée, ou méthode.bind(objet), résout le problème.
Syntaxe
#thisPlus d’exemples
#const timer = {
seconds: 3,
start() {
const ticks = [1, 2, 3].map(() => this.seconds)
console.log(ticks)
}
}
timer.start()const user = { name: 'Léa', hello() { return 'Salut, ' + this.name } }
const hello = user.hello.bind(user)
console.log(hello())Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Écrivez les méthodes d’objets avec la syntaxe normale
méthode() {}, et les callbacks à l’intérieur comme des fonctions fléchées. - En transmettant une méthode comme gestionnaire d’événement, utilisez
() => obj.méthode()ouobj.méthode.bind(obj).
Entrées associées
#- () => {}Fonction fléchée (arrow function) : une syntaxe de fonction plus courte, sans this propre, avec un return implicite pour une seule expression.
- classDéfinit une classe, c’est-à-dire un modèle pour créer des objets avec les mêmes champs et méthodes.
- Object.create()Crée un nouvel objet avec le prototype donné.
- functionDéclare une fonction nommée : un bloc de code avec des paramètres, que vous pouvez appeler autant de fois que vous voulez et qui peut renvoyer un résultat.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.