Fonctions fléchées JavaScript

Les fonctions fléchées ont été introduites dans ES6.

Les fonctions fléchées nous permettent d'écrire des fonctions plus courtes :

Syntaxe

let myFunction = (a, b) => a * b;

Essayez-le vous-même

Avant :

hello = function() {
  return "Hello World!";
}

Essayez-le vous-même

Après avoir utilisé les fonctions fléchées :

hello = () => {
  return "Hello World!";
}

Essayez-le vous-même

Cela raccourcit vraiment ! Si la fonction ne contient qu'une seule instruction et que cette instruction retourne une valeur, vous pouvez supprimer les parenthèses et return Mot-clé :

Valeur de retour par défaut des fonctions fléchées :

hello = () => "Hello World!";

Essayez-le vous-même

Remarque :Cela ne fonctionne que si la fonction ne contient qu'une seule instruction.

Si vous avez des paramètres, vous devez les passer dans les parenthèses :

Fonction fléchée avec paramètres :

hello = (val) => "Hello " + val;

Essayez-le vous-même

En réalité, si il n'y a qu'un seul paramètre, vous pouvez également omettre les parenthèses :

Fonction fléchée sans parenthèses :

hello = val => "Hello " + val;

Essayez-le vous-même

ceci que faire ?

Comparé aux fonctions habituelles, les fonctions fléchées ont un ceci le traitement est également différent.

En résumé, utiliser des fonctions fléchées n'a pas d'effet sur ceci est lié.

Dans les fonctions habituelles, le mot-clé ceci représente l'objet appelant la fonction, qui peut être la fenêtre, le document, le bouton ou tout autre chose.

Pour les fonctions fléchées,ceci Le mot-clé représente toujours l'objet définissant la fonction fléchée.

Laissons voir deux exemples pour comprendre les différences.

Ces deux exemples appellent deux fois la méthode, la première fois lors du chargement de la page, et la deuxième fois lorsque l'utilisateur clique sur le bouton.

Le premier exemple utilise une fonction habituelle, et le second exemple utilise une fonction fléchée.

Les résultats montrent que le premier exemple retourne deux objets différents (window et button), et que le second exemple retourne deux fois l'objet window, car l'objet window est le « propriétaire » de la fonction.

exemple

Pour les fonctions habituelles, this représente l'objet appelant la fonction :

// Fonction habituelle :
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// Appel de la fonction par l'objet window :
window.addEventListener("load", hello);
// Appel de la fonction par l'objet bouton :
document.getElementById("btn").addEventListener("click", hello);

Essayez-le vous-même

exemple

si utilise des fonctions fléchées, alors ceci représente le propriétaire de la fonction :

// Fonction flèche :
hello = () => {
  document.getElementById("demo").innerHTML += this;
}
// Appel de la fonction par l'objet window :
window.addEventListener("load", hello);
// Appel de la fonction par l'objet bouton :
document.getElementById("btn").addEventListener("click", hello);

Essayez-le vous-même

N'oubliez pas ces différences lors de l'utilisation de fonctions. Parfois, le comportement d'une fonction classique est exactement ce que vous voulez, sinon, utilisez des fonctions fléchées.

Prise en charge du navigateur

Le tableau suivant indique la première version de navigateur qui prend en charge pleinement les fonctions fléchées JavaScript :

Chrome IE Firefox Safari Opera
Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
Septembre 2015 Juillet 2015 Mai 2013 Septembre 2016 Septembre 2015