Teilen Sie 5 JS-High-Order-Funktionen

Teilen Sie 5 JS-High-Order-Funktionen

1. Einleitung

In JavaScript ist eine Funktion tatsächlich ein Datum, was bedeutet, dass eine Funktion auch einer Variablen zugewiesen werden kann. Dieser Artikel stellt einige Verwendungsmöglichkeiten von Funktionen höherer Ordnung in JavaScript vor.

2. Rekursion

Die sogenannte Rekursion bezieht sich auf eine Funktion, die sich selbst aufruft. Um es mit einer Geschichte zu sagen: Es war einmal ein Berg, auf dem Berg war ein Tempel, und im Tempel lebte ein alter Mönch, der einem jungen Mönch eine Geschichte erzählte! Worum geht es? „Vor langer Zeit gab es einen Berg, auf dem Berg gab es einen Tempel, in dem Tempel lebte ein alter Mönch, der einem jungen Mönch eine Geschichte erzählte! Was war die Geschichte? ‚Vor langer Zeit gab es einen Berg, auf dem Berg gab es einen Tempel, in dem Tempel lebte ein alter Mönch, der einem jungen Mönch eine Geschichte erzählte! Was war die Geschichte? …‘“

In gewissem Sinne ähnelt Rekursion einer Schleife. Beide führen den gleichen Code wiederholt aus und beide erfordern eine Abbruchbedingung, um Endlosschleifen oder Endlosrekursion zu vermeiden.

Die notwendigen Voraussetzungen für eine Rekursion sind folgende:

  • Das Teilproblem ist das gleiche wie das ursprüngliche Problem, aber einfacher
  • Es muss einen Ausgang geben

Es gibt zwei Möglichkeiten, rekursive Aufrufe in JavaScript durchzuführen:

  • Durch Verwendung des Funktionsnamens
  • Dies geschieht mithilfe der Eigenschaft arguments.callee.

Der folgende Code zeigt eine einfache Rekursion:

var v = 1 // Beendigungsbedingung Funktion fun() {
  console.log('erster' + v + 'zweiter Funktionsaufruf')
  v++
  wenn (v <= 3) {
    Spaß()
  }
}
Spaß()


Die Ausführungsergebnisse sind wie folgt

Erster Aufruf der Funktion Zweiter Aufruf der Funktion Dritter Aufruf der Funktion

3. Rückruffunktion

Da eine Funktion dasselbe ist wie alle Daten, die einer Variablen zugewiesen werden können, können sie wie alle anderen Daten definiert, gelöscht, kopiert und als Argument an andere Funktionen übergeben werden.

Wenn eine Funktion als Argument an eine andere Funktion übergeben wird, wird die als Argument übergebene Funktion als Rückruffunktion bezeichnet. Die Funktion, die die Rückruffunktion verwendet, wird als Zielfunktion (äußere Funktion) bezeichnet.

Der Beispielcode lautet wie folgt:

//Definieren Sie eine Funktion mit zwei Funktionstypparametern, führen Sie die beiden Funktionen anschließend separat aus und geben Sie ihre Summe zurück.
Funktion Summe(a, b) {
  // Zielfunktion return a() + b()
}

Funktion eins() {
  // Rückruffunktion gibt 1 zurück
}

Funktion zwei() {
  // Rückruffunktion gibt 2 zurück
}

console.log(Summe(eins, zwei)) // 3

Der Codeausführungsprozess läuft wie folgt ab:

Bei der Ausführung der sum werden zwei tatsächliche Parameter übergeben. In der sum werden die beiden tatsächlichen Parameter als Funktionen ausgeführt und der Rückgabewert berechnet und zurückgegeben.

3.1 Anonyme Rückruffunktion

Die sogenannte anonyme Rückruffunktion ist eine Funktion, deren Parameter in der Zielfunktion eine Funktion ohne Namen ist. Ändern Sie den vorherigen Code, um eine anonyme Rückruffunktion zu verwenden.

