Explication détaillée et exemples de modèles de fonction JavaScript

Le rôle du modèle de conception JavaScript est d'améliorer la réutilisabilité et la lisibilité du code, ce qui rend le code plus facile à maintenir et à développer.

Dans JavaScript, une fonction est une classe d'objets, ce qui signifie qu'il peut être transmis en tant que paramètre à d'autres fonctions; De plus, la fonction peut également fournir une portée.

Syntaxe pour créer une fonction

Expressions de fonction nommées

 // Nom Fonction Expression var Add = fonction add (a, b) {return a + b;}; var foo = function bar () {console.log (foo === bar);}; foo (); // true

On peut voir qu'ils font référence à la même fonction, mais cela n'est valable que dans le corps de la fonction.

 var foo = fonction bar () {}; console.log (foo === bar); // ReferenceError: Bar n'est pas défini

Cependant, vous ne pouvez pas appeler la fonction en appelant BAR ().

 var foo = (fonction bar () {console.log (foo === bar);}) (); // false

Expressions de fonction

 // également connu sous le nom de fonction anonyme var add = fonction (a, b) {return a + b;};

La valeur attribuée à la variable ADD est la définition de la fonction elle-même. De cette façon, ADD devient une fonction qui peut être appelée n'importe où.

Déclaration des fonctions

 fonction foo () {// code ici} // il n'y a pas besoin de demi-colons ici

Dans les demi-colons de fin, les expressions de fonction doivent toujours utiliser des demi-colons et la fin des demi-colons n'est pas requise dans la déclaration de la fonction.

La différence entre une fonction déclarative et une expression de fonction est que pendant la période de précompilation de JS, la fonction déclarative sera extraite en premier, puis le code JS sera exécuté dans l'ordre:

console.log (f1); // [fonction: f1]

Console.log (F2); // Undefined, JavaScript n'est pas entièrement interprété et exécuté dans l'ordre, mais "précompile" le JavaScript avant interprétation. Pendant le processus de précompilation, la fonction définitive sera d'abord exécutée.

 fonction f1 () {console.log ("je suis f1");} var f2 = fonction () {console.log ("je suis f2");};

Étant donné que les fonctions de déclaration seront remplies lors de la construction globale de la portée, les fonctions déclarant sont les propriétés des objets de fenêtre, ce qui montre pourquoi, peu importe où nous déclarons les fonctions, déclarant les fonctions appartiennent finalement aux objets de fenêtre.

Dans la langue javascript, toute fonction anonyme appartient à un objet de fenêtre. Lors de la définition d'une fonction anonyme, il renverra son adresse mémoire. Si une variable reçoit cette adresse mémoire à l'heure

 var f2 = function () {console.log ("je suis f2");}; console.log (f2 ()); // je suis f2 (function () {console.log (this === fenêtre); // true}) ();

Déclarations de fonctions et expressions

Promotion de fonction (histing)

Le comportement d'une déclaration de fonction n'est pas équivalent à une expression de fonction nommée. La différence est le comportement de levage. Voir l'exemple suivant:

 <script type = "text / javascript"> // fonction globale function foo () {alert ("global foo!");} function bar () {alert ('global bar');} function hoist () {console.log (typeof foo); // function console.log (typeof bar); // undefined foo (); // local foo! bar (); // typeError: 'Undefined' n'est pas une fonction // variable foo et implémentateur sont promus foo foo () {alert ('local foo! '); } // seule la barre variable est promue, la partie d'implémentation de fonction n'est pas promue var bar = function () {alert ('local bar!'); }; } hoist (); </cript>

Pour toutes les variables, partout où elles sont déclarées dans le corps, elles sont promues en interne au sommet de la fonction. La raison de l'application générale des fonctions est que les fonctions ne sont que des objets affectés aux variables.

Comme son nom l'indique, l'amélioration signifie mentionner les choses suivantes au sommet. Dans JS, il s'agit de mettre à niveau les choses définies dans les (variables ou fonctions) suivantes vers la définition précédente. Comme on peut le voir à partir de l'exemple ci-dessus, FOO et BAR dans le palan de fonction à l'intérieur de la fonction se déplacent vers le haut, couvrant ainsi les fonctions Global Foo et Bar. La différence entre les fonctions locales BAR et FOO est que FOO est promu en haut et peut fonctionner normalement, tandis que la définition de BAR () n'a pas été améliorée, seule sa déclaration est promue. Par conséquent, lorsque BAR () est exécuté, le résultat n'est pas défini au lieu d'être utilisé en fonction.

Mode de fonction en temps réel

Les fonctions sont également des objets, ils peuvent donc être utilisés comme valeurs de retour. L'avantage de l'utilisation de fonctions auto-exécutantes est de déclarer directement une fonction anonyme et de l'utiliser immédiatement, afin d'éviter de définir une fonction qui n'est pas utilisée une fois, et elle est évitée par le problème des conflits de dénomination. Il n'y a pas de concept d'espace de noms dans JS, il est donc facile d'avoir des conflits de nom de fonction. Une fois qu'un conflit de dénomination est fait, le dernier a été déclaré prévaudra.

Mode 1:

 <Script> (function () {var a = 1; return function () {alert (2);};} () ()); // 2 apparaît, les premières parenthèses s'exécutent elles-mêmes et les deuxième parenthèses exécutent des fonctions anonymes internes </ / script>

Modèle 2: pointage des variables de fonction auto-exécutantes

 <script type = "text / javascript"> var result = (function () {return 2;}) (); // La fonction alert (résultat); // Résultat pointe vers la valeur de retour 2 de la fonction auto-exécutée; Si le résultat () apparaît, une erreur se produira </cript>

Modèle trois: fonctions imbriquées

 <script type = "text / javascript"> var result = (function () {return function () {return 2;};}) (); alert (result ()); // quand alert (result) function () {return 2} </ script>

MODE 4: La fonction d'auto-exécution attribue sa valeur de retour à une variable

 var abc = (function () {var a = 1; return function () {return ++ a;}}) (); // La fonction de la fonction d'auto-exécution renvoie la fonction après le retour à l'alerte variable (ABC ()); // s'il est alerte (ABC), le code après l'instruction de retour sera apparu; S'il est ABC (), la fonction après retour sera exécutée

Modèle 5: La fonction s'exécute en interne, récursivement

 // Il s'agit d'une fonction auto-exécutante, la fonction s'exécute en interne, fonction récursive ABC () {ABC (); }

Mode de rappel

Fonction de rappel: lorsque vous passez une fonction écriture () comme argument à une autre fonction appelle (), alors appelez () peut exécuter (ou appeler) écrire () à un moment donné. Dans ce cas, Write () est appelé une fonction de rappel.

Écouteur d'événements asynchrones

Le mode de rappel a de nombreuses utilisations, par exemple, lorsqu'un écouteur d'événements est attaché à un élément de la page, il fournit en fait un pointeur vers une fonction de rappel qui sera appelée lorsque l'événement se produit. comme:

document.addeventListener ("cliquez", console.log, false);

L'exemple de code ci-dessus montre la fonction de rappel Console.log () en mode bulle lorsque le document clique.

JavaScript convient particulièrement à la programmation axée sur les événements, car le mode de rappel prend en charge les programmes pour s'exécuter de manière asynchrone.

temps mort

Un autre exemple d'utilisation du mode de rappel est lors de l'utilisation de la méthode de délai d'expiration fournie par l'objet de fenêtre du navigateur: setTimeout () et setInterval (), tels que:

 <script type = "text / javascript"> var call = function () {console.log ("100ms sera demandé ..."); }; setTimeout (appel, 100); </cript>

Mode de rappel dans la bibliothèque

Lors de la conception d'une bibliothèque JS, la fonction de rappel sera utile. Le code d'une bibliothèque doit utiliser le code réutilisable autant que possible, et le rappel peut aider à réaliser cette généralisation. Lorsque nous concevons une énorme bibliothèque JS, le fait est que les utilisateurs n'en ont pas besoin, nous pouvons nous concentrer sur les fonctions de base et fournir des fonctions de rappel dans "Hook Form", ce qui vous facilitera la création, l'échelle et la personnalisation des méthodes de bibliothèque

Curry

Le curry est une technique qui convertit une fonction en une nouvelle fonction simplifiée (à moins de paramètres) en remplissant plusieurs paramètres en un corps de fonction. - 【【compétent en javascript】

Autrement dit, la curryisation est un processus de conversion, c'est-à-dire le processus de notre conversion de fonction. Comme indiqué dans l'exemple suivant:

 <script type = "text / javascript"> // curry-basé sur Add () fonction fonction add (x, y) {var oldx = x, oldy = y; if (typeof oldy == "Undefined") {return function (newy) {return oldx + newy; }; } // Appliquer complètement le retour x + y; } // Test Typeof Add (5); // Sortie "fonction" Add (3) (4); // 7 // Créer et stocker une nouvelle fonction var add2000 = add (2000); add2000 (10); // output 2010 </cript>

Lorsque Add () est appelé pour la première fois, il crée une fermeture pour la fonction interne retournée. Cette fermeture stocke les valeurs X et Y d'origine dans les variables privées OldX et Oldy.

Maintenant, nous serons en mesure d'utiliser une méthode générale de curry en utilisant n'importe quelle fonction, telle que:

 <script type = "text / javascript"> // fonction de fonction ordinaire add (x, y) {return x + y; } // Curry une fonction pour obtenir une nouvelle fonction var newadd = test (ajouter, 5); newadd (4); // 9 // une autre option, appelez directement le nouveau test de fonction (ADD, 6) (7); // output 13 </ script>

Quand utiliser le curry

Lorsqu'il est constaté que la même fonction est appelée et que la plupart des paramètres passés sont les mêmes, alors la fonction peut être un bon candidat pour la curryisation