Quelle est la différence entre une fonction classique et une fonction fléchée en JavaScript?

La principale différence réside dans la façon dont ils travaillent avec this.

Une fonction classique possède son propre this, qui est déterminé par le contexte dans lequel elle est appelée (comment elle a été invoquée).

Une fonction fléchée n'a pas son propre this. Elle hérite this lexicalement de l'environnement dans lequel elle a été définie.

Autres différences:

• Objet arguments: Les fonctions classiques ont accès à l'objet arguments, les flèches non (mais on peut utiliser des paramètres rest).
• Constructeurs: Les fonctions classiques peuvent être utilisées comme constructeurs avec l'opérateur new. Les flèches, non.
• Propriété prototype: Les fonctions classiques ont la propriété prototype. Les flèches, non.

Exemple d'utilisation de this:

// Exemple avec fonction classique
const obj = {
  name: 'Objet',
  greet: function() {
    console.log(this.name); // this fait référence à obj
  }
};

obj.greet(); // Affiche: Objet

const greetFunc = obj.greet;
greetFunc(); // Affiche: undefined (ou Window dans le navigateur) - this perd le contexte de obj

// Exemple avec fonction fléchée
const objArrow = {
  name: 'Objet avec flèche',
  greet: () => {
    console.log(this.name); // this hérite du contexte externe (dans ce cas global ou Window)
  }
};

objArrow.greet(); // Affiche: undefined (ou le nom de la fenêtre dans le navigateur, si name est défini globalement)

const greetArrowFunc = objArrow.greet;
greetArrowFunc(); // Affiche: undefined (ou le nom de la fenêtre dans le navigateur) - this ne change pas