Le mot-clé this en JavaScript est un concept important, mais il peut être un peu déroutant pour les débutants.
La définition de MDN nous dit que : "L'objet JavaScript [this représente] le contexte dans lequel le code courant est exécuté."
Autrement dit, this
est comme une sorte de caméléon qui change selon le contexte dans lequel il se trouve. 🦎
Voici quelques exemples concrets pour mieux comprendre ce concept.
Dans le contexte d'une méthode d'objet
let personne = {
nom: "Alice",
direBonjour: function() {
console.log("Bonjour, je m'appelle " + this.nom);
}
};
personne.direBonjour(); // Affiche "Bonjour, je m'appelle Alice"
Dans ce cas, this fait référence à l'objet personne, donc this.nom renvoie la valeur de nom dans cet objet.
Dans le contexte d'un constructeur de classe
Les constructeurs de classe sont comme les usines à objets de JavaScript. 🏭 Le mot-clé this
fait référence à l'instance d'objet créée lors de l'utilisation du constructeur.
class Personne {
constructor(nom) {
this.nom = nom;
}
}
let alice = new Personne("Alice");
console.log(alice.nom); // Affiche "Alice"
Dans le contexte d'un événement
Lorsqu'un événement se produit, "this" est comme un détective qui pointe du doigt la chose qui a déclenché l'événement, généralement un élément DOM. 🕵️♀️ Par exemple, dans un gestionnaire d'événements de clic :
let bouton = document.querySelector("#monBouton");
bouton.addEventListener("click", function() {
console.log("Bouton cliqué : " + this.id);
});
En résumé, this
en JavaScript dépend du contexte d'exécution, et il est utilisé pour faire référence à l'objet sur lequel une fonction est appelée. Comprendre comment "this" fonctionne dans différents contextes est essentiel pour devenir un maître du JavaScript ! 🚀🤓
Merci d'avoir lu cet article jusqu'au bout! Je t'invite à me laisser ton avis en commentaire, ou à me suivre sur Twitter pour plus d'astuces JavaScript! 🚀👩💻👍
Top comments (0)