Maison >interface Web >js tutoriel >Expliquez la différence d'utilisation de foo entre function foo() {} et var foo = function() {}

Expliquez la différence d'utilisation de foo entre function foo() {} et var foo = function() {}

王林avant: 2023-09-14 20:13:091208parcourir

解释一下 function foo() {} 和 var foo = function() {} 在 foo 用法上的区别

En JavaScript, nous avons différentes manières de définir des fonctions. function foo() {} et var foo = function() { } sont deux manières différentes de définir une fonction. Les deux méthodes ont leurs avantages et leurs cas d’utilisation différents, mais elles donnent toutes deux le même résultat lors de l’exécution de la fonction.

Donc, ce tutoriel nous apprendra la différence entre les deux manières de définir une fonction.

Explication de la fonction foo() { } : déclaration de fonction

function foo() { } est le moyen habituel de déclarer une fonction en JavaScript et est utilisé par tous les débutants et développeurs. Alternativement, nous pouvons l’appeler une fonction nommée.

Lorsque le contrôle de l'exécution du programme atteint la portée de la déclaration de fonction, JavaScript évalue la déclaration de fonction. L'évaluation de la déclaration de fonction ne fait pas partie du processus étape par étape, mais est évaluée au début.

De plus, les déclarations de fonctions sont placées en haut de chaque code dans la portée spécifique dans laquelle elles sont déclarées. Par conséquent, nous pouvons appeler la fonction n’importe où dans la portée, même avant la déclaration.

Grammaire

Les utilisateurs peuvent déclarer des fonctions selon la syntaxe suivante.

function foo(parameters, .... ) {
   // function body
}

Dans la syntaxe ci-dessus, « function » est le mot-clé représentant la déclaration de fonction et foo est le nom de la fonction.

Exemple

Dans cet exemple, nous avons défini la fonction foo() via la déclaration de fonction. Après cela, nous l’appelons comme une fonction normale.

<html>
   <body>
      <h2>function foo() { } (function declaration)</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         
         // declaring the function
         function foo() {
            output.innerHTML += "The function foo is invoked!";
         }
         foo();
      </script>
   </body>
</html>

Exemple

Dans l'exemple ci-dessous, nous définissons une fonction avec des paramètres. Nous passons invoquéPosition comme deuxième argument, représentant la position à partir de laquelle nous appelons la fonction.

Nous avons appelé la fonction foo() avant la déclaration car JavaScript évalue la fonction au début lorsque le flux d'exécution entre dans la portée et est élevé vers le haut.

<html>
   <body>
      <h2>function foo() { } (function declaration)</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         
         // As foo is hoisted on top, we can call the function before the declaration
         foo(10, "Top");
         
         // declaring the function with parameters
         function foo(param1, inovkingPosition) {
            output.innerHTML += "The function foo is invoked from " + inovkingPosition + "</br>";
            output.innerHTML += "The value of the param1 is " + param1 + " <br/> <br/>";
         }
         foo(20, "bottom");
      </script>
   </body>
</html>

var foo = function() { } explication : expression de fonction

var foo = function() { } revient également à définir une fonction, appelée expression de fonction. Ici, function() { } est l'expression de fonction que nous stockons dans la variable foo. foo est une variable normale comme n'importe quelle autre variable, même si nous pouvons stocker des nombres et des chaînes dans la variable foo.

JavaScript n'évalue pas les expressions de fonction au début comme le font les déclarations de fonction. Il évalue les expressions de fonction étape par étape. Lorsque le flux d'exécution atteint une expression de fonction, JavaScript évalue l'expression et la stocke dans la variable foo.

De plus, l'expression de fonction n'est pas hissée en haut du code, nous ne pouvons donc pas appeler l'expression de fonction avant de la définir comme une déclaration de fonction.

Grammaire

Les utilisateurs peuvent utiliser des expressions de fonction pour définir des fonctions selon la syntaxe suivante.

var foo = function (params) {
   
   // function body
};

Dans la syntaxe ci-dessus, la définition de la fonction n'a pas de nom, nous pouvons donc l'appeler une fonction anonyme. Nous pouvons utiliser la variable foo comme identifiant de la fonction.

Exemple

Dans cet exemple, nous avons défini la fonction à l'aide de l'expression de fonction et l'avons stockée dans l'identifiant foo. Après cela, nous utilisons l'identifiant foo pour appeler l'expression de fonction qui y est stockée, en passant les arguments dans l'identifiant foo.

<html>
   <body>
      <h2>var foo = function() { } (function expression)</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         
         // defining the function expression and storing it in the foo variable
         var foo = function (param) {
            output.innerHTML += "Inside the function expression. </br>";
            output.innerHTML += "The value of the param is " + param + "</br>";
         };
         
         // calling the function expression via foo identifier
         foo("Hi Users!");
      </script>
   </body>
</html>

Les expressions de fonction ont différents cas d'utilisation. Les utilisateurs peuvent écrire une courte syntaxe pour les fonctions en l'utilisant comme fonction de rappel. De plus, les utilisateurs peuvent également l'utiliser comme fonction de fermeture. Parfois, nous devons passer une fonction en tant que paramètre et nous pouvons ensuite utiliser des expressions de fonction.

Exemple

Dans cet exemple, nous passons l'expression de la fonction comme argument à la méthode sort(). Les utilisateurs peuvent voir que nous transmettons des fonctions anonymes en tant que paramètres au lieu d'écrire des déclarations avec des noms.

<html>
   <body>
      <h2>Passing function expression as an argument</h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         let number = [320, 45, 3, 23, 54];
      
         // passing the function expression as an argument of the sort() method
         number.sort(function (element1, element2) {
            return element2 - element1;
         });
         output.innerHTML += "The sorted array is " + number;
      </script>
   </body>
</html>

Différence entre function foo() { } et var foo = function() { }

Le tableau suivant met en évidence les principales différences entre function foo() { } et var foo = function() { } :

Fonction foo() { }	var foo = function() { }
Il s'agit d'une déclaration de fonction.	C'est une expression de fonction.
Il est suspendu au sommet de la lunette.	Sa portée n'est pas augmentée.
JavaScript évalue les scopes au début de leur exécution.	JavaScript évalue le code au fur et à mesure qu'il le parcourt.
Nous pouvons l'identifier par son nom de fonction.	Nous pouvons l'identifier grâce à l'identifiant où il est stocké.
est utilisé pour définir des fonctions ordinaires.	Utilisez-le lorsque nous devons passer une fonction comme paramètre ou utiliser une fonction comme fermeture.

Conclusion

En JavaScript, il existe deux manières de définir des fonctions : Déclaration de fonction et Expression de fonction. Les déclarations de fonction sont définies à l'aide du mot-clé function, suivi du nom de la fonction, généralement écrit sous la forme function foo() {}. Lorsque l'exécution du programme atteint la portée dans laquelle la fonction est déclarée, JavaScript évalue la déclaration de fonction et la place en haut du code dans cette portée. Cela signifie qu'ils peuvent être appelés avant d'être déclarés.

Les expressions de fonction sont définies à l'aide de variables, généralement écrites sous la forme var foo = function() {}. Les expressions de fonction ne sont pas hissées et doivent être définies avant d'être appelées. Les déclarations de fonction et les expressions de fonction peuvent effectuer la même tâche, mais elles ont une syntaxe et un comportement de calcul différents.

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!

JavaScript sort 标识符回调函数字符串 var 闭包 function 作用域

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment créer un canevas avec une couleur de fond à l'aide de FabricJS ?Article suivant：Comment créer un canevas avec une couleur de fond à l'aide de FabricJS ?

Articles Liés

Voir plus