Diverses méthodes de définition de fonction commune en javascript

Cet article décrit en détail diverses méthodes de définition de fonction communes en JavaScript et est partagée avec vous pour votre référence. L'analyse spécifique est la suivante:

Tout d'abord, jetons un coup d'œil aux quatre définitions de fonction les plus courantes en JavaScript:

La fonction définie avec le constructeur de fonction, le code est le suivant:

 var multiply = nouvelle fonction ('x', 'y', 'return x * y;');

Déclaration de fonction, cette méthode est également la plus courante:

 Fonction Multiply (x, y) {return x * y;}

Les expressions de fonction, déclarées comme une fonction anonyme puis attribuées à une variable, sont des moyens très courants:

 var multiply = fonction (x, y) {return x * y;}

Expression de la fonction, mais la déclaration de fonction est une fonction nommée puis attribué une valeur à une variable, qui ressemble exactement à la même manière:

 var multiply = fonction multi (x, y) {return x * y;}

Tout d'abord, comparons le nom de la fonction et la relation directe entre la variable de fonction attribuée à la fonction. C'est vraiment un peu ... d'être plus intuitif, à partir de l'exemple 4 tout à l'heure, c'est la relation entre la variable de fonction Multiply et le nom de fonction Multi:

Les noms de fonction ne peuvent pas être modifiés, au contraire, les variables de fonction peuvent être réaffectées. Il devrait être facile de comprendre que les variables de fonction peuvent être réaffectées. Dans notre quatrième exemple, la variable multiple juste définie, elle n'est pas agréable à voir et à la réaffecter à:

 multiply = fonction (x, y) {return x + y;}

Je me suis immédiatement transformé de la multiplication à l'addition. Cependant, il est impossible de modifier la variable multi-fonctions. La définition de la fonction est déjà là. Tant qu'il conserve toujours sa référence, il ne changera pas. Ce n'est peut-être pas facile à comprendre ici. Pensez-y d'abord comme ça, puis vous devriez être en mesure de le comprendre lentement.

Le nom de la fonction ne peut pas être utilisé en dehors de la fonction en même temps, il n'est visible que dans le corps de la fonction. Un exemple très simple:

 var foo = fonction bar () {alert ('hello');} foo (); // invite "hello" string bar (); // Exécuter une erreur, la barre n'est pas définie

Et évidemment, la barre ici est en effet un nom de fonction, mais il ne peut vraiment pas être appelé à l'extérieur. Pour le moment, il y aura certainement des chaussures pour enfants qui se demandaient pourquoi cet exemple semble toujours si bien élevé, tout comme l'exemple 4, pourquoi ne pas utiliser la méthode de l'exemple 2? Bonne question, permettez-moi de le décomposer lentement.

Poursuivant avec l'exemple 4, nous pouvons voir que le nom de fonction (Multi) et la variable de fonction (multiplier) ne sont pas les mêmes, mais en fait, les deux n'ont aucune relation du tout, il n'est donc pas nécessaire de maintenir la cohérence. En parlant de cela, je pense que les quatre exemples ci-dessus devraient être réduits à 3, et l'exemple 2 et l'exemple 4 devraient être essentiellement cohérents. Quoi, ne le croyez pas? Hehe, je dois continuer à le garder dans un silence ~ Continuez à lire ~~

Nous avons constaté que par rapport à l'exemple 2 et à l'exemple 4, il n'y a que moins de variables de fonction VAR, tandis que par exemple l'exemple 3, il n'y a que moins de ce nom de fonction. Du point de vue du phénomène, l'essence de l'exemple 2 et de l'exemple 4 est la même, et les preuves sont les suivantes:

 fonction foo () {} alert (foo); // invite le nom de fonction contenant "foo" var bar = foo; alert (bar); // invite le nom de la fonction ne contient toujours que "foo" et n'a aucune relation avec BAR

C'est en effet à tout-fait? Est-ce la façon d'écrire le code ci-dessus similaire à l'exemple 2 en combinaison avec les codes de l'exemple 4? Correct, c'est ce que je viens de dire que les deux devraient être essentiellement les mêmes. Cependant, lors de la définition de la fonction dans le cas 2, le moteur JS nous a aidés à faire quelque chose, comme déclarer une fonction avec le nom de la fonction multiplié, et définir tranquillement une variable également appelée multiplier, puis l'attribuer à cette variable, deux exactement les mêmes noms. Nous pensions que lorsque nous utilisons le nom de la fonction multiplié, nous utilisons en fait la variable de fonction Multiply, donc nous étions étourdis ~ pour être honnête, j'étais aussi étourdi ~ en bref, lorsque nous avons appelé, nous avons en fait appelé la variable de fonction, et le nom de la fonction ne pouvait pas appeler la fonction externe, donc j'ai eu l'inférence ci-dessus.

Cependant, une petite différence à mentionner ici est que la fonction définie par la méthode de déclaration de fonction est différente de la déclaration du constructeur ou de la déclaration d'expression de la fonction, la méthode de déclaration de fonction peut être appelée avant la définition de la fonction ... sans le mentionner, il suffit de regarder le code:

 foo (); // TIP FOOfonction foo () {alert ('foo');} bar (); // mon pote, c'est vraiment différent de ce qui précède, alors ne montrez pas. N'est-ce pas une erreur? La barre rapide n'est pas définie var bar = function () {alert ('bar');}

Parlons des fonctions déclarées par le constructeur. Les fonctions déclarées n'hériteront pas de la portée de l'emplacement actuel déclaré. Ils n'auront qu'une portée globale par défaut. Cependant, c'est la même chose dans d'autres méthodes de déclaration de fonctions, comme suit:

 fonction foo () {var hi = 'hello'; // return function () {// alert (hi); //}; return function ('return hi;');} foo () (); // Pour l'effet d'exécution, veuillez courir et voir par vous-même

On peut imaginer que l'exécution de la fonction renvoyée en utilisant le constructeur déclaré rapportera inévitablement une erreur car la variable HI n'est pas dans sa portée (c'est-à-dire la portée globale).

Un autre point est que les gens disent souvent que les fonctions déclarées en mode constructeur sont inefficaces. Pourquoi est-ce? Aujourd'hui, j'ai appris du document que les fonctions déclarées dans les trois autres manières ne seront analysées qu'une seule fois. En fait, ils existent dans la fermeture, mais cela n'est lié qu'à la chaîne de portée, et le corps de la fonction ne sera analysé qu'une seule fois. Mais la méthode du constructeur est que chaque fois qu'une fonction est exécutée, son corps de fonction sera analysé une fois. Nous pouvons penser que la fonction déclarée de cette manière est un objet qui stocke les paramètres et le corps de la fonction. Chaque fois qu'il est exécuté, il doit être analysé une fois, et les paramètres et le corps de fonction seront exécutés, ce qui sera inévitablement inefficace. Vous ne savez pas comment faire l'expérience spécifique?

Enfin, parlons de quelque chose auquel personne ne fait attention. Quand cela semble-t-il comme le mode de fonction des déclarations non le mode de vie de fonction (il est toujours aussi enclin à le dire simplement, lorsque le chemin de l'exemple 2 devient une autre façon par inadvertance):

Quand il fait partie de l'expression, c'est comme l'exemple 3 et l'exemple 4.

Ce n'est plus l'élément source du script lui-même ou de la fonction. Quel est l'élément source? C'est-à-dire une instruction non établie dans le script ou un corps de fonction, comme:

 var x = 0; // élément source if (x == 0) {// élément source x = 10; // pas un élément source, car il est imbriqué dans la fonction IF de l'instruction BOO () {} // pas un élément source, car il est imbriqué dans la fonction if} fOO FOO () {// élément source var y = 20; // Source Element Fonction Bar () {} // élément source while (y == 10) {// Fonction d'élément source bllah () {} // pas un élément source, car il est imbriqué dans l'instruction while y ++; // pas un élément source, car il est imbriqué dans un instant instruction}}

J'ai beaucoup compris le concept d'éléments source. Je continuerai avec la déclaration de fonction que je viens de mentionner. Veuillez voir:

 // Déclaration de fonction fonction foo () {} // function expression (fonction bar () {}) // function expression x = fonction hello () {} if (x) {// function expression function world () {}} // function instruction function a () {function instruction function b () {} if (0) {// function expression function c () {}}}

Enfin, permettez-moi de parler de ma propre compréhension. La raison de la distinction entre la déclaration de la fonction et la déclaration de non-fonctionnement est que, à mon avis, la définition de la fonction de fonction de la méthode de déclaration de fonction sera déclarée à l'avance lorsque le moteur d'analyse JS l'exécute. Autrement dit, comme nous venons de l'avoir dit ci-dessus, il peut être utilisé avant la définition de la fonction. En fait, le moteur d'analyse l'a analysé avant de l'utiliser. Cependant, la déclaration non fonctionnatrice de la fonction d'expression, le moteur d'analyse JS ne définira que la variable déclarée par VAR à l'avance. À l'heure actuelle, la valeur de la variable n'est pas définie et l'affectation réelle à cette variable est à l'emplacement réel du code. Par conséquent, les erreurs mentionnées ci-dessus ne sont pas définies. La variable réelle a été définie, mais elle n'a pas encore été attribuée. Le moteur d'analyse JS ne sait pas qu'il s'agit d'une fonction.

Je crois que la description de cet article a une certaine valeur de référence pour la conception de programmation Web JavaScript de tous.