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 :
soit maFonction = (a, b) => a * b;
Essayez-le vous-même »
ç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
return mot-clé:
Note: 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 :
En fait, si vous n’avez qu’un seul paramètre, vous pouvez également ignorer les parenthèses :
Qu’en est-il de this?
La manipulation de this est également différent 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 this Le mot-clé représentait l’objet qui appelait la fonction, qui pouvait être la fenêtre, le document, un bouton ou quoi que ce soit.
Avec les fonctions fléchées, le this mot-clé toujours représente l’objet qui a défini la fonction flèche.
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 this représente l’objet qui appels la fonction:
// Fonction régulière :
bonjour = fonction() {
document.getElementById(“demo”).innerHTML += this ;
}
// L’objet fenêtre appelle la fonction :
window.addEventListener(“charger”, bonjour);
// Un objet bouton appelle la fonction :
document.getElementById(“btn”).addEventListener(“click”, bonjour);
Essayez-le vous-même »
Exemple
Avec une fonction flèche this représente le
propriétaire de la fonction :
// Fonction Flèche :
bonjour = () => {
document.getElementById(“demo”).innerHTML += this ;
}
// L’objet fenêtre appelle la fonction :
window.addEventListener(“charger”, bonjour);
// Un objet bouton appelle la fonction :
document.getElementById(“btn”).addEventListener(“click”, bonjour);
Essayez-le vous-même »
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 | Bord 12 | Firefox 22 | Safari 10 | Opéra 32 |
| Septembre 2015 | juillet 2015 | mai 2013 | Septembre 2016 | Septembre 2015 |
#Fonction #flèche #JavaScript
