Qu'est-ce que ceci en JavaScript?

this en JavaScript est un mot-clé qui indique le contexte d'exécution d'une fonction. Sa valeur est déterminée par la façon dont la fonction est appelée.

Normalement, this fait référence à l'objet global (dans le navigateur, window) lors d'un appel de fonction classique, sauf en mode strict.

En mode strict ('use strict'), dans le même scénario, this sera undefined.

Lorsqu'on appelle une méthode d'un objet, this fait référence à l'objet lui-même.

const obj = {
  method: function() {
    console.log(this); // obj
  }
};
obj.method();

Lorsqu'on utilise un constructeur (new avec une fonction), this pointe vers la nouvelle instance créée.

function Constructor() {
  console.log(this); // instance de Constructor
}
const instance = new Constructor();

Lorsqu'on utilise call, apply, bind, this est explicitement défini comme premier argument.

function greet() {
  console.log(`Bonjour, ${this.name} !`);
}

const person = { name: 'Alice' };

greet.call(person); // Bonjour, Alice !
greet.apply(person); // Bonjour, Alice !

const boundGreet = greet.bind(person);
boundGreet(); // Bonjour, Alice !

Dans les fonctions fléchées, this n'a pas son propre contexte. Il est lexiquement hérité de la portée où la fonction fléchée a été définie.

const obj2 = {
  name: 'Bob',
  greet: function() {
    const arrowGreet = () => {
      console.log(`Bonjour de ${this.name} !`); // this fait référence à obj2
    };
    arrowGreet();
  }
};
obj2.greet(); // Bonjour de Bob !

const obj3 = {
  name: 'Charlie',
  greet: () => {
    console.log(`Bonjour de ${this.name} !`); // this fait référence à window (ou undefined en mode strict), pas à obj3
  }
};
obj3.greet(); // Bonjour de undefined ! (ou erreur)

Le contexte this peut ne pas être évident, surtout lors du passage de callbacks ou d'opérations asynchrones. Comprendre les règles de this est essentiel pour le bon fonctionnement de JavaScript.