Detaillierte Erläuterung des Funktionsmusters in JavaScript_Javascript-Kenntnissen

Die Rolle von JavaScript-Entwurfsmustern besteht darin, die Wiederverwendbarkeit und Lesbarkeit von Code zu verbessern und die Wartung und Erweiterung des Codes zu erleichtern

In JavaScript ist eine Funktion ein Objekttyp, was bedeutet, dass sie als Parameter an andere Funktionen übergeben werden kann. Darüber hinaus können Funktionen auch einen Gültigkeitsbereich bereitstellen.

Syntax zum Erstellen von Funktionen

Benannter Funktionsausdruck

Code kopieren Der Code lautet wie folgt:

//Benannter Funktionsausdruck
var add = Funktion add(a,b){
Geben Sie a b;
zurück };

Funktionsausdruck

Code kopieren Der Code lautet wie folgt:

//Auch als anonyme Funktion bekannt
var add = function(a,b){
Geben Sie a b;
zurück };

Der der Variablen add zugewiesene Wert ist die Funktionsdefinition selbst. Auf diese Weise wird add zu einer Funktion, die überall aufgerufen werden kann.

Funktionserklärung

Code kopieren Der Code lautet wie folgt:

Funktion foo(){
//hier codieren
} //Hier ist kein Semikolon erforderlich

In Funktionsausdrücken sollte immer ein abschließendes Semikolon verwendet werden, und in Funktionsdeklarationen ist ein abschließendes Semikolon nicht erforderlich.

Funktionsdeklarationen und Ausdrücke

Heben von Funktionen

Das Verhalten von Funktionsdeklarationen entspricht nicht dem von benannten Funktionsausdrücken. Der Unterschied liegt im Hebeverhalten. Siehe folgendes Beispiel:

Code kopieren Der Code lautet wie folgt:

Alle Variablen, unabhängig davon, wo sie im Funktionskörper deklariert sind, werden intern an die Spitze der Funktion gehoben. Der Grund, warum es universell auf Funktionen anwendbar ist, liegt darin, dass Funktionen nur Objekte sind, die Variablen zugewiesen sind.

Aufstieg bedeutet, wie der Name schon sagt, Dinge von unten nach oben zu heben. In JS geht es darum, am Ende definierte Dinge (Variablen oder Funktionen) so zu befördern, dass sie an der Vorderseite definiert werden. Wie aus dem obigen Beispiel ersichtlich ist, werden foo und bar innerhalb des Funktionshubs nach oben verschoben und decken somit die globalen foo- und bar-Funktionen ab. Der Unterschied zwischen den lokalen Funktionen bar und foo besteht darin, dass foo nach oben befördert wird und normal ausgeführt werden kann, während die Definition von bar() nicht höhergestuft wird, sondern nur seine Deklaration. Wenn also bar() ausgeführt wird, wird das Ergebnis angezeigt als undefiniert, anstatt als Funktion verwendet zu werden.

Sofortfunktionsmodus

Funktionen sind ebenfalls Objekte und können daher als Rückgabewerte dienen. Der Vorteil der Verwendung einer selbstausführenden Funktion besteht darin, dass eine anonyme Funktion direkt deklariert und sofort verwendet werden kann, wodurch die Notwendigkeit entfällt, eine Funktion zu definieren, die dann nicht verwendet wird, und das Problem von Namenskonflikten zu vermeiden. Es gibt kein Konzept des Namensraums in js, daher kann es leicht zu Funktionsnamenskonflikten kommen. Im Falle eines Namenskonflikts hat der zuletzt deklarierte Name Vorrang.

Modus 1:

Code kopieren Der Code lautet wie folgt:

<script><br> (Funktion () {<br>       var a = 1;<br>          Return-Funktion () {<br> alarm(2);<br>         };<br> }()());//Pop up 2, die erste Klammer ist selbstausführend und die zweite Klammer führt die interne anonyme Funktion <br> aus </script>

Modus 2: Verweisen auf selbstausführende Funktionsvariablen

Code kopieren Der Code lautet wie folgt:

Modus 3: Verschachtelte Funktionen

Code kopieren Der Code lautet wie folgt:

Modus 4: Die selbstausführende Funktion weist ihren Rückgabewert einer Variablen zu

Code kopieren Der Code lautet wie folgt:

var abc = (Funktion () {
          var a = 1;
              Return-Funktion () {
                      return a;
            }
           })();//Die selbstausführende Funktion gibt die Funktion nach Rückkehr an die Variable
zurück Alert(abc());//Wenn es Alert(abc) ist, wird der Code nach der Return-Anweisung angezeigt; wenn es abc() ist, wird die Funktion nach Return ausgeführt

Modus 5: Die Funktion führt sich selbst intern rekursiv aus

Code kopieren Der Code lautet wie folgt:

// Dies ist eine selbstausführende Funktion. Die Funktion führt sich intern selbst aus, rekursiv
Funktion abc() { abc(); }

Rückrufmodus

Rückruffunktion: Wenn Sie eine Funktion write() als Parameter an eine andere Funktion call() übergeben, kann call() zu einem bestimmten Zeitpunkt write() ausführen (oder aufrufen). In diesem Fall wird write() als Callback-Funktion bezeichnet.

Asynchroner Ereignis-Listener

Das Rückrufmuster hat viele Verwendungsmöglichkeiten. Wenn Sie beispielsweise einen Ereignis-Listener an ein Element auf der Seite anhängen, stellt es tatsächlich einen Zeiger auf eine Rückruffunktion bereit, die aufgerufen wird, wenn das Ereignis auftritt. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

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

Das obige Codebeispiel zeigt das , das im Bubbling-Modus an die Rückruffunktion console.log() übergeben wird, wenn das Dokumentklickereignis stattfindet

Javascript eignet sich besonders für die ereignisgesteuerte Programmierung, da der Callback-Modus die asynchrone Ausführung des Programms unterstützt.

Zeitüberschreitung

Ein weiteres Beispiel für die Verwendung des Rückrufmodus ist die Verwendung der Timeout-Methoden, die vom Fensterobjekt des Browsers bereitgestellt werden: setTimeout() und setInterval(), wie zum Beispiel:

Code kopieren Der Code lautet wie folgt:

Rückrufmuster in der Bibliothek

Beim Entwerfen einer js-Bibliothek sind Rückruffunktionen hilfreich. Der Code einer Bibliothek sollte so weit wie möglich wiederverwendbaren Code verwenden, und Rückrufe können dabei helfen, diese Verallgemeinerung zu erreichen. Wenn wir eine riesige JS-Bibliothek entwerfen, benötigen Benutzer tatsächlich die meisten Funktionen nicht, und wir können uns auf die Kernfunktionen konzentrieren und Rückruffunktionen in „Hook-Form“ bereitstellen, was uns das Erstellen von Erweiterungen erleichtert. und benutzerdefinierte Bibliotheksmethoden

Curry

Curry-Technologie ist eine Technologie, die eine Funktion in eine neue vereinfachte Funktion (die weniger Parameter akzeptiert) umwandelt, indem mehrere Parameter in den Funktionskörper eingefügt werden. ————【Kenntnisse in JavaScript】

Einfach ausgedrückt ist Currying ein Konvertierungsprozess, dh der Prozess, in dem wir eine Funktionskonvertierung durchführen. Beispiel unten:

Code kopieren Der Code lautet wie folgt:

Wenn add() zum ersten Mal aufgerufen wird, erstellt es einen Abschluss für die zurückgegebene innere Funktion. Dieser Abschluss speichert die ursprünglichen x- und y-Werte in den privaten Variablen oldx und oldy.

Jetzt können wir die allgemeinen Methoden jedes Funktionscurrys verwenden, wie zum Beispiel:

Code kopieren Der Code lautet wie folgt:

Wann man Curry verwenden sollte

Wenn sich herausstellt, dass dieselbe Funktion aufgerufen wird und die übergebenen Parameter überwiegend gleich sind, dann ist die Funktion möglicherweise ein guter Kandidat für den Parameter zum Currying