Quand utiliser une fonction d'expression de fonction contre la fonction de fonction

JavaScript Fonction Définition Méthode: Expressions de fonction et déclarations de fonction. Cet article explore quand utiliser les expressions de fonction, quand utiliser les déclarations de fonction et explique les différences entre les deux.

Les déclarations de fréquence sont largement utilisées depuis longtemps, mais les expressions de fonction ont progressivement dominé. De nombreux développeurs ne savent pas quand utiliser celui, ce qui mène finalement au mauvais choix.

Il existe des différences clés entre les expressions de fonction et les déclarations de fonction. Examinons de plus près ces différences et quand utiliser les expressions de fonction et les déclarations de fonction dans votre code.

<code class="language-javascript">function funcDeclaration() {
    return '函数声明';
}

let funcExpression = function () {
    return '函数表达式';
}</code>

points clés

• Les expressions de fonctions et les déclarations de fonction sont deux façons de créer des fonctions dans JavaScript. La déclaration de fonction est nommée, et en raison de la promotion variable, elle peut être appelée avant la définition;
• Les expressions de fonction sont plus flexibles que les déclarations de fonction. Ils peuvent être utilisés immédiatement après la définition, utilisés comme paramètres vers une autre fonction, et peuvent être anonymes. Les déclarations de fonction, en revanche, sont plus lisibles, en particulier pour les fonctions longues, et peuvent être appelées avant la définition en raison de la promotion variable.
• Le choix d'une expression de fonction ou d'une déclaration de fonction dépend des exigences spécifiques du code. Les déclarations de fonction sont généralement utilisées lorsque des fonctions récursives sont nécessaires ou lorsqu'une fonction doit être appelée avant de définir une fonction. Les expressions de fonction sont idéales pour écrire du code plus propre lorsque les deux opérations ne sont pas nécessaires.
• Les expressions de fonction peuvent être utilisées pour créer des fermetures, les transmettre comme arguments à d'autres fonctions et appeler l'expression de fonction (iife) immédiatement. Cela en fait des outils polyvalents et puissants dans la boîte à outils du développeur.

Qu'est-ce qu'une déclaration de fonction?

La déclaration de fonction est effectuée lorsqu'une fonction est créée et nommée. Après avoir écrit le mot-clé function, suivez le nom de la fonction et déclarez le nom de la fonction. Par exemple:

<code class="language-javascript">function myFunction() {
  // 执行某些操作
};</code>

Comme vous pouvez le voir, déclarez le nom de la fonction (myFunction) lors de la création de la fonction. Cela signifie que vous pouvez l'appeler avant de définir la fonction.

Il s'agit d'un exemple de déclaration de fonction:

<code class="language-javascript">function add(a, b) {
  return a + b;
};</code>

Qu'est-ce qu'une expression de fonction?

Les expressions de fonction sont effectuées lors de la création d'une fonction et de l'attribution à une variable. La fonction est anonyme, ce qui signifie qu'elle n'a pas de nom. Par exemple:

<code class="language-javascript">let myFunction = function() {
  // 执行某些操作
};</code>

Comme vous pouvez le voir, la fonction est affectée à la variable myFunction. Cela signifie que vous devez le définir avant d'appeler la fonction.

Ceci est un exemple d'expression de fonction:

<code class="language-javascript">let add = function (a, b) {
  return a + b;
};</code>

Différence entre l'expression de la fonction et la déclaration

Il existe quelques différences clés entre les expressions de fonction et les déclarations de fonction:

• Les déclarations de fonction seront promues, contrairement aux expressions de fonction. Cela signifie que vous pouvez l'appeler avant de définir la déclaration de fonction, mais vous ne pouvez pas le faire avec l'expression de la fonction.
• En utilisant des expressions de fonction, vous pouvez l'utiliser immédiatement après la définition d'une fonction. Avec les déclarations de fonction, vous devez attendre que l'ensemble du script soit analysé.
• Les expressions de fonction peuvent être utilisées comme paramètres d'une autre fonction, mais la déclaration de fonction ne peut pas être effectuée.
• Les expressions de fonction peuvent être anonymes, mais les déclarations de fonction ne le peuvent pas.

Comprendre la portée des expressions de fonction: JavaScript améliore la différence

Similaire aux instructions let, les déclarations de fonction sont promues en haut d'autres codes.

