JavaScript est plus décontracté par rapport à d'autres langages de programmation, donc le code JavaScript est plein de toutes sortes de méthodes d'écriture étranges. Parfois, vous pouvez voir des fleurs dans le brouillard. Bien sûr, être capable de comprendre divers types de méthodes d'écriture est également une compréhension approfondie des caractéristiques du langage JavaScript.
(function () {…}) () et (function () {…} ()) sont deux façons courantes d'exécuter immédiatement des fonctions en javascript. Au début, je pensais que c'était une fonction anonyme enveloppée dans un support, puis j'ai ajouté un support pour appeler la fonction. Enfin, j'ai atteint le but de l'exécuter immédiatement après la définition de la fonction. Plus tard, j'ai constaté que la raison de l'ajout de supports n'était pas le cas. Pour comprendre immédiatement l'exécution des fonctions, vous devez d'abord comprendre certains concepts de base des fonctions.
Déclarations de fonctions, expressions de fonction, fonctions anonymes
Déclaration de fonction: fonction fnname () {…}; Utilisez le mot clé de la fonction pour déclarer une fonction, puis spécifiez un nom de fonction, appelé déclaration de fonction.
Fonction Expression var fnname = function () {…}; Déclarez une fonction à l'aide du mot clé de la fonction, mais ne nomme pas la fonction. Enfin, la fonction anonyme se voit attribuer une variable, appelée expression de fonction, qui est la forme la plus courante de syntaxe d'expression de fonction.
Fonction anonyme: function () {}; Utilisez le mot clé de la fonction pour déclarer une fonction, mais la fonction n'est pas nommée, donc elle est appelée fonction anonyme. Les fonctions anonymes appartiennent aux expressions de fonction. Les fonctions anonymes ont de nombreuses fonctions. Si vous affectez une variable, vous créez une fonction, et si vous attribuez un événement, vous devenez un gestionnaire d'événements ou créez une fermeture, etc.
La différence entre la déclaration de la fonction et l'expression de la fonction est que 1. Lorsque le code JavaScript d'analyse, le moteur JavaScript «Promotion de la déclaration des fonctions» (Déclaration de fonction Hoite) Déclaration de fonction sur l'environnement d'exécution actuel (Scope). L'expression de la fonction doit attendre que le moteur Javascictp s'exécute sur sa ligne avant d'analyser l'expression de la fonction de la ligne de haut en bas. 2. L'expression de la fonction peut être appelée immédiatement avec des supports après l'expression de la fonction. La déclaration de fonction ne peut pas être effectuée et ne peut être appelée que sous la forme de fnname (). Voici deux exemples des différences entre les deux.
fnname (); fonction fnname () {...} // normal, parce que «promouvant» la déclaration de fonction, les appels de fonction peuvent être fnname (); var fnname = function () {...} // une erreur est rapportée, l'expression variable n'a pas enregistré de référence à la fonction, et l'appel de fonction doit être après l'expression de la fonction var fnname = function () {alert ('Hello world');} (); // des parcelles sont ajoutées après l'expression de la fonction. Lorsque le moteur JavaScript analyse ici, la fonction peut être appelée la fonction immédiatement fnname () {alert ('Hello World');} (); // Il n'y aura pas d'erreur, mais le moteur JavaScript analyse uniquement la déclaration de la fonction ne sera pas appelée fonction () {console.log ('Hello World'); } (); // L'erreur de syntaxe, bien que les fonctions anonymes appartiennent aux expressions de fonction, aucune opération d'attribution n'est effectuée, // donc le moteur JavaScript traite le mot clé de la fonction au début comme déclaration de fonction, et rapporte une erreur: un nom de fonction est requisAprès avoir compris certains concepts de fonctions de base, j'ai regardé les deux façons d'écrire (function () {…}) () et (function () {…} ()) immédiatement. Au début, je pensais que c'était une fonction anonyme enveloppée dans un support et j'ai ajouté un support pour appeler la fonction immédiatement. À ce moment-là, je ne savais pas pourquoi je devais ajouter des supports. Plus tard, j'ai réalisé que si je devais ajouter des supports après le corps de la fonction, je pouvais l'appeler immédiatement. Alors cette fonction doit être une expression de fonction, pas une déclaration de fonction.
(fonction (a) {Console.log (a); // Firebug Sortie 123, utilisez l'opérateur ()}) (123); (fonction (a) {Console.log (a); // Firebug Sortie 1234, utilisez l'opérateur ()} (1234)); ! fonction (a) {console.log (a); // Firebug Sortie 12345, utilisez! Opérateur} (12345); + fonction (a) {console.log (a); // Firebug Sortie 123456, utilisez l'opérateur +} (123456); -Function (a) {console.log (a); // Firebug Sorput 1234567, utilisez l'opérateur} (1234567); var fn = fonction (a) {console.log (a); // Firebug Sortie 12345678, utilisez l'opérateur = (12345678)Vous pouvez voir le résultat de sortie et l'ajouter avant la fonction! , +, - et même les virgules peuvent être utilisées pour exécuter immédiatement après la définition de la fonction, et () ,! Des opérateurs tels que +, -, = convertir les déclarations de fonction en expressions de fonction, éliminant l'ambiguïté entre le moteur JavaScript identifiant les expressions de fonction et les déclarations de fonction, indiquant au moteur JavaScript qu'il s'agit d'une expression de fonction, pas une déclaration de fonction, vous pouvez ajouter des parenthèses après elle et exécuter le code de la fonction immédiatement.
L'ajout de supports est le moyen le plus sûr de le faire, car! Les opérateurs tels que, + et - effectueront également des opérations avec la valeur de retour de la fonction, ce qui cause parfois des problèmes inutiles.
Mais à quoi sert l'écriture de cette façon?
Il n'y a pas de concept de portée privée en JavaScript. Si vous déclarez certaines variables dans la portée globale ou locale sur un projet développé par plusieurs personnes, il peut être écrasé par d'autres avec le même nom. Selon les caractéristiques de la chaîne de portée des fonctions JavaScript, cette technique peut être utilisée pour imiter une portée privée et utiliser une fonction anonyme comme un "conteneur". Le "conteneur" peut accéder aux variables externes, tandis que l'environnement externe ne peut pas accéder aux variables à l'intérieur du "conteneur", de sorte que les variables définies à l'intérieur (function () {…}) () ne seront pas en conflit avec des variables externes, communément appelées "wrapper anonymes" ou "espace de noms".
JQuery utilise cette méthode. Lorsque le code jQuery est enveloppé dans (fonction (fenêtre, undefined) {… jQuery Code…} (Window), il peut protéger les variables internes de jQuery lors de l'appel du code jQuery dans la portée globale.
Cet article est une compréhension et une compilation personnelles. S'il y a des erreurs, veuillez les signaler. Les opinions de l'article sont référencées à partir de:
"Guide faisant autorité de JavaScript" et "Programmation avancée"