This (JavaScript)

Sa valeur dépend du contexte où il est utilisé.

Dans un objet

Quand tu utilises "this" dans une méthodes d'un objets, "this" fait référence à l'objet lui-même.

let objet = {
  nom: 'Objet magique',
  action: function() {
    // Ici, "this" fait référence à 'objet'
    return this.nom + ' fait quelque chose.';
  }
};

console.log(objet.action()); // "Objet magique fait quelque chose."

Dans une fonction globale

Si tu utilises "this" dans une fonctions (programmation) qui n'est pas dans un objet, "this" fait référence à l'objet global, qui est window dans un navigateur.

function montreThis() {
  // "this" fait référence à l'objet global "window" ici
  console.log(this);
}

montreThis();

Avec les fonctions constructeur

Lorsque tu utilises "this" dans une fonction constructeurs (utilisée avec le mot-clé new pour créer des instances d'objets), "this" fait référence à l'instance nouvellement créée de cet objet.

function Voiture(marque) {
  this.marque = marque;
}

let maVoiture = new Voiture('Toyota');
console.log(maVoiture.marque); // "Toyota"

Dans une fonction fléchée

Les arrow functions (fonctions fléchées) ne possèdent pas leur propre "this". Elles "empruntent" "this" du contexte englobant. C'est très pratique pour passer "this" dans des callbacks où le contexte peut changer.

let objet = {
  nom: 'Objet magique',
  action: function() {
    setTimeout(() => {
      // La fonction fléchée n'a pas son propre "this", donc elle utilise celui de "action"
      console.log(this.nom + ' fait quelque chose après un délai.');
    }, 1000);
  }
};

objet.action();

Pour aller plus loin

• Binding de "this": Apprends comment les méthodes comme .bind(), .call(), et .apply() peuvent être utilisées pour définir explicitement la valeur de "this".
• arrow functions (fonctions fléchées) vs. Regular functions: Explore les différences détaillées entre les fonctions fléchées et les fonctions régulières, surtout en ce qui concerne "this".
• "This" dans les événements: Comprends comment "this" est utilisé dans les gestionnaires d'événements, où "this" peut souvent faire référence à l'élément DOM qui a déclenché l'événement.
• Cas d'usage avancés: Regarde des cas plus complexes où "this" peut avoir des comportements inattendus, notamment dans des situations asynchrones ou lors de l'utilisation de certaines bibliothèques ou frameworks.

En explorant ces concepts, tu enrichiras ta compréhension de "this" et seras mieux équipé pour l'utiliser efficacement dans divers contextes.