Différences entre les fonctions fléchées et les fonctions classiques en JavaScript

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

Étiquettes: JavaScript Fonctions Fléchées this arguments prototype

Publié le 8 septembre à 04h17