Qu'est-ce que le mot-clé 'this' ?

this est un mot-clé en JavaScript qui fait référence à l'objet dans le contexte dans lequel le code actuel s'exécute. Sa valeur est déterminée par la façon dont la fonction est appelée.

Les principales façons de définir this:

• Contexte global : Hors d'une fonction, this fait référence à l'objet global (window dans le navigateur, global dans Node.js).
• Appel normal d'une fonction : En mode non strict (strict mode), this fait également référence à l'objet global (ou undefined si la fonction est appelée en tant que méthode d'un objet, mais que cet objet est null ou undefined). En mode strict, this est égal à undefined.
• Méthode d'un objet : Si la fonction est appelée en tant que méthode d'un objet (c'est-à-dire via l'opérateur point .), this fait référence à l'objet qui possède la méthode.
• Constructeur : En utilisant l'opérateur new, this fait référence à la nouvelle instance de l'objet créée.
• Méthodes call(), apply(), bind() : Ces méthodes permettent de définir explicitement la valeur de this lors de l'appel de la fonction. bind() retourne une nouvelle fonction avec this lié, tandis que call() et apply() appellent la fonction avec le this spécifié.
• Fonctions fléchées : Les fonctions fléchées n'ont pas leur propre this. this dans une fonction fléchée est hérité lexicalement du contexte environnant dans lequel elle a été définie.

Exemples :

// Contexte global
console.log(this === window); // true (dans le navigateur)

// Appel normal d'une fonction
function myFunction() {
  console.log(this);
}
myFunction(); // window (en mode non strict)

// Méthode d'un objet
const myObject = {
  myMethod: function() {
    console.log(this);
  }
};
myObject.myMethod(); // myObject

// Constructeur
function MyConstructor() {
  this.value = 10;
  console.log(this);
}
const instance = new MyConstructor(); // instance d'objet

// call(), apply(), bind()
function greet(name) {
  console.log("Hello, " + name + "! My name is " + this.name);
}
const person = { name: "Alice" };
greet.call(person, "Bob"); // Hello, Bob! My name is Alice
greet.apply(person, ["Bob"]); // Hello, Bob! My name is Alice
const boundGreet = greet.bind(person);
boundGreet("Bob"); // Hello, Bob! My name is Alice

// Fonction fléchée
const arrowFunction = () => {
  console.log(this);
};
arrowFunction(); // window (si définie dans le contexte global)

Comprendre comment this est déterminé dans différents contextes est essentiel pour écrire du code JavaScript correct.