Les fonctions fléchées sont plus compactes, mais saviez-vous qu'elles introduisent de nombreuses autres différences ?
Les fonctions sont une partie essentielle de JavaScript que vous devez utiliser pour écrire du code réutilisable. Les deux principaux types de fonctions sont les fonctions régulières et fléchées, et il existe de nombreuses façons de les définir.
Même s'ils répondent à des besoins similaires, ils présentent quelques différences critiques qui peuvent fondamentalement influencer la façon dont vous les utilisez dans votre code. Apprenez tout sur plusieurs différences entre les fonctions fléchées et les fonctions régulières.
1. Différences de syntaxe
La syntaxe que vous choisissez lors du développement de fonctions JavaScript a un impact important sur la simplicité de lecture et de compréhension de votre code. La syntaxe des fonctions régulières et fléchées diffère considérablement, ce qui a un impact sur la façon dont vous les écrivez et les utilisez.
Fonctions fléchées JavaScript
utiliser une structure de langage plus petite et plus compréhensible. Vous pouvez les utiliser pour créer des fonctions en les combinant dans une seule expression ou instruction.constante ajouter = (un B) => un + b ;Dans cet exemple, le ajouter la fonction accepte deux entrées, un et b, et renvoie leur total. Le => sign définit cela comme une fonction fléchée.
D'autre part, définir une fonction régulière nécessite l'utilisation de la fonction mot-clé, avec une syntaxe plus détaillée, comme illustré dans cet exemple :
fonctionajouter(un B) {
retour un + b ;
}Dans cet exemple, le fonction Le mot clé définit une fonction régulière qui utilise également des accolades et le retour déclaration.
Les fonctions régulières sont plus utiles pour une syntaxe complexe nécessitant plusieurs instructions ou expressions. En revanche, les fonctions fléchées utilisent une syntaxe plus concise qui peut rendre votre code plus facile à lire et à comprendre.
2. Différences de portée
Le terme "portée" décrit comment les variables internes et les fonctions d'une fonction sont accessibles. En JavaScript, vous définissez et accédez à des variables et des fonctions dans votre code à l'aide de la portée. Leur distinct la portée peut avoir un impact significatif sur la façon dont vous écrivez et utilisez JavaScript flèche et fonctions régulières.
Dans la portée, comment les fonctions fléchées gèrent les ce Le mot-clé diffère considérablement de la façon dont fonctionnent les fonctions normales. Les fonctions régulières définissent ce mot-clé eux-mêmes; par conséquent, il peut changer en fonction du contexte dans lequel vous appelez la fonction.
D'autre part, parce qu'ils ne précisent pas ce mot-clé, les fonctions fléchées utilisent le même ce que la portée statique qui les entoure.
Pour voir la différence, consultez l'exemple suivant. Disons que vous avez un personne objet avec un nom propriété et une méthode appelée direNom() qui enregistre le nom de la personne à l'aide d'une fonction normale :
constante personne = {
nom: 'John,'direNom: fonction() {
console.enregistrer(ce.nom);
}
};
personne.sayName(); // enregistre 'John'
Ici, la fonction régulière sayName() est une méthode de l'objet person et le ce mot-clé à l'intérieur de cette fonction fait référence à cet objet personne.
Essayons maintenant la même chose avec une fonction fléchée :
constante personne = {
nom: 'John',direNom: () => {
console.enregistrer(ce.nom);
}
};
personne.sayName(); // journaux indéfinis
Étant donné que la fonction fléchée utilisée dans le direNom() la méthode ne définit pas la sienne ce mot-clé, il utilise le ce de la portée statique qui l'entoure. Dans ce cas, il s'agit de la portée globale de l'instance.
Par conséquent, lorsque vous appelez personne.sayName(), vous obtenez indéfini plutôt que "John." Cela peut avoir un impact significatif sur la façon dont vous écrivez et utilisez les fonctions dans votre code.
3. Cas d'utilisation et bonnes pratiques
Les fonctions régulières conviennent mieux aux fonctions qui nécessitent leur propre ce mot-clé, comme les méthodes dans un objet.
Les fonctions fléchées sont mieux adaptées pour programmation fonctionnelle et les rappels qui ne nécessitent pas ce mot-clé.
4. Différences de liaison de fonction
La liaison de fonction est le terme utilisé pour décrire la relation entre ce mot-clé et fonctions dans votre code. Les variations de liaison de fonction entre les fonctions fléchées et les fonctions normales peuvent avoir un impact important sur la façon dont vous construisez et utilisez les fonctions fléchées.
En utilisant le ce le rend unique dans les fonctions régulières et s'associe à divers objets en fonction de la méthode utilisée pour appeler la fonction. La liaison de fonction est l'une des distinctions les plus importantes entre les fonctions régulières et fléchées.
En revanche, les fonctions fléchées n'ont pas ce mot-clé; plutôt, ils l'obtiennent des champs d'application environnants.
Regardons un exemple pour mieux comprendre cette différence. Supposons que vous ayez un personne objet avec un nom champ et une méthode appelée direNom() qui utilise une fonction normale pour enregistrer le nom de la personne :
constante personne = {
nom: 'John',direNom: fonction() {
console.enregistrer(ce.nom);
}
};constante une autrePersonne = {
nom: 'Jeanne'
};
person.sayName.call (autrePersonne); // enregistre 'Jane'
Dans cet exemple, vous appelez l'objet personne direNom() méthode avec la valeur une autre personne en utilisant le appel() méthode. A cause de cela, le direNom() méthode, ce, le mot-clé est lié au une autre personne objet, et il se connecte "Jeanne" plutôt que "John."
Utilisons maintenant la même chose avec une fonction fléchée :
constante personne = {
nom: 'John',direNom: () => {
console.enregistrer(ce.nom);
}
};constante une autrePersonne = {
nom: 'Jeanne'
};
person.sayName.call (autrePersonne); // journaux indéfinis
Depuis le direNom() technique n'a pas son propre mot-clé, vous utilisez une fonction fléchée dans cet exemple. Dans ce cas, la fonction de flèche hérite des propriétés de la portée environnante, qui est la portée globale.
Cela signifie que lorsque vous exécutez person.sayName.call (une autre personne), la fonction fléchée ce le mot clé reste l'objet global, et indéfini prend la place de Jeanne dans le journal.
Si vous avez besoin de lier une fonction à un ce valeur, une fonction ordinaire peut être préférable. Cependant, si vous n'avez pas besoin de lier une fonction à un ce valeur, une fonction fléchée peut être plus courte et plus facile à comprendre.
5. Retour implicite
La fonction de flèche a une fonction de retour implicite. Si le corps de la fonction consiste en une seule expression, les fonctions renvoient cette expression.
Par exemple:
constante doublé = (X) => X * 2;Cette fonction fléchée renvoie un double à partir d'un paramètre. Vous n'avez pas besoin d'utiliser un mot de passe explicite retour mot-clé car le corps de la fonction n'a qu'une seule expression.
6. Différences de compatibilité
Les différences de compatibilité font référence aux fonctions de flèche ajoutées ECMAScript 6, qui peuvent ne pas fonctionner avec des navigateurs ou des environnements plus anciens. D'autre part, les fonctions régulières existent depuis le début de JavaScript et sont largement prises en charge.
Voici une illustration d'une fonction fléchée qui peut ne pas fonctionner dans des conditions plus établies :
constante ajouter = (un B) => un + b ;Voici une fonction régulière comparable qui devrait fonctionner dans la plupart des situations :
fonctionajouter(un B) {
retour un + b ;
}Utilisez des fonctions régulières plutôt que des fonctions fléchées lorsque vous ciblez des environnements plus anciens pour assurer la compatibilité. Cependant, les fonctions fléchées peuvent fournir une syntaxe plus facile à comprendre et plus condensée lorsque vous travaillez avec des navigateurs et des environnements modernes.
Choisir entre les fonctions fléchées et les fonctions régulières en JavaScript
En JavaScript, les fonctions fléchées et régulières ont des fonctionnalités et des applications distinctes. Les fonctions fléchées ont une syntaxe simple, héritant ce mot-clé du contexte de leur utilisation tandis que les fonctions régulières sont plus adaptables et peuvent faire face à des situations plus complexes.
Il est essentiel de savoir en quoi ils diffèrent et comment les utiliser selon les exigences de votre code. Lors de la sélection du type de fonction à utiliser, vous devez également tenir compte des différences de compatibilité.
En fin de compte, la flèche et les fonctions régulières de JavaScript sont des outils puissants qui vous aident à écrire un code plus propre et plus efficace.