//Definieren Sie eine Funktion mit zwei Funktionstypparametern, führen Sie die beiden Funktionen anschließend separat aus und geben Sie ihre Summe zurück.
Funktion Summe(a, b) {
  // Zielfunktion return a() + b()
}

konsole.log(
  Summe(
    Funktion () {
      // Anonyme Rückruffunktion gibt 1 zurück
    },
    Funktion () {
      // Anonyme Rückruffunktion gibt 2 zurück
    },
  ),
) // 3

3.2 Callback-Funktion mit Parametern

Die Callback-Funktion kann Parameter hinzufügen. Der Beispielcode lautet wie folgt:

Funktion multiplyByTwo(Liste, Rückruf) {
  Liste.fürJedes(Funktion (v, i) {
    Rückruf(v * 2, i)
  })
}
Var-Liste = [1, 2, 3]
multiplizierenMitZwei(Liste, Funktion (v, i) {
  liste[i] = v
})
console.log(Liste) // [ 2, 4, 6 ]


3.3 Vor- und Nachteile von Callback-Funktionen

  • Anonyme Callback-Funktionen speichern globalen Namespace
  • Öffnen Sie private Dateninhalte zur Verwendung am angegebenen Speicherort
  • Die Kapselung ist gewährleistet - private Daten können verwendet werden, die Quelle ist jedoch unbekannt
  • Hilft, die Leistung zu verbessern

Callback-Funktionen haben jedoch auch Nachteile. Wenn der Parameter der Zielfunktion eine Callback-Funktion ist, ist der Parameter der Callback-Funktion eine andere Callback-Funktion und der Parameter der anderen Callback-Funktion ist ebenfalls eine Callback-Funktion ... das heißt, es handelt sich um Nesting Dolls, die eine Callback-Falle bilden. In schwerwiegenderen Fällen kann dies als Callback-Hölle bezeichnet werden.

4. Selbstoptimierungsfunktion

Die sogenannte Selbstoptimierungsfunktion ist eine Funktion, die unmittelbar nach der Definition aufgerufen wird. Der Beispielcode lautet wie folgt:

;(Funktion () {
  console.log('Selbstoptimierungsfunktion')
})()


Diese Syntax mag ein wenig einschüchternd wirken, hat aber eigentlich nichts zu bedeuten. Wir setzen einfach die Definition der anonymen Funktion in ein Paar Klammern, gefolgt von einem weiteren Paar Klammern außerhalb.

Die grammatische Struktur ist in der folgenden Abbildung dargestellt:

Neben den beiden oben genannten Methoden gibt es noch einige andere, ungewöhnliche Methoden für selbstoptimierende Funktionen. Der Beispielcode lautet wie folgt:

;+(Funktion (v) {
  // Formaler Parameter var w = 100 // Lokale Variable console.log('Selbstoptimierungsfunktion' + v)
})(1) // Parameter!(Funktion (v) {
  var w = 100 // lokale Variable console.log('Selbstoptimierungsfunktion' + v)
})(2)

~(Funktion (v) {
  var w = 100 // lokale Variable console.log('Selbstoptimierungsfunktion' + v)
})(3)

Der Vorteil der Verwendung einer selbstanpassenden anonymen Funktion besteht darin, dass keine globalen Variablen erstellt werden.

Der Nachteil besteht darin, dass eine solche Funktion nicht wiederholt ausgeführt werden kann (es sei denn, sie wird in eine Schleife oder eine andere Funktion eingefügt). Dadurch eignen sich Sofortfunktionen auch sehr gut zum Ausführen einiger einmaliger Aufgaben oder Initialisierungsaufgaben.

5. Funktion des Wertes

Wenn eine Funktion als Ergebnis einer anderen Funktion zurückgegeben wird, wird die als Ergebnis zurückgegebene Funktion als Funktion als Wert bezeichnet.

Der Beispielcode lautet wie folgt:

Funktion outer() {
  var v = 100
  // Definiere eine andere Funktion im Hauptteil einer Funktion -> interne (private) Funktion return function () {
    //Verwende eine anonyme Funktion, um v * 2 zurückzugeben
  }
}
var Ergebnis = äußere()
console.log(Ergebnis) // [Funktion]


