Fonction de flèche JavaScript
Les fonctions fléchées ont été introduites dans ES6.
Les fonctions fléchées nous permettent d'écrire une syntaxe de fonction plus courte :
let myFunction = (a, b) => a * b;
Avant de:
hello = function() {
return "Hello World!";
}
Avec la fonction Flèche :
hello = () => {
return "Hello World!";
}
ça devient plus court ! Si la fonction n'a qu'une seule instruction et que l'instruction renvoie une valeur, vous pouvez supprimer les crochets et le
mot- returnclé :
Les fonctions fléchées renvoient la valeur par défaut :
hello = () => "Hello World!";
Remarque : Cela ne fonctionne que si la fonction n'a qu'une seule instruction.
Si vous avez des paramètres, vous les passez entre parenthèses :
Fonction flèche avec paramètres :
hello = (val) => "Hello " + val;
En fait, si vous n'avez qu'un seul paramètre, vous pouvez également ignorer les parenthèses :
Qu'en est-il this?
La manipulation de thisest également différente dans les fonctions fléchées par rapport aux fonctions régulières.
En bref, avec les fonctions fléchées, il n'y a pas de liaison de
this.
Dans les fonctions régulières, le mot- thisclé représentait l'objet qui appelait la fonction, qui pouvait être la fenêtre, le document, un bouton ou autre.
Avec les fonctions fléchées, le mot- thisclé représente toujours l'objet qui a défini la fonction fléchée.
Prenons deux exemples pour comprendre la différence.
Les deux exemples appellent une méthode deux fois, d'abord lors du chargement de la page, puis une fois de plus lorsque l'utilisateur clique sur un bouton.
Le premier exemple utilise une fonction régulière et le deuxième exemple utilise une fonction fléchée.
Le résultat montre que le premier exemple renvoie deux objets différents (fenêtre et bouton) et que le deuxième exemple renvoie deux fois l'objet fenêtre, car l'objet fenêtre est le "propriétaire" de la fonction.
Exemple
Avec une fonction régulière thisreprésente l'objet qui appelle la fonction :
// Regular Function:
hello = function() {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
Exemple
Avec une flèche la fonction thisreprésente le
propriétaire de la fonction :
// Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
Souvenez-vous de ces différences lorsque vous travaillez avec des fonctions. Parfois, le comportement des fonctions régulières est ce que vous voulez, sinon, utilisez les fonctions fléchées.
Prise en charge du navigateur
Le tableau suivant définit les premières versions de navigateur avec prise en charge complète des fonctions fléchées en JavaScript :
| Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
| Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |