Comment changer le contexte d'une fonction en…

En JavaScript, le contexte d'exécution d'une fonction (la valeur de this) peut être modifié de plusieurs façons :

call() : Exécute une fonction avec une valeur this spécifiée et des arguments passés séparément par des virgules.

// function.call(thisArg, arg1, arg2, ...)
function greet(name) {
  console.log(`Bonjour, ${name} ! Je suis ${this.type}`);
}

const obj = { type: 'objet' };

greet.call(obj, 'Alice'); // Bonjour, Alice ! Je suis objet

apply() : Exécute une fonction avec une valeur this spécifiée et des arguments passés sous forme de tableau ou d'objet semblable à un tableau.

// function.apply(thisArg, [argsArray])
function sum(a, b) {
  console.log(`${this.name} : ${a + b}`);
}

const context = { name: 'Calculatrice' };
const numbers = [5, 10];

sum.apply(context, numbers); // Calculatrice : 15

bind() : Crée une nouvelle fonction "liée" à une valeur this spécifiée. La fonction originale n'est pas exécutée immédiatement.

// function.bind(thisArg, arg1, arg2, ...)
const user = { name: 'Bob' };

function sayHello() {
  console.log(`Je m'appelle ${this.name}`);
}

const boundSayHello = sayHello.bind(user);

boundSayHello(); // Je m'appelle Bob

Fonctions fléchées (=>) : Les fonctions fléchées n'ont pas leur propre contexte this. Elles capturent this de l'environnement lexical (du scope parent où elles ont été définies).

class MyClass {
  constructor() {
    this.value = 'valeur de la classe';
    // La fonction fléchée conserve le contexte de la classe
    this.logValue = () => {
      console.log(this.value);
    };
  }
}

const instance = new MyClass();
const method = instance.logValue;

method(); // valeur de la classe (le contexte est conservé)

// Comparer avec une fonction normale sans bind
class AutreClasse {
    constructor() {
        this.value = 'autre valeur';
        this.logValue = function() {
            console.log(this.value); // 'this' sera window ou undefined en mode strict
        };
    }
}

const autreInstance = new AutreClasse();
const autreMethod = autreInstance.logValue;

autreMethod(); // undefined (le contexte est perdu lors de l'appel en tant que fonction séparée)

Comment changer le contexte d'une fonction en JavaScript?