Dies hat folgende Vorteile:

  • Dadurch können wir sicherstellen, dass der globale Namensraum rein ist (was bedeutet, dass die Wahrscheinlichkeit von Namenskonflikten geringer ist).
  • Gewährleistung der Privatsphäre – Dies gibt uns die Möglichkeit, der „Außenwelt“ nur die unbedingt erforderlichen Funktionen zugänglich zu machen und gleichzeitig unsere eigenen Funktionen beizubehalten, die nicht von anderen Teilen der Anwendung verwendet werden.

6. Abschluss

Closure ist ein in Funktionen vorgeschlagenes Konzept. Einfach ausgedrückt bezieht sich eine Funktionsdefinition auf Variablen, die außerhalb der Funktion definiert sind, und die Funktion kann außerhalb ihrer Definitionsumgebung ausgeführt werden. Ein Abschluss erfolgt, wenn auf eine innere Funktion auf irgendeine Weise von einem äußeren Funktionsbereich aus zugegriffen wird.

Tatsächlich kann Geschlossenheit als ein allgemeineres Funktionskonzept betrachtet werden. Weil es sich nicht mehr um eine Funktion im herkömmlichen Sinne handelt.

Schließungsbedingungen:

  • Eine innere Funktion wird innerhalb einer äußeren Funktion definiert.
  • Eine externe Funktion hat einen Rückgabewert und der Rückgabewert ist die interne Funktion.
  • Die innere Funktion referenziert auch die Variablen der äußeren Funktion.

Nachteile von Verschlüssen:

  • Der Umfang ist weniger intuitiv.
  • Da für Variablen keine Speicherbereinigung durchgeführt wird, besteht ein gewisses Problem hinsichtlich der Speichernutzung.

Die Rolle des Abschlusses:

  • Sie können Peer-Bereiche verwenden.
  • Lesen Sie die internen Variablen anderer Elemente.
  • Erweitern Sie den Umfang.
  • Vermeiden Sie die Verschmutzung globaler Variablen

Das Prinzip der Schließung:

Wir können die Ausführung einer Funktion in zwei Phasen unterteilen, die Vorkompilierungsphase und die Ausführungsphase.

  • Wenn während der Vorkompilierungsphase festgestellt wird, dass eine innere Funktion Variablen einer äußeren Funktion verwendet, wird ein Closure-Objekt im Speicher erstellt und die entsprechenden Werte gespeichert. Wenn bereits ein Closure vorhanden ist, müssen Sie nur den entsprechenden Eigenschaftswert hinzufügen.
  • Nach Abschluss der Ausführung wird der Funktionsausführungskontext gelöscht und der Verweis der Funktion auf das Closure-Objekt wird zerstört, aber ihre innere Funktion enthält weiterhin einen Verweis auf das Closure, sodass die innere Funktion weiterhin die Variablen der äußeren Funktion verwenden kann.

Closures nutzen hauptsächlich die Eigenschaften von Gültigkeitsbereichsketten. Eine innerhalb einer Funktion definierte Funktion fügt das aktive Objekt, das die Funktion enthält, ihrer eigenen Gültigkeitsbereichskette hinzu. Wenn die Funktion ausgeführt wird, wird ihre Ausführungs-Gültigkeitsbereichskette zerstört. Da die Gültigkeitsbereichskette der inneren Funktion jedoch immer noch auf dieses aktive Objekt verweist, wird ihr aktives Objekt erst zerstört, wenn die innere Funktion zerstört wird.

Demo der Closure-Implementierung:

// 1. Bedienen Sie die lokalen Variablen in der Funktion über die zurückgegebene interne Funktion function fun () {
    var v = 100; // lokale Variable // Greifen Sie auf die lokale Variable v zu, indem Sie ein Objekt zurückgeben, um den Abschluss abzuschließen return {
        setze: Funktion (x) {
            v = x;
        },
        erhalten: Funktion () {
            zurückgeben v
        }
    }
}
var Ergebnis = Spaß();
Ergebnis.Satz(200)
konsole.log(ergebnis.get()); // 200


