Introduite avec ES6 en 2015, la fonction fléchée raccourcit l’écriture d’une fonction classique tout en changeant une règle importante : elle n’a pas son propre this, elle hérite de celui de la portée où elle est définie.
Pourquoi ça compte dans un projet WordPress
Depuis que Gutenberg s’appuie massivement sur React et JavaScript moderne, les fonctions fléchées sont partout dans les blocs personnalisés : composants fonctionnels, gestionnaires d’événements, callbacks passés à useEffect. Leur gestion automatique de this évite le classique bug où une méthode perd son contexte une fois passée en callback.
Exemple
class Compteur {
constructor() {
this.valeur = 0;
}
incrementer = () => {
this.valeur++;
};
}
const c = new Compteur();
const action = c.incrementer;
action(); // this.valeur reste bien lié à l'instance cAvec une fonction classique déclarée de la même façon, l’appel action() perdrait la référence à l’instance et provoquerait une erreur ou un comportement inattendu.
À ne pas confondre avec une fonction classique
- Une fonction fléchée n’a pas d’objet
arguments; il faut utiliser le paramètre rest (...args) pour récupérer une liste variable d’arguments. - Elle ne peut pas servir de constructeur : impossible de l’appeler avec
new. - Sa syntaxe compacte (
const carre = n => n * n;) convient bien aux petites fonctions utilitaires, mais nuit à la lisibilité pour une logique complexe sur plusieurs lignes.