Les fonctions fléchées sont plus courtes, mais les vraies différences se trouvent dans le comportement de liaison, pas seulement dans la syntaxe.
const regular = function () {};
const arrow = () => {};
const short = x => x * 2;
Les fonctions fléchées sont plus courtes, mais les vraies différences se trouvent dans le comportement de liaison, pas seulement dans la syntaxe.
const regular = function () {};
const arrow = () => {};
const short = x => x * 2;
1. Pas de this propre — les fonctions fléchées héritent de this de la portée englobante. C'est la différence la plus importante et pourquoi elles sont excellentes pour les rappels (callbacks) :
const timer = {
seconds: 0,
start() {
setInterval(() => this.seconds++, 1000); // ✅ `this` is timer
// a regular function here would have its own `this` (undefined) → bug
},
};
2. Pas d'objet arguments — utilisez les paramètres rest à la place :
const sum = (...args) => args.reduce((a, b) => a + b, 0);
3. Ne peuvent pas être utilisées comme constructeurs — new arrow() lève une erreur, et elles n'ont pas de prototype.
const obj = {
name: "Ann",
greet: () => `Hi ${this.name}`, // ❌ `this` is NOT obj (it's outer scope)
greet2() { return `Hi ${this.name}`; }, // ✅ method needs dynamic `this`
};
N'utilisez pas les fonctions fléchées pour les méthodes d'objet (elles ne se lieront pas à l'objet) ou quand vous avez besoin d'un this/arguments dynamique (gestionnaires d'événements qui dépendent de this étant l'élément).
Utilisez les fonctions fléchées pour les rappels et les fonctions courtes où hériter de this est ce que vous voulez ; utilisez les fonctions ordinaires pour les méthodes, les constructeurs et les méthodes de prototype.