Analyse des méthodes de création et d'appel de fonctions anonymes dans les compétences js_javascript

Cet article analyse les méthodes de création et d'appel de fonctions anonymes en js à travers des exemples. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

Une fonction anonyme est une fonction sans nom, également appelée fonction de fermeture (closure), qui permet de créer temporairement une fonction sans nom spécifié. La valeur qui est le plus souvent utilisée comme paramètre de la fonction de rappel (callback). De nombreux amis novices ne comprennent pas les fonctions anonymes. Analysons-le ici.

nom de la fonction (liste des paramètres) {corps de la fonction;}

Si vous créez une fonction anonyme, elle devrait être :
function(){corps de fonction;}

Comme il s'agit d'une fonction anonyme, aucun paramètre ne lui est généralement transmis.

Pourquoi créer une fonction anonyme ? Dans quelles circonstances les fonctions anonymes sont-elles utilisées ? Il existe deux principaux scénarios courants pour les fonctions anonymes, l'un est la fonction de rappel et l'autre est l'exécution directe de la fonction.

La fonction de rappel, comme le fonctionnement asynchrone d'ajax, nécessite une fonction de rappel. Je ne l’expliquerai pas en détail ici. Concernant l'exécution directe des fonctions, je peux la comprendre en regardant un exemple :

Copier le code Le code est le suivant :

Dans le code ci-dessus, deux boîtes d'alerte seront affichées séquentiellement. Le contenu de la première boîte d’alerte est b et le second est a. Avez-vous vu des avantages ? Oui, utiliser des fonctions pour les exécuter directement peut limiter la portée des variables, de sorte que les mêmes variables dans différents scripts puissent coexister.

Ensuite, jetons d’abord un coup d’œil préliminaire aux concepts liés aux fonctions anonymes.

Déclaration de fonction (instruction de fonction). Pour utiliser une fonction, il faut d'abord déclarer son existence. La méthode la plus couramment utilisée consiste à utiliser l'instruction de fonction pour définir une fonction, telle que :

Copier le code Le code est le suivant :

fonction abc(){
// code à traiter
}
function abc(){ // code à traiter }

Bien entendu, votre fonction peut également prendre des paramètres ou même renvoyer une valeur.

Copier le code Le code est le suivant :

afficher la copie en clair dans le presse-papiers
fonction abc(x,y){
retourner x y
}
fonction abc(x,y){ return x y }

Cependant, quelle que soit la façon dont vous définissez votre fonction, l'interpréteur JS la traduira en un objet Function. Par exemple, si vous définissez le numéro de fonction dans l'un des exemples ci-dessus, saisissez le code suivant :

Copier le code Le code est le suivant :

alerte (type d'abc);// "fonction"

Votre navigateur affichera une boîte de dialogue vous rappelant qu'abc est un objet Function. Alors, qu’est-ce qu’un objet Function exactement ?

Objet fonction

L'objet Function est un objet inhérent à JavaScript, et toutes les fonctions sont en fait un objet Function. Voyons d'abord si l'objet Function peut utiliser directement le constructeur pour créer une nouvelle fonction ? La réponse est oui. Par exemple :

Copier le code Le code est le suivant :

var abc = new Function("x","y"," retourner x* y;");
alerte(abc(2,3)); // "6"

Je pense que vous comprenez maintenant comment déclarer une fonction. Alors, qu’est-ce qu’une fonction anonyme ?

Déclarer la fonction anonyme

Comme son nom l'indique, une fonction anonyme est une fonction sans nom réel. Par exemple, supprimons le nom de la fonction dans l'exemple ci-dessus puis déterminons s'il s'agit d'une fonction :

Copier le code Le code est le suivant :

alert(typeof function(){});// "function"
alert(typeof function(x,y){return x y;});// "function"
alert(typeof new Function("x","y","return x*y;"))// "function"
alert(typeof function(){});// "function"
alert(typeof function(x,y){return x y;});// "function"
alert(typeof new Function("x","y","return x*y;"))// "function"

Nous pouvons facilement voir que ce sont tous des objets Function, en d'autres termes, ce sont toutes des fonctions, mais ils ont tous une caractéristique : pas de nom. Nous les appelons donc « fonctions anonymes ». Cependant, simplement parce qu’ils n’ont pas de « nom », nous n’avons aucun moyen de les trouver. Cela nous amène à la question de savoir comment appeler une fonction anonyme.

Appel de fonction anonyme

Pour appeler une fonction, nous devons avoir un moyen de la localiser et de la référencer. Il va donc falloir lui trouver un nom. Par exemple :

Copier le code Le code est le suivant :

var abc=function(x,y){
retourner x y
}
alerte(abc(2,3)); // "5"

L'opération ci-dessus équivaut en fait à définir la fonction d'une autre manière. Cet usage est quelque chose que nous rencontrons plus fréquemment. Par exemple, lorsque nous définissons une fonction de gestion des événements d'un élément DOM, nous ne leur donnons généralement pas de nom, mais attribuons une fonction anonyme à sa référence d'événement correspondante.

Il existe en fait une autre façon d'appeler des fonctions anonymes, qui est le fragment jQuery que nous avons vu - en utilisant () pour entourer la fonction anonyme, puis en ajoutant une paire de parenthèses (y compris la liste des paramètres). Reprenons l'exemple suivant :

Copier le code Le code est le suivant :

alerte((function(x,y){return x y;}) (2, 3));// "5"
alert((new Function("x","y","return x*y;"))(2,3));// "6"

Beaucoup de gens peuvent se demander pourquoi cette méthode peut être appelée avec succès ? Pour ceux qui trouvent cette application étrange, veuillez lire mon explication ci-dessous.

Connaissez-vous la fonction des parenthèses ? Les parenthèses peuvent diviser notre combinaison d'expressions en blocs, et chaque bloc, c'est-à-dire chaque paire de parenthèses, a une valeur de retour. Cette valeur de retour est en fait la valeur de retour de l'expression entre parenthèses. Par conséquent, lorsque nous utilisons une paire de parenthèses pour entourer une fonction anonyme, ce que la paire de parenthèses renvoie en réalité est un objet Function de la fonction anonyme. Par conséquent, nous référençons une paire de parenthèses plus une fonction anonyme tout comme une fonction nommée. Ainsi, si vous ajoutez une liste de paramètres après cette variable de référence, la forme d'appel d'une fonction ordinaire sera obtenue.

Je ne sais pas si vous pouvez comprendre l'expression textuelle ci-dessus. Si vous ne la comprenez toujours pas, essayez de regarder le code suivant.

Copier le code Le code est le suivant :

var abc=function(x,y){return x y;}; // L'objet fonction anonyme est affecté à abc
// Le constructeur de abc est le même que le constructeur de la fonction anonyme. Autrement dit, la mise en œuvre des deux fonctions est la même.
alert((abc).constructor==(function(x,y){return x y;}).constructor);

PS : le constructeur fait référence à la fonction qui crée des objets. C'est-à-dire le corps de fonction représenté par l'objet fonction.
En bref, comprenez-la (la fonction anonyme entourée de parenthèses) comme l'objet fonction renvoyé par l'expression parenthèses, et vous pourrez ensuite effectuer un appel de liste de paramètres normal à cet objet fonction. (J'ai déjà fait une erreur. Vous ne pouvez pas appeler directement une fonction avec uniquement une expression de fonction. La suppression des crochets de fonction anonymes doit être accompagnée de l'attribution de l'expression. Autrement dit, (function(){alert(1)})() devrait être la même chose que a =function(){alert(1)}() est équivalent, vous ne pouvez pas supprimer a= )

.

Fermeture

Qu'est-ce qu'une fermeture ? La fermeture fait référence à un bloc de code dans un certain langage de programmation qui permet à une fonction de premier niveau d'exister et les variables libres définies dans la fonction de premier niveau ne peuvent pas être libérées Tant que la fonction de premier niveau n'est pas publiée, ces variables inutilisées peuvent également l'être. appliqué en dehors de la fonction de premier niveau. Variables libres libérées.

Comment ? Vous devez transpirer après l'avoir vu... Ce n'est pas grave, moi aussi (même si je le comprends, c'est juste une question de ma capacité à m'exprimer). Expliquons-le de manière plus simple : la fermeture est en fait une fonctionnalité du langage. Elle fait référence à un langage de programmation qui permet de traiter les fonctions comme des objets, puis des instances peuvent être définies dans des fonctions comme des opérations dans des variables d'objets (locales), et celles-ci. Les variables peuvent être enregistrées dans la fonction jusqu'à ce que l'objet d'instance de la fonction soit détruit. D'autres blocs de code peuvent obtenir les valeurs de ces variables d'instance (locales) d'une manière ou d'une autre et étendre l'application.

Je ne sais pas si ce sera plus clair après l'avoir expliqué de cette façon. Si vous ne comprenez toujours pas, simplifions encore : la fermeture fait en fait référence à des variables locales définies dans un langage de programmation qui permettent au code d'appeler un exécutable. fonction.

Regardons maintenant un exemple :

Copier le code Le code est le suivant :

var abc=fonction(y){
var x=y;// Ceci est une variable locale
return function(){
alert(x);// C'est ici que le x de la variable locale de la fonction de premier niveau dans la fonction de fermeture est appelé et utilisé dessus
alert(y--);//La variable paramètre référencée est également une variable libre
}}(5);//Initialisation
abc();// "5" "5"
abc();// "6" "4"
abc();// "7" "3"
alerte(x); // Erreur ! "x" n'est pas défini !

En voyant cela, pouvez-vous dire si l'extrait de code jQuery est fermé ?

Utilisons ma compréhension. Que la fonctionnalité de fermeture soit appliquée, vous devez déterminer si le code contient l'élément le plus important : des variables locales qui n'ont pas été détruites. Il est alors évident qu'une fonction anonyme sans aucune implémentation ne peut pas appliquer la fonctionnalité de fermeture. Mais que se passe-t-il s’il y a une implémentation dans la fonction anonyme ? Ensuite, vous devez vous assurer que des variables locales qui n'ont pas été détruites sont utilisées dans son implémentation. Donc, si je vous demande, quelles fonctionnalités de JS sont utilisées dans l'extrait de code jQuery de l'article d'ouverture ? Ensuite, ce ne sont que des fonctions anonymes et des appels de fonctions anonymes. Cependant, cela implique les propriétés des fermetures, et les fermetures peuvent être appliquées à tout moment.

Utilisation la plus courante :

Copier le code Le code est le suivant :

(function() {
alert('eau');
})();

Bien sûr, vous pouvez également apporter des paramètres :

Copier le code Le code est le suivant :

(function(o) {
alerte(o);
})('eau');

Vous souhaitez utiliser des appels chaînés vers des fonctions anonymes ? Très simple :

Copier le code Le code est le suivant :

(function(o) {
alerte(o);
return arguments.callee
})('eau')('vers le bas');

Vous connaissez toutes les fonctions anonymes courantes, jetons un œil aux plus rares :

Copier le code Le code est le suivant :

~(function(){
alert('eau');
})();//L'écriture est un peu cool~

fonction void(){
alert('eau');
}();//On dit que c'est le plus efficace~

fonction(){
alert('eau');
}();

-fonction(){
alert('eau');
}();

~fonction(){
alert('eau');
}();

!fonction(){
alert('eau');
}();

(fonction(){
alert('eau');
}());//Cela ressemble un peu à de l'application de la loi~

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.