À quelle fréquence avez-vous travaillé avec le contexte (this) en JavaScript ? Expliquez la perte de contexte et les moyens de la résoudre (bind, call, apply, fonctions fléchées, sauvegarde dans une variable).

En JavaScript, le contexte (this) est l'objet auquel la mot-clé this fait référence au moment de l'appel de la fonction. La perte de contexte se produit lorsque la fonction est appelée dans un contexte différent de celui attendu, et this devient undefined ou pointe vers un objet incorrect.

Exemple de perte de contexte :

const obj = {
  name: 'Alice',
  greet() {
    console.log(this.name);
  }
};

const greet = obj.greet;
greet(); // undefined ou erreur, car this ne pointe pas vers obj

Méthodes pour résoudre :

• bind : Crée une nouvelle fonction avec un contexte fixé.

  const boundGreet = obj.greet.bind(obj);
  boundGreet(); // Alice
  

• call/apply : Appellent la fonction avec un contexte explicitement défini.

  obj.greet.call(obj); // Alice
  

• Fonctions fléchées : N'ont pas leur propre this, elles prennent celui de leur environnement lexical externe.

  const obj = {
    name: 'Alice',
    greet: () => console.log(this.name)
  };
  obj.greet(); // this n'est pas obj, mais le contexte externe
  

  Par conséquent, les fonctions fléchées sont utiles pour conserver le contexte, par exemple, à l'intérieur de méthodes :

  const obj = {
    name: 'Alice',
    greet() {
      const inner = () => console.log(this.name);
      inner(); // Alice
    }
  };
  obj.greet();
  

• Enregistrer dans une variable : On enregistre souvent this dans une variable (comme self ou that) pour l'utiliser dans des fonctions imbriquées.

  const obj = {
    name: 'Alice',
    greet() {
      const self = this;
      function inner() {
        console.log(self.name);
      }
      inner(); // Alice
    }
  };
  obj.greet();