La fonction Arrow est l'une des mises à jour les plus populaires de ECMAScript 6. Il introduit une nouvelle syntaxe pour définir des fonctions en utilisant "Arrow" (=>), il ... il est coérigé ~. Les principales différences entre les fonctions de flèche et les fonctions JavaScript traditionnelles sont les suivantes:
1. Pertinence pour cela. La valeur de ceci est intégrée, selon l'endroit où la fonction de flèche est définie, et non le contexte dans lequel la fonction flèche est exécutée.
2.New n'est pas disponible. La fonction Arrow ne peut pas utiliser le nouveau mot clé pour instancier l'objet, sinon une erreur sera signalée.
3.Ce est immuable. Ceci est intégré à la fonction et est une constante dans tout l'environnement d'exécution dans le corps de la fonction.
4. Aucun argument objet. Les paramètres entrants ne peuvent pas être accessibles via l'objet Arguments. Cela ne peut être fait qu'à l'aide de dénomination explicite ou d'autres nouvelles fonctionnalités ES6.
L'existence de ces différences est raisonnable. Premièrement, la liaison à cela est l'une des sources courantes d'erreurs JavaScript. Il est facile de perdre des valeurs intégrées des fonctions ou d'obtenir des résultats inattendus. Deuxièmement, la limitation de la fonction de flèche à l'utilisation de cette référence fixe est propice au traitement d'optimisation du moteur JavaScript.
1. Syntaxe
La syntaxe d'une fonction de flèche est simple, définissant les variables indépendantes, puis la flèche et le corps de la fonction. Des variables et des sujets indépendants peuvent être utilisés dans un format plus concis en raison d'une utilisation différente. L'exemple suivant est une fonction flèche qui passe un paramètre et renvoie une valeur.
La copie de code est la suivante:
var réflect = valeur => valeur;
// équivalent à:
var réflect = fonction (valeur) {
valeur de retour;
};
On peut voir que vous pouvez simplement écrire un paramètre en le faisant passer, sans ajouter de supports. La flèche pointe vers le corps de la fonction, mais le corps de fonction n'est qu'une simple instruction de retour, il n'est donc pas nécessaire d'ajouter des accolades. Une fois la fonction construite, il est affecté pour réfléchir et référence.
Si plusieurs paramètres doivent être transmis, des supports doivent être ajoutés. Par exemple:
La copie de code est la suivante:
var sum = (num1, num2) => num1 + num2;
// équivalent à:
var sum = fonction (num1, num2) {
return num1 + num2;
};
La méthode sum () consiste à ajouter deux paramètres et à transmettre le résultat. La seule différence par rapport à l'exemple précédent est que deux paramètres sont passés, ils doivent donc être enfermés entre parenthèses. C'est comme les fonctions traditionnelles, avec des virgules entre parenthèses séparées en paramètres. De même, si la fonction n'a pas besoin de passer par des paramètres, il doit également être remplacé par des supports vides.
La copie de code est la suivante: var sum = () => 1 + 2;
// équivalent à:
var sum = fonction () {
retour 1 + 2;
};
Si vous souhaitez utiliser un corps de fonction standard ou s'il peut y avoir plus d'instructions pour exécuter dans le corps de la fonction, enfermez le corps de la fonction en accolades et définissez clairement la valeur de retour. Par exemple:
La copie de code est la suivante:
var sum = (num1, num2) => {return num1 + num2; }
// équivalent à:
var sum = fonction (num1, num2) {
return num1 + num2;
};
La partie des accolades est essentiellement équivalente aux fonctions traditionnelles, sauf que le paramètre des arguments n'est pas disponible.
Parce que les accolades sont le logo du corps de la fonction. Si la fonction Arrow souhaite renvoyer un objet personnalisé, il doit d'abord enfermer l'objet entre parenthèses. Par exemple:
La copie de code est la suivante:
var getTempItem = id => ({{
je l'ai fait,
Nom: "Temp"
});
// équivalent à:
var getTempItem = fonction (id) {
retour {
je l'ai fait,
Nom: "Temp"
};
};
Comme on peut le voir à partir de l'exemple ci-dessus, l'utilisation de supports pour inclure des supports bouclés est la définition de l'objet, et non le corps de la fonction.
2. Utiliser
L'une des erreurs les plus courantes en JavaScript est cette association à l'intérieur d'une fonction. Parce que cela prend la valeur en fonction de l'environnement d'exécution actuel de la fonction, cela provoquera des malentendus lors de l'appel, ce qui entraînera un impact sur d'autres objets non apparentés. Voir l'exemple suivant:
La copie de code est la suivante:
var pagehandler = {
ID: "123456",
init: function () {
document.addeventListener ("cliquez", fonction (événement) {
this.dosomething (event.type); // erreur
}, FAUX);
},
dosomething: function (type) {
Console.log ("Manipulation" + Type + "pour" + this.id);
}
};
Dans ce code, l'intention d'origine est de laisser l'utilisation de la méthode init () de PageHandler pour créer des interactions et appeler This.doSomething () dans la fonction de gestionnaire d'événements de clic. Cependant, le code n'est pas exécuté en fonction de l'intention de conception d'origine. Au moment de l'exécution, cela pointe vers l'objet global au lieu de la page de page, ce qui provoque cet appel.
Bien sûr, vous pouvez utiliser bind () dans la fonction pour l'associer explicitement à PageHandler, voir ci-dessous:
La copie de code est la suivante:
var pagehandler = {
ID: "123456",
init: function () {
document.addeventListener ("cliquez", (fonction (événement) {
this.dosomething (event.type);
}). bind (this), false);
},
dosomething: function (type) {
Console.log ("Manipulation" + Type + "pour" + this.id);
}
};
Bien que cela semble un peu bizarre, l'exécution du code est désormais conforme aux attentes. En appelant la liaison (ceci) de la fonction, une nouvelle fonction qui a été associée à la présence existante est créée, ce qui signifie qu'une autre couche est incluse afin d'atteindre l'objectif.
Étant donné que la fonction Arrow prend déjà en charge cette association, il sera plus rafraîchissant d'utiliser la fonction Arrow ici. Voir l'exemple suivant:
La copie de code est la suivante:
var pagehandler = {
ID: "123456",
init: function () {
document.addeventListener ("cliquez",
événement => this.dosomething (event.type), false);
},
dosomething: function (type) {
Console.log ("Manipulation" + Type + "pour" + this.id);
}
};
La fonction de traitement des événements dans cette instance appelle la fonction flèche de ce.dosomething (). La valeur de ceci en est la valeur de cette init (). Par conséquent, il équivaut à lier ().
La nature concise et concise des fonctions flèches en fait également un choix idéal pour d'autres variables indépendantes de la fonction. Par exemple, pour utiliser un comparateur personnalisé pour organiser des tableaux sur ES5, voir le code typique ci-dessous:
La copie de code est la suivante:
var result = valeurs.sort (fonction (a, b) {
retourner a - b;
});
L'exemple ci-dessus utilise de nombreuses syntaxes pour implémenter une opération simple. Si vous utilisez des fonctions Arrow, vous pouvez écrire du code très raffiné:
La copie de code est la suivante:
var result = valeurs.sort ((a, b) => a - b);
Les méthodes SORT / MAP / RÉDUIRE D'APPRÉPAGENT SURVITE les fonctions de rappel. L'utilisation des fonctions Arrow peut simplifier le processus d'écriture et libérer vos mains pour faire ce que vous voulez.
3. Compléter
Les fonctions de flèche sont en effet différentes des fonctions traditionnelles, mais elles ont toujours des caractéristiques communes. Par exemple:
1. Le fonctionnement du type de la fonction de flèche renvoie "fonction".
2. La fonction de flèche est toujours une instance de fonction, donc la méthode d'exécution de l'instance est cohérente avec celle des fonctions traditionnelles.
3.Call/apply/bind La méthode est toujours applicable aux fonctions de flèche, mais même si ces méthodes sont appelées pour étendre la portée actuelle, cela ne changera pas.
La plus grande différence entre les fonctions Arrow et les fonctions traditionnelles est que les nouvelles opérations sont désactivées.
4. Conclusion
La fonction Arrow est une nouvelle caractéristique d'Ecmascript 6 qui a attiré beaucoup d'attention et est constamment optimisée. C'est une tendance générale d'utiliser une brève grammaire pour définir le processus d'écriture des fonctions ou des déclarations, et ils seront sûrement invincibles et personne ne peut les arrêter. Son association avec le mot clé, cela rend les développeurs qui ne sont plus ennuyés et l'optimise pour améliorer les performances via JavaScript Engine. En parlant de cela, mes amis ont déjà soif. Si vous souhaitez essayer la fonction Arrow, ouvrez simplement la dernière version de Firefox.