En JavaScript, apply, call et bind permettent de contrôler explicitement le contexte d'exécution (this) d'une fonction. Chacune possède ses propres particularités d'utilisation.

• call : Invoque immédiatement une fonction en réassignant son this et accepte les arguments de façon individuelle.
• apply : Fonctionne comme call, mais reçoit les arguments sous forme de tableau.
• bind : Ne déclenche pas l'exécution immédiate. Elle génère une nouvelle fonction dont le this est prédéfini, avec possibilité de pré-configurer des arguments.

Comparaison

Exemlpes pratiques

Sans argument ou avec un seul argument

const pseudo = 'Aurore';
const annees = 25;

const profil = {
  pseudo: 'Nuit',
  annees: 22,
  afficher() {
    console.log(`${this.pseudo} a ${this.annees} ans`);
  }
};

const cible = {
  pseudo: 'Crépuscule',
  annees: 21
};

profil.afficher();              // Nuit a 22 ans (this = profil)
profil.afficher.call();         // Aurore a 25 ans (this = global)
profil.afficher.call(cible);    // Crépuscule a 21 ans (this = cible)
profil.afficher.apply(cible);   // Crépuscule a 21 ans (this = cible)
profil.afficher.bind(cible)();  // Crépuscule a 21 ans (this = cible, exécution manuelle)

Avec plusieurs arguments

const profil = {
  pseudo: 'Nuit',
  annees: 22,
  afficher(fruit1, fruit2) {
    console.log(`${this.pseudo} a ${this.annees} ans et aime ${fruit1} et ${fruit2}`);
  }
};

const cible = {
  pseudo: 'Crépuscule',
  annees: 21
};

// Toutes ces lignes affichent : Crépuscule a 21 ans et aime fraise et kiwi
profil.afficher.call(cible, 'fraise', 'kiwi');
profil.afficher.apply(cible, ['fraise', 'kiwi']);
profil.afficher.bind(cible, 'fraise', 'kiwi')();

// Stockage de la fonction liée pour un appel ultérieur
const fnLiee = profil.afficher.bind(cible, 'fraise', 'kiwi');
fnLiee();

Cas d'usage avancé : Math.max() avec un tableau

Les méthodes Math.max() et Math.min() n'acceptent pas directement un tableau en paramètre. La méthode apply permet de contourner cette limitasion en décomposant le tableau en arguments individuels.

// Utilisation classique avec des valeurs individuelles
const valeurMax1 = Math.max(5, 12, 8);
console.log(valeurMax1); // 12

// Avec un tableau grâce à apply
const nombres = [5, 12, 8];
// Le premier argument (null) représente this, non requis pour Math.max
const valeurMax2 = Math.max.apply(null, nombres);
// Équivalent : Math.max.apply(window, nombres) ou Math.max.apply(this, nombres)
console.log(valeurMax2); // 12