Les expressions de fonction ne seront pas promues. Cela leur permet de conserver des copies des variables locales tirées de la portée dans laquelle ils sont définis.

Habituellement, vous pouvez utiliser des déclarations de fonction et des expressions de fonction interchangeables. Cependant, parfois les expressions de fonction conduisent à un code plus facile à comprendre sans avoir besoin de noms de fonction temporaires.

Comment choisir les expressions et les déclarations

Donc, quand les expressions de fonction doivent-elles être utilisées et quand les déclarations de fonction doivent-elles être utilisées?

La réponse dépend de vos besoins. Si vous avez besoin d'une fonction plus flexible ou d'une fonction qui ne sera pas promue, les expressions de fonction sont le meilleur choix. Si vous avez besoin d'une fonction plus lisible et compréhensible, utilisez la déclaration de fonction.

Comme vous pouvez le voir, les deux syntaxes sont similaires. La différence la plus évidente est que les expressions de fonction sont anonymes, tandis que les déclarations de fonction sont célèbres.

De nos jours, lorsque vous devez faire quelque chose qu'une expression de fonction ne peut pas faire, les déclarations de fonction sont généralement utilisées. Si vous n'avez pas besoin d'effectuer des opérations qui ne peuvent être effectuées qu'avec une déclaration de fonction, il est généralement préférable d'utiliser des expressions de fonction.

Utilisez la déclaration de fonction lorsque vous devez créer une fonction récursive ou avoir besoin d'appeler une fonction avant de la définir. En règle générale, lorsque vous n'avez pas besoin de faire les deux, utilisez des expressions de fonction pour écrire du code plus nettoyant.

Avantages des déclarations de fonction

Il existe certains avantages clés à utiliser les déclarations de fonction.

• Cela peut rendre votre code plus facile à lire. Si vous avez une longue fonction, le nommer peut vous aider à garder une trace de ce qu'il fait.
• Les déclarations de fonction sont promues, ce qui signifie qu'elles sont disponibles avant d'être définies dans le code. Cela vous aidera si vous devez l'utiliser avant de définir la fonction.

Avantages des expressions de fonction

Les expressions de fonction présentent également certains avantages.

• Ils sont plus flexibles que les déclarations de fonction. Vous pouvez créer des expressions de fonction et les affecter à différentes variables, ce qui est utile lorsque vous devez utiliser la même fonction à différents endroits.
• Les expressions de fonction ne sont pas promues, vous ne pouvez donc pas les utiliser avant de les définir dans votre code. Cela vous aidera si vous souhaitez vous assurer de l'utiliser uniquement après avoir défini la fonction.

Quand devrais-je choisir une déclaration de fonction et une expression de fonction

Dans la plupart des cas, il est facile de déterminer quelle méthode définir une fonction est la meilleure pour vos besoins. Ces directives vous aideront à prendre des décisions rapidement dans la plupart des cas.

Utiliser les déclarations des fonctions dans les cas suivants:

• Vous avez besoin de fonctions plus lisibles et compréhensibles (telles que les fonctions longues ou les fonctions que vous devez utiliser à différents endroits)
• Les fonctions anonymes ne conviennent pas à vos besoins
• Vous devez créer une fonction récursive
• Vous devez l'appeler avant de définir la fonction

Utiliser les expressions de fonction dans les cas suivants:

• Vous avez besoin de fonctions plus flexibles
• Vous avez besoin d'une fonction qui ne sera pas promue
• Cette fonction ne doit être utilisée que lorsqu'elle est définie
• Cette fonction est anonyme, ou le nom n'est pas requis à l'avenir
• Vous souhaitez contrôler le temps d'exécution de la fonction, en utilisant des techniques telles que les expressions de fonction d'appel immédiatement (iife)
• Vous souhaitez passer la fonction comme un argument à une autre fonction

c'est-à-dire, dans de nombreux cas, la flexibilité des expressions de fonction devient un avantage puissant.

Le potentiel des expressions de fonction de déchaînement: JavaScript améliore la différence

Il existe de nombreuses façons de fonctionner les expressions plus utiles que les déclarations de fonction.

• Clôture
• Arguments d'autres fonctions
• Appelez immédiatement l'expression de la fonction (iife)

Créer des fermetures à l'aide d'expressions de fonction

Les fermetures peuvent être utilisées lorsque vous souhaitez transmettre des paramètres à une fonction avant de l'exécuter. Un bon exemple de la façon dont cela vous profite lors de la boucle à travers le nodeliste.

La fermeture vous permet de conserver des informations supplémentaires, telles que les index, lorsque les informations sont indisponibles après l'exécution de la fonction.

<code class="language-javascript">function funcDeclaration() {
    return '函数声明';
}

let funcExpression = function () {
    return '函数表达式';
}</code>

Le gestionnaire d'événements supplémentaires est exécuté ultérieurement (après la fin de la boucle), de sorte que la fermeture est nécessaire pour préserver la valeur appropriée de la boucle for.

<code class="language-javascript">function myFunction() {
  // 执行某些操作
};</code>

Il est plus facile de comprendre pourquoi le problème se produit en extraction de la fonction for de la boucle doSomething().

<code class="language-javascript">function add(a, b) {
  return a + b;
};</code>

La solution ici est de passer l'index en tant que paramètre de fonction à la fonction externe afin qu'il puisse transmettre la valeur à la fonction interne. Vous verrez généralement les informations dont vous avez besoin pour utiliser les fonctions de gestionnaire pour organiser les fonctions de retour internes.

<code class="language-javascript">let myFunction = function() {
  // 执行某些操作
};</code>

En savoir plus sur la fermeture des forfaits et leur utilisation.

passant l'expression de la fonction comme paramètre

Les expressions de fonction peuvent être transmises directement à la fonction sans avoir besoin d'attribuer des valeurs aux variables temporaires intermédiaires.

Vous les voyez le plus souvent sous la forme de fonctions anonymes. Voici un exemple familier de l'expression de la fonction jQuery:

<code class="language-javascript">let add = function (a, b) {
  return a + b;
};</code>

Les expressions de fonction sont également utilisées pour traiter les éléments du tableau lors de l'utilisation de méthodes telles que forEach().

Ils n'ont pas non plus à être des fonctions anonymes anonymes. Il est préférable de nommer des expressions de fonction pour aider à exprimer ce que les fonctions doivent faire et aider à déboguer:

<code class="language-javascript">function tabsHandler(index) {
    return function tabClickEvent(evt) {
        // 对选项卡执行操作。
        // 可以从此处访问 index 变量。
    };
}

let tabs = document.querySelectorAll('.tab'),
    i;

for (i = 0; i < tabs.length; i += 1) {
    tabs[i].onclick = tabsHandler(i);
}</code>

Appelez immédiatement l'expression de la fonction (iife)

iife aide à empêcher vos fonctions et variables d'affecter la portée globale.

Toutes les propriétés s'y trouvent dans le cadre des fonctions anonymes. Il s'agit d'un schéma courant pour empêcher les effets secondaires inattendus ou indésirables du code ailleurs.

Il est également utilisé comme mode de module pour inclure des blocs de code dans des sections facilement entretenues. Nous explorons ces plus approfondis dans la découverte du mystère des fermetures, des rappels et des ife.

Ceci est un exemple simple de iife:

<code class="language-javascript">function funcDeclaration() {
    return '函数声明';
}

let funcExpression = function () {
    return '函数表达式';
}</code>

… Lorsqu'il est utilisé comme module, le code peut être facilement maintenu.

<code class="language-javascript">function myFunction() {
  // 执行某些操作
};</code>

Conclusion

Comme nous pouvons le voir, les expressions de fonction ne sont pas fondamentalement différentes des déclarations de fonction, mais elles peuvent souvent produire du code plus propre et plus lisible.

Ils sont largement utilisés, ce qui en fait une partie essentielle de chaque boîte à outils de développeur. Utilisez-vous des expressions de fonction dans votre code d'une manière intéressante que je n'ai pas mentionnée ci-dessus? S'il vous plaît laissez-moi savoir dans les commentaires!

FAQ sur les expressions de fonction et les déclarations de fonction (FAQ)

Quelle est la principale différence entre les expressions de fonction et les déclarations de fonction?

La principale différence entre les expressions de fonction et les déclarations de fonction est la façon dont le moteur JavaScript les interprète. Les déclarations de fonction sont analysées avant que tout code ne soit exécuté, ce qui signifie que vous pouvez appeler les fonctions déclarées plus tard dans votre code. C'est ce qu'on appelle le levage de la fonction. D'un autre côté, les expressions de fonction ne sont pas promues et ne peuvent donc pas être appelées avant la définition.

Pouvez-vous fournir des exemples de déclarations de fonction et d'expressions de fonction?

Bien sûr, voici un exemple de chacun:

Déclaration de fonction:

<code class="language-javascript">function add(a, b) {
  return a + b;
};</code>

Expression de la fonction:

<code class="language-javascript">let myFunction = function() {
  // 执行某些操作
};</code>

Quand dois-je utiliser des déclarations de fonction au lieu d'expressions de fonction?

Lorsque vous devez créer des fonctions qui seront utilisées tout au long de votre code, les déclarations de fonction sont généralement utilisées car elles sont promues en haut de la portée. Cela signifie que vous pouvez appeler la fonction avant de le déclarer dans votre code. Les expressions de fonction, en revanche, sont généralement utilisées pour les fonctions qui ne nécessitent qu'un seul ou un nombre fini de fois, ou lorsqu'une fonction est transmise comme un argument à une autre fonction.

Les expressions de fonctions peuvent-elles être nommées?

Oui, les expressions de fonction peuvent être nommées. Ceci est très utile pour le débogage, car le nom de la fonction apparaîtra dans la trace de pile. Voici un exemple:

<code class="language-javascript">let add = function (a, b) {
  return a + b;
};</code>

Qu'est-ce que l'amélioration des fonctions?

La promotion de la fonction dans JavaScript est un comportement dans lequel une déclaration de fonction est déplacée en haut de sa portée contenant pendant la phase de compilation (avant l'exécution du code). Cela signifie que vous pouvez appeler la fonction avant de le déclarer dans votre code. Cependant, il convient de noter que les expressions de fonction (même les expressions attribuées aux variables) ne seront pas promues.

Comment est une expression de fonction appelée immédiatement (iife)?

Appelez immédiatement l'expression de la fonction (iife) est une expression de fonction qui est exécutée immédiatement après sa définition. La syntaxe de iife est la suivante:

<code class="language-javascript">function tabsHandler(index) {
    return function tabClickEvent(evt) {
        // 对选项卡执行操作。
        // 可以从此处访问 index 变量。
    };
}

let tabs = document.querySelectorAll('.tab'),
    i;

for (i = 0; i < tabs.length; i += 1) {
    tabs[i].onclick = tabsHandler(i);
}</code>

Puis-je utiliser des expressions de fonction et des déclarations de fonction interchangeables?

Bien que les expressions de fonction et les déclarations de fonction soient généralement utilisées de manière interchangeable, il existe des différences clés à noter. Les déclarations de fonction sont promues, ce qui signifie qu'elles peuvent être appelées avant la déclaration. D'un autre côté, les expressions de fonction ne sont pas promues et ne peuvent donc pas être appelées avant la définition. De plus, les expressions de fonction peuvent être anonymes ou nommées, tandis que les déclarations de fonction doivent toujours être nommées.

Quels sont les avantages de l'utilisation d'expressions de fonction?

Les expressions de fonction offrent certains avantages. Ils peuvent être anonymes, peuvent être définis sur auto-exécutables (expressions de fonction d'appel immédiatement) et peuvent être affectées aux variables et transmises. Cela rend les expressions de fonction très adaptées à une utilisation en tant que fermetures et fonctions de rappel.

Existe-t-il une différence de performance entre les expressions de fonction et les déclarations de fonction?

Généralement, les différences de performances entre les expressions de fonction et les déclarations de fonction sont négligeables et sont peu susceptibles d'affecter les performances du code JavaScript. Le choix des expressions de fonction et des déclarations de fonction doit être basé sur vos préférences d'utilisation et de style de codage spécifiques.

Les expressions de fonctions peuvent-elles être utilisées comme fermetures?

Oui, les expressions de fonction sont souvent utilisées pour créer des fermetures en JavaScript. Une fermeture est une fonction qui peut accéder à sa propre portée, à la portée des fonctions externes et à la portée globale. Voici un exemple de fermeture créée à l'aide d'expressions de fonction:

<code class="language-javascript">function funcDeclaration() {
    return '函数声明';
}

let funcExpression = function () {
    return '函数表达式';
}</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!