Introduction détaillée à la nouvelle fonctionnalité d'ECMAScript6, Fonction Flèche (Fonction Flèche)_Connaissances de base

Les fonctions fléchées sont l'une des mises à jour les plus évoquées dans ECMAScript 6. Il introduit une nouvelle syntaxe pour définir des fonctions à l'aide de "flèches" (=>), ce qui... c'est incroyable. Les principales différences entre les fonctions fléchées et les fonctions JavaScript traditionnelles sont les points suivants :
1. L'association avec ceci. La valeur de this à l'intérieur d'une fonction dépend de l'endroit où la fonction flèche est définie, et non du contexte dans lequel la fonction flèche est exécutée.
2.new n'est pas disponible. Les fonctions fléchées ne peuvent pas utiliser le mot-clé new pour instancier des objets, sinon une erreur sera signalée.
3.c'est immuable. Le this intégré de la fonction est immuable et constant dans tout l'environnement d'exécution du corps de la fonction.
4. Il n’y a pas d’objet arguments. Les paramètres entrants ne sont pas accessibles via l’objet arguments. Cela ne peut être fait qu'en utilisant une dénomination explicite ou d'autres nouvelles fonctionnalités ES6.

Ces différences sont justifiées. Premièrement, la liaison à ceci est l’une des sources courantes d’erreurs JavaScript. Il est facile de perdre la valeur de la fonction intégrée ou d'obtenir des résultats inattendus. Deuxièmement, limiter les fonctions fléchées à l’utilisation de références this fixes est bénéfique pour l’optimisation du moteur JavaScript.

1. Grammaire

La syntaxe de la fonction flèche est très simple, définissez la variable indépendante, puis la flèche et le corps de la fonction. Les variables indépendantes et les sujets peuvent être dans un format plus concis en fonction de leur utilisation. L'exemple suivant utilise une fonction fléchée qui transmet un paramètre et renvoie une valeur.

Copier le code Le code est le suivant :

var reflet = valeur =>
// Équivalent à :

var réflexion = fonction(valeur) {
valeur de retour ;
};

Comme vous pouvez le constater, si vous passez un paramètre, écrivez-le simplement directement sans ajouter de parenthèses. La flèche pointe vers le corps de la fonction, mais le corps de la fonction n'est qu'une simple instruction return, il n'est donc pas nécessaire d'ajouter des accolades. Une fois la fonction construite, elle est affectée à la réflexion pour référence.
Si vous devez transmettre plusieurs paramètres, vous devez ajouter des parenthèses. Par exemple :

Copier le code Le code est le suivant :

var sum = (num1, num2) = > num1 num2;
// Équivalent à :
var sum = function(num1, num2) {
return num1 num2;
};

La méthode sum() ajoute deux paramètres et renvoie le résultat. La seule différence par rapport à l'exemple précédent est que deux paramètres sont transmis, ils sont donc mis entre parenthèses. C'est la même chose qu'une fonction traditionnelle, avec des virgules séparant les paramètres passés entre parenthèses. De même, si la fonction ne nécessite pas de paramètres, des parenthèses vides doivent être utilisées à la place.

Copier le code Le code est le suivant :

var sum = () => 🎜>/ / Equivalent à :
var sum = function() {
return 1 2;
};

Si vous souhaitez utiliser un corps de fonction standard, ou s'il peut y avoir plusieurs instructions à exécuter dans le corps de la fonction, placez le corps de la fonction entre accolades et définissez clairement la valeur de retour. Par exemple :

Copier le code Le code est le suivant :

var sum = (num1, num2) => ; { return num1 num2;
//Équivalent à :
var sum = function(num1, num2) {
return num1 num2;
};

La partie à l'intérieur des accolades est fondamentalement équivalente à la fonction traditionnelle, sauf que le paramètre arguments n'est pas disponible.

Parce que les accolades sont les symboles du corps fonctionnel. Si la fonction fléchée souhaite renvoyer un objet personnalisé, l'objet doit être mis entre parenthèses. Par exemple :

Copier le code Le code est le suivant :

var getTempItem = id = >
id : id,
nom : "Temp"
});
// Équivalent à :
var getTempItem = function(id) {
return {
id : id,
nom : "Temp"
};
};

Comme le montre l'exemple ci-dessus, l'utilisation de parenthèses pour inclure des accolades est la définition de l'objet, pas le corps de la fonction.

2. Utiliser

L'une des erreurs les plus courantes en JavaScript est cette association au sein des fonctions. Étant donné que la valeur est basée sur l'environnement d'exécution actuel de la fonction, des malentendus se produiront lors de l'appel, ce qui affectera d'autres objets non liés. Voir l'exemple ci-dessous :

Copier le code Le code est le suivant :

var PageHandler = {
id : "123456" ,
init : function() {
document.addEventListener("click", function(event) {
this.doSomething(event.type); // erreur
}, false );
},
doSomething: function(type) {
console.log("Gestion du " type " pour " this.id);
}
};

Dans ce code, l'intention initiale est d'utiliser la méthode init() de PageHandler pour créer des interactions et appeler this.doSomething() dans la fonction de gestion des événements de clic. Cependant, le code n'a pas été exécuté conformément à l'intention de conception d'origine. Au moment de l'exécution, cela pointait vers l'objet global au lieu du PageHandler, ce qui rendait l'appel this.doSomething() invalide et une erreur était signalée car la méthode doSomething ne le faisait pas. existent dans l'objet global.
Bien sûr, vous pouvez utiliser bind() dans la fonction pour l'associer clairement au PageHandler, voir ci-dessous :

Copier le code Le code est le suivant :

var PageHandler = {

id : "123456",

init : function() {
document. addEventListener("click" , (function(event) {
This.doSomething(event.type);
}).bind(this), false);
},

doSomething : function(type) {
         console.log("Gestion du " type " pour " this.id attendu); En appelant bind(this) de la fonction, un nouveau retour de fonction est créé et associé au this existant, ce qui signifie qu'une couche supplémentaire est encapsulée pour atteindre l'objectif.
Étant donné que la fonction flèche prend déjà en charge cette association, il est plus pratique d'utiliser la fonction flèche ici. Voir l'exemple suivant :

Copier le code

Le code est le suivant : var PageHandler = { id : "123456",

init : function() {

document.addEventListener("click ",
event = > this.doSomething(event.type), false);
},

doSomething : function(type) {
console. log("Gestion de " tapez " pour " this.id);
}
};



La fonction de gestion des événements dans cet exemple appelle la fonction flèche de this.doSomething(). La valeur de this est la valeur this dans init(). C’est donc équivalent à bind().
La nature concise et concise de la fonction flèche en fait également un choix idéal pour les arguments d'autres fonctions. Par exemple, si vous souhaitez utiliser un comparateur personnalisé pour trier un tableau sur ES5, le code type est le suivant :

Copiez le code

Le code est le suivant :var result = valeurs.sort(function(a, b) {             return a - b; });

L'exemple ci-dessus utilise beaucoup de syntaxe pour implémenter une opération simple. Si vous utilisez les fonctions fléchées, vous pouvez écrire du code très concis :

Copiez le code

Le code est le suivant :var résultat = valeurs.sort((a, b) => a - b);

Array sort/map/reduce et d'autres méthodes prennent toutes en charge les fonctions de rappel. L'utilisation des fonctions fléchées peut simplifier le processus d'écriture et libérer vos mains pour faire ce que vous voulez faire.

3. Supplément

Les fonctions fléchées sont certes différentes des fonctions traditionnelles, mais elles ont tout de même des caractéristiques communes. Par exemple :
1. Le type d'opération sur la fonction flèche renverra "fonction".
2. La fonction flèche est toujours une instance de Function, donc la méthode d'exécution de instanceof est cohérente avec la fonction traditionnelle.
3. La méthode call/apply/bind est toujours applicable aux fonctions fléchées, mais même si ces méthodes sont appelées pour étendre la portée actuelle, cela ne changera toujours pas.
La plus grande différence entre les fonctions fléchées et les fonctions traditionnelles est que la nouvelle opération est désactivée.

4.Conclusion

La fonction Flèche est une nouvelle fonctionnalité d'ECMAScript 6 qui a beaucoup attiré l'attention et qui est toujours en cours d'optimisation. Utiliser une syntaxe courte pour définir des fonctions ou des instructions pour écrire des processus est la tendance générale. Ils sont voués à exploser et personne ne peut les arrêter. Son association avec le mot-clé this soulage les développeurs et permet d'améliorer les performances grâce à l'optimisation du moteur JavaScript. Cela dit, les amis ont déjà soif de leurs épées. Si vous souhaitez essayer la fonction flèche, ouvrez simplement la dernière version de Firefox.