Les fonctions fléchées :
const maFonction = () => {
console.log('lalalala');
}
Les fonctions classiques :
function maFonction() {
console.log('lalla');
}
Les fonctions fléchées sont des fonctions anonymes qui simplifient la syntaxe de définition. Elles présentent deux formes : une seule expression sans accoaldes ni return, ou plusieurs instructions nécessitant les accolades et le return.
Les fonctions fléchées sont anonymes et ne peuvent pas être utilisées comme constructeurs avec new
const Constructeur = () => {
console.log('lll');
}
const instance = new Constructeur(); // TypeError
Les fonctions fléchées n'ont pas d'objet arguments, elles utilisent les paramètres rest (...) à la place
function fonctionA(a){
console.log(arguments);
}
fonctionA(1,2,3,4,5,8); // [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]
const fonctionB = (b)=>{
console.log(arguments); // ReferenceError
}
fonctionB(2,92,32,32);
const fonctionC = (...c) => {
console.log(c);
}
fonctionC(3,82,32,11323); // [3, 82, 32, 11323]
Les fonctions fléchées n'ont pas leur propre this, elles capturent celui de leur contexte environnant
const objet = {
a: 10,
b: () => {
console.log(this.a); // undefined
console.log(this); // Window
},
c: function() {
console.log(this.a); // 10
console.log(this); // {a: 10, b: ƒ, c: ƒ}
}
}
objet.b();
objet.c();
const objet = {
a: 10,
b: function(){
console.log(this.a); //10
},
c: function() {
return ()=>{
console.log(this.a); //10
}
}
}
objet.b();
objet.c()();
L'appel d'une fonction fléchée via call() ou apply() ne modifie pas sa valeur this
const obj2 = {
a: 10,
b: function(n) {
const f = (n) => n + this.a;
return f(n);
},
c: function(n) {
const f = (n) => n + this.a;
const m = {
a: 20
};
return f.call(m,n);
}
};
console.log(obj2.b(1)); // 11
console.log(obj2.c(1)); // 11
Les fonctions fléchées n'ont pas de propriété prototype
const fonctionA = ()=>{
return 1;
}
function fonctionB(){
return 2;
}
console.log(fonctionA.prototype); // undefined
console.log(fonctionB.prototype); // {constructor: ƒ}
Les fonctions fléchées ne peuvent pas être des fonctions génératrices, elles ne supportent pas le mot-clé yield
Résumé
- Le this d'une fonction fléchée est toujours lié au contexte lexical, indépendamment des méthodes comme call(), bind(), apply()
- Le this d'une fonction classique dépend de l'objet appelant