// 2. Definieren Sie eine lokale Variable, um zu zählen, wie oft die Funktion aufgerufen wird var generate_count = function () {
    var Container = 0;
    Rückgabefunktion () {
        Container++
        console.log(`Dies ist der ${container}te Aufruf`);
    }
}

var Ergebnis = Anzahl_generieren();
result(); // Dies ist der erste Aufruf result(); // Dies ist der zweite Aufruf result(); // Dies ist der dritte Aufruf
// 3. Ändern Sie die Funktion Math.pow() so, dass beim Ermitteln des Quadrats oder der dritten Potenz einer Zahl nicht jedes Mal der zweite Parameter übergeben werden muss/*
Math.pow(4, 2) // 4 im Quadrat Math.pow(4, 3) // 4 hoch drei */

// Schreibe einen Funktionsgenerator function makePower (power) {
    return (Zahl) => {
        return Math.pow(Zahl, Leistung)
    }
}
// Quadrat let power2 = makePower(2)
// Würfel let power3 = makePower(3)
// Berechne das Quadrat von 4 console.log(power2(4)) // 16
// Berechne die dritte Potenz von 4 console.log(power3(4)) // 62

Zusammenfassen:

Dieser Artikel stellt fünf Funktionen höherer Ordnung in JavaScript vor, nämlich Rekursion, Rückruffunktionen, selbstanpassende Funktionen, Wertfunktionen sowie die Verwendung und Implementierung von Closures.

Dies ist das Ende dieses Artikels über JS-Funktionen höherer Ordnung. Weitere verwandte JS-Funktionen höherer Ordnung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Details zu gängigen Javascript-Funktionen höherer Ordnung
  • Detaillierte Erklärung der JavaScript-Funktionen höherer Ordnung
  • Detaillierte Untersuchung von JavaScript-Funktionen höherer Ordnung
  • Analyse der Verwendung von Funktionen höherer Ordnung in der funktionalen Programmierung in JavaScript
  • Analyse der Prinzipien und Anwendungsbeispiele von JS-Funktionen höherer Ordnung
  • Eine detaillierte Erklärung des Charmes von Funktionen höherer Ordnung in JavaScript

<<:  Die CSS-Stilsteuerung zum Erreichen des Datensatzverlaufs des IE-Übermittlungsformulars und der Klick-Rückgabeinformationen ist weiterhin vorhanden

>>:  Beispielcode zur Implementierung einer einfachen Suchmaschine mit MySQL

Artikel    

Artikel empfehlen

HTML-Tutorial: Sammlung häufig verwendeter HTML-Tags (5)

Verwandte Artikel: Anfänger lernen einige HTML-Ta...

Gründe und Lösungen für das Nicht-Wirksamwerden der MySQL-SQL-Modus-Änderung

Inhaltsverzeichnis Vorwort Szenariosimulation Zus...

Wie MLSQL Stack das Stream-Debugging vereinfacht

Vorwort Ein Klassenkamerad untersucht die Streami...

Beispielcode für CSS-Bildanimationseffekte (Fotorahmen)

Dieser Artikel stellt den Beispielcode für CSS-Bi...

Perfekte Lösung für asynchrone Timeout-Vorgänge im JavaScript-Frontend

Inhaltsverzeichnis Was passiert, wenn die Ausführ...

Detaillierte Erklärung der Überwachungseigenschaften von Vue

Inhaltsverzeichnis Vue-Monitoreigenschaften Was i...

Verwendung der VUE-Renderfunktion und ausführliche Erklärung

Inhaltsverzeichnis Vorwort Die Rolle des Renders ...

So erstellen Sie schnell MySQL Master-Slave mit mysqlreplicate

Einführung Das mysql-utilities-Toolset ist eine S...

Eine kurze Analyse der Netzwerkprogrammierfunktionen von Linux

Inhaltsverzeichnis 1. Erstellen Sie einen Socket ...

Vue.js implementiert Kalenderfunktion

In diesem Artikelbeispiel wird der spezifische Co...