Detaillierte Erläuterung und Beispiele für JavaScript -Funktionsmuster

Die Rolle des JavaScript -Entwurfsmusters besteht darin, die Wiederverwendbarkeit und Lesbarkeit des Codes zu verbessern und den Code zu erleichtern und zu erweitern.

In JavaScript ist eine Funktion eine Klasse von Objekten, was bedeutet, dass sie als Parameter an andere Funktionen übergeben werden kann. Darüber hinaus kann die Funktion auch Umfang bieten.

Syntax zum Erstellen einer Funktion

Benannte Funktionsausdrücke

 // Namensfunktion Expression var add = Funktion add (a, b) {return a+b;}; var foo = function bar () {console.log (foo === bar);}; foo (); // true

Es ist ersichtlich, dass sie sich auf dieselbe Funktion beziehen, dies ist jedoch nur in der Funktionskörper gültig.

 var foo = function bar () {}; console.log (foo === bar); // referenceError: bar ist nicht definiert

Sie können die Funktion jedoch nicht aufrufen, indem Sie Bar () aufrufen.

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

Funktionsausdrücke

 // auch als die anonyme Funktion var add = Funktion (a, b) {return a+b;} bekannt;

Der Wert, der dem Variablen -Add zugewiesen wird, ist die Funktionsdefinition selbst. Auf diese Weise wird Add zu einer Funktion, die überall aufgerufen werden kann.

Funktionserklärung

 Funktion foo () {// Code hier} // hier sind keine Semikolons erforderlich

Bei nachlaufenden Semikolonen sollten Funktionsausdrücke immer Semikolonen verwenden, und das Ende von Semikolonen ist in der Erklärung der Funktion nicht erforderlich.

Der Unterschied zwischen einer deklarativen Funktion und einem Funktionsausdruck besteht darin, dass während der Vorkompilierungsperiode von JS die deklarative Funktion zuerst extrahiert wird und der JS -Code in der Reihenfolge ausgeführt wird:

console.log (F1); // [Funktion: F1]

console.log (f2); // undefined, JavaScript wird nicht vollständig interpretiert und in der Reihenfolge ausgeführt, sondern wird das JavaScript vor der Interpretation "vorkompilieren". Während des Vorkompilierungsprozesses wird zuerst die endgültige Funktion ausgeführt.

 Funktion f1 () {console.log ("Ich bin f1");} var f2 = function () {console.log ("I Am f2");};

Da die Erklärung von Funktionen während des globalen Umfangs erledigt wird, sind die Erklärungsfunktionen Eigenschaften von Fensterobjekten, was zeigt, warum wir, wo wir Funktionen deklarieren, und die Deklarierung von Funktionen letztendlich zu Fensterobjekten gehören.

In der JavaScript -Sprache gehört jede anonyme Funktion zu einem Fensterobjekt. Wenn Sie eine anonyme Funktion definieren, gibt sie seine Speicheradresse zurück. Wenn eine Variable diese Speicheradresse zu diesem Zeitpunkt empfängt, kann die anonyme Funktion im Programm verwendet werden, da die anonyme Funktion auch während der Konstruktion der globalen Ausführungsumgebung definiert und zugewiesen wird. Diese Zeigeung der anonymen Funktion ist auch ein Fensterobjekt

 var f2 = function () {console.log ("i bin f2");}; console.log (f2 ()); // i bin f2 (function () {console.log (this === Fenster); // true}) ();

Funktionserklärungen und Ausdrücke

Funktionsförderung (Heben)

Das Verhalten einer Funktionserklärung entspricht nicht einem benannten Funktionsausdruck. Der Unterschied ist das Hebeverhalten. Siehe das folgende Beispiel:

 <script type = "text/javaScript"> // Globale Funktionsfunktion foo () {alert ("global foo!");} function bar () {alert ('global bar'); bar (); // typeerror: 'undefined' ist keine Funktion // variable Foo und Implementierer sind geförderte Funktion foo () {alert ('Lokale Foo! '); } // Es wird nur variable Balken gefördert, der Funktionsinimpassierungsteil ist nicht gefördert var bar = function () {alert ('Local bange!'); }; } hoist (); </script>

Für alle Variablen, wo immer sie im Körper deklariert werden, werden sie intern auf die oberste Funktion befördert. Der Grund für die allgemeine Anwendung von Funktionen ist, dass Funktionen nur Objekte sind, die Variablen zugeordnet sind.

Wie der Name schon sagt, bedeutet Verbesserung, die folgenden Dinge an die Spitze zu erwähnen. In JS soll die in den folgenden definierten Dinge (Variablen oder Funktionen) auf die vorherige Definition definiert werden. Wie aus dem obigen Beispiel ersichtlich ist, bewegen sich Foo und Bar in der Funktion im Inneren der Funktion nach oben, wodurch die globalen Foo- und Barfunktionen abdeckt. Der Unterschied zwischen lokalen Funktionen Bar und Foo besteht darin, dass Foo nach oben befördert wird und normal laufen kann, während die Definition von bar () nicht verbessert wurde, nur seine Erklärung wird gefördert. Wenn bar () ausgeführt wird, ist das Ergebnis daher undefiniert, anstatt als Funktion verwendet zu werden.

Echtzeit-Funktionsmodus

Funktionen sind auch Objekte, sodass sie als Rückgabewerte verwendet werden können. Der Vorteil der Verwendung von Selbstversorgungsfunktionen besteht darin, eine anonyme Funktion direkt zu deklarieren und sofort zu verwenden, um zu vermeiden, dass eine Funktion nicht verwendet wird, die nicht einmal verwendet wird, und sie wird vom Problem der Namenskonflikte vermieden. Es gibt kein Konzept des Namespace in JS, daher ist es einfach, Funktionsnamenkonflikte zu haben. Sobald ein Namenskonflikt vorgenommen wurde, wird der zuletzt erklärte, dass man sich durchsetzt.

Modus 1:

 <Script> (function () {var a = 1; return function () {alert (2);};} () ()); // 2 auftauchen auf

Muster 2: Zeigen von Selbstversorgungsfunktionsvariablen

 <script type = "text/javaScript"> var result = (function () {return 2;}) (); // Die Funktion alarm (Ergebnis); // Ergebnis zeigt auf den Rückgabewert 2 der selbst ausgestellten Funktion; Wenn result () auftaucht, tritt ein Fehler auf </script>

Muster drei: verschachtelte Funktionen

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

Modus 4: Self-Execution-Funktion weist ihren Rückgabewert einer Variablen zu

 var abc = (function () {var a = 1; return function () {return ++ a;}}) () (); // Die Funktion der Selbstversorgungsfunktion gibt die Funktion nach Rückkehr zur Variablen-Warnung (ABC ()) zurück, wenn es sich um Warnmeldung handelt (ABC), der Code nach der Rückgabeanweisung wird aufgetaucht; Wenn es ABC () ist, wird die Funktion nach der Rückkehr ausgeführt

Muster 5: Die Funktion führt sich intern aus, rekursiv

 // Dies ist eine Selbstausnahmefunktion, die Funktion führt sich intern aus, rekursive Funktion ABC () {abc (); }

Rückrufmodus

Rückruffunktion: Wenn Sie eine Funktion übergeben, write () als Argument an eine andere Funktion CALL (), dann kann Call () irgendwann ausführen (oder aufrufen). Schreiben Sie (). In diesem Fall wird Write () als Rückruffunktion bezeichnet.

Asynchroner Event -Hörer

Der Callback -Modus hat viele Verwendungszwecke, beispielsweise wenn ein Ereignishörer an ein Element auf der Seite angeschlossen ist, bietet er tatsächlich einen Zeiger auf eine Rückruffunktion, die aufgerufen wird, wenn das Ereignis auftritt. wie:

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

Das obige Codebeispiel zeigt die Rückruffunktionskonsole.Log () im Blasenmodus, wenn das Dokument klickt.

JavaScript ist besonders für die ereignisgesteuerte Programmierung geeignet, da der Callback-Modus die Programme unterstützt, um asynchron auszuführen.

Auszeit

Ein weiteres Beispiel für die Verwendung des Callback -Modus ist die Verwendung der Zeitüberschreitungsmethode, die vom Fensterobjekt des Browsers bereitgestellt wird: setTimeout () und setInterval (), wie z. B.:

 <script type = "text/javaScript"> var call = function () {console.log ("100 ms wird gefragt ..."); }; setTimeout (call, 100); </script>

Rückrufmodus in der Bibliothek

Beim Entwerfen einer JS -Bibliothek wird die Rückruffunktion nützlich sein. Der Code einer Bibliothek sollte so weit wie möglich wiederverwendbarer Code verwenden, und der Rückruf kann dazu beitragen, diese Verallgemeinerung zu erreichen. Wenn wir eine riesige JS -Bibliothek entwerfen, können wir uns nicht auf Kernfunktionen konzentrieren und Rückruffunktionen in "Hook -Form" bereitstellen, die es uns erleichtern, Bibliotheksmethoden zu erstellen, zu skalieren und anzupassen

Currying

Currying ist eine Technik, die eine Funktion in eine neue vereinfachte Funktion (zu weniger Parametern) umwandelt, indem mehrere Parameter in eine Funktionskörper gefüllt werden. - 【JavaScript -kompetent】

Einfach ausgedrückt ist Curryisierung ein Konvertierungsprozess, dh der Prozess unserer Funktionsumwandlung. Wie im folgenden Beispiel gezeigt:

 <script type = "text/javaScript"> // Curry-basierte add () Funktion Funktion add (x, y) {var oldx = x, oldy = y; if (typeof oldy == "undefined") {return function (newy) {return OldX + Newy; }; } // Return X+Y vollständig anwenden; } // Testtyp von add (5); // Ausgabe "Funktion" add (3) (4); // 7 // eine neue Funktion var add2000 = add (2000) erstellen und speichern; Add2000 (10); // Ausgabe 2010 </script>

Wenn add () zum ersten Mal aufgerufen wird, schafft es einen Verschluss für die zurückgegebene interne Funktion. Dieser Verschluss speichert die ursprünglichen X- und Y -Werte in die privaten Variablen Oldx und Oldy.

Jetzt können wir eine allgemeine Curry -Methode unter Verwendung einer beliebigen Funktion verwenden, z. B.:

 <script type = "text/javaScript"> // gewöhnliche Funktion Funktion add (x, y) {return x + y; } // Curry Eine Funktion, um eine neue Funktion zu erhalten var Newadd = test (add, 5); Newadd (4); // 9 // Rufen Sie den neuen Funktionstest direkt auf (add, 6) (7); // Ausgabe 13 </script>

Wann man Curry benutzt

Wenn festgestellt wird, dass dieselbe Funktion aufgerufen wird und die meisten der übergebenen Parameter gleich sind, kann die Funktion ein guter Kandidat für die Curryisierung sein