Detaillierte Erläuterung der JavaScript-Funktionsmuster

Detaillierte Erläuterung der JavaScript-Funktionsmuster_Grundkenntnisse

WBOY

Freigeben： 2016-05-16 16:31:58

Original

1339 Leute haben es durchsucht

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.

Grundlegender Teil der JS-Funktion: Javascript-Studiennotizen (4) Funktionsfunktionsteil

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
};

Funktionserklärung

Code kopieren Der Code lautet wie folgt:

Funktion foo(){

//hier codieren

} //Hier ist kein Semikolon erforderlich

Ein Funktionsausdruck sollte immer ein abschließendes Semikolon verwenden und ein abschließendes Semikolon ist in Funktionsdeklarationen 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 der Variablen

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 der 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, dass das Dokumentklickereignis im Bubbling-Modus an die Rückruffunktion console.log() übergeben wird

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ückrufmodus 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