Callback-Funktionen in JavaScript verstehen und verwenden

Überblick

In JavaScript sind Funktionen erstklassige Objekte, was bedeutet, dass Funktionen wie erstklassige Objekte verwaltet und verwendet werden können. Da Funktionen tatsächlich Objekte sind, können sie in Variablen „gespeichert“ werden, können als Funktionsparameter übergeben werden, können innerhalb von Funktionen erstellt werden und können von Funktionen zurückgegeben werden.

Da Funktionen erstklassige Objekte sind, können wir in JavaScript Rückruffunktionen verwenden. Im folgenden Artikel erfahren wir alles über Rückruffunktionen. Rückruffunktionen sind wahrscheinlich die am häufigsten verwendete funktionale Programmiertechnik in JavaScript, und obwohl sie nur ein kleiner Teil des JavaScript- oder jQuery-Codes zu sein scheinen, bleiben sie für viele Entwickler ein Rätsel. Nach dem Lesen dieses Artikels verstehen Sie, wie Sie Rückruffunktionen verwenden.

Rückruffunktionen sind ein Konzept, das aus einem Programmierparadigma namens funktionale Programmierung abgeleitet ist. Einfach ausgedrückt bedeutet funktionale Programmierung die Verwendung von Funktionen als Variablen. Funktionale Programmierung wurde – und wird auch heute noch nicht häufig eingesetzt – oft als geheime Fähigkeit speziell ausgebildeter Meisterprogrammierer angesehen.

Glücklicherweise handelt es sich bei Funktionen um eine Programmierfertigkeit, die mittlerweile ausreichend erklärt wurde, sodass normale Leute wie Sie und ich sie problemlos verwenden können. Eine der Haupttechniken der funktionalen Programmierung sind Rückruffunktionen. Im folgenden Inhalt werden Sie feststellen, dass die Implementierung einer Rückruffunktion so einfach ist wie die Übergabe von Parametern an eine normale Funktion. Diese Technik ist so einfach, dass ich mich oft frage, warum sie häufig in Kapiteln zu fortgeschrittenen JavaScript-Techniken enthalten ist.

Was sind Rückrufe oder Funktionen höherer Ordnung?

Eine Rückruffunktion, auch Funktion höherer Ordnung genannt, ist eine Funktion, die als Argument an eine andere Funktion übergeben wird (hier nennen wir die andere Funktion otherFunction), wo die Rückruffunktion aufgerufen wird. Eine Rückruffunktion ist im Wesentlichen ein Programmiermuster (eine für ein allgemeines Problem erstellte Lösung). Die Verwendung von Rückruffunktionen wird daher auch als Rückrufmuster bezeichnet.

Hier ist ein einfaches und gängiges Beispiel für die Verwendung von Rückruffunktionen in jQuery:

//Beachten Sie, dass die Klickmethode eine Funktion und keine Variable ist. //Es handelt sich um die Rückruffunktion $("#btn_1").click(function() {
    alert("Taste 1 geklickt");
});

Wie Sie im vorherigen Beispiel sehen können, haben wir der Klickmethode eine Funktion als Parameter übergeben. Die Klickmethode ruft die Funktion auf (oder führt sie aus), die wir ihr übergeben. Dies ist eine typische Verwendung von Rückruffunktionen in JavaScript und wird in jQuery häufig verwendet.

Hier ist ein weiteres Beispiel für eine typische Callback-Funktion in JavaScript:

var Freunde = ["Mike", "Stacy", "Andy", "Rick"];

Freunde.fürJeden(Funktion (jederName, Index){
    console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick
});

Beachten Sie erneut, dass wir eine anonyme Funktion (eine Funktion ohne Namen) als Parameter an die forEach-Methode übergeben haben.

Bisher haben wir anonyme Funktionen als Argumente an eine andere Funktion oder Methode übergeben. Bevor wir uns praktischere Beispiele ansehen und unsere eigenen Rückruffunktionen schreiben, wollen wir zunächst verstehen, wie Rückruffunktionen funktionieren.

Wie funktionieren Callback-Funktionen?

Da Funktionen in JavaScript erstklassige Objekte sind, behandeln wir Funktionen wie Objekte. Wir können Funktionen also wie Variablen weitergeben, Funktionen aus Funktionen zurückgeben und Funktionen aus anderen Funktionen verwenden. Wenn wir eine Rückruffunktion als Argument an eine andere Funktion übergeben, übergeben wir nur die Funktionsdefinition. Wir führen die Funktion nicht auf den Argumenten aus. Wir übergeben die Funktion nicht mit einem Paar Klammern (), wie wir es normalerweise bei der Ausführung einer Funktion tun.

Es ist wichtig zu beachten, dass die Rückruffunktion nicht sofort ausgeführt wird. Es wird (wie der Name schon sagt) zu einem bestimmten Zeitpunkt innerhalb der Funktion, die es enthält, zurückgerufen. Auch wenn das erste jQuery-Beispiel so aussieht:

//Anonyme Funktionen werden nicht in Parametern ausgeführt //Dies ist eine Callback-Funktion $("#btn_1").click(function(){
    alert("Taste 1 geklickt");
});

Diese anonyme Funktion wird später innerhalb des Funktionskörpers aufgerufen. Auch mit einem Namen ist es weiterhin über das Argumentobjekt innerhalb der enthaltenen Funktion zugänglich.

Callback-Funktionen sind Closures

Wenn Sie eine Rückruffunktion als Variable an eine andere Funktion übergeben, wird die Rückruffunktion an einem bestimmten Punkt in der enthaltenen Funktion ausgeführt, als ob die Rückruffunktion in der enthaltenen Funktion definiert wäre. Dies bedeutet, dass eine Rückruffunktion im Wesentlichen ein Abschluss ist.

Wie wir wissen, können Closures in den Gültigkeitsbereich der Funktion eintreten, die sie enthält. Die Rückruffunktion kann also sowohl auf die Variablen in der enthaltenden Funktion als auch auf die Variablen im globalen Gültigkeitsbereich zugreifen.

Das Grundprinzip der Implementierung der Rückruffunktion

Rückruffunktionen sind nicht kompliziert, aber bevor wir mit der Erstellung und Verwendung von Rückruffunktionen beginnen, sollten wir mit mehreren grundlegenden Prinzipien der Implementierung von Rückruffunktionen vertraut sein.

Benannte oder anonyme Funktionen als Rückrufe verwenden

Im vorherigen jQuery-Beispiel und im forEach-Beispiel haben wir eine anonyme Funktion verwendet, die im Parameter position als Rückruffunktion definiert ist. Dies ist ein gängiger Zaubertrick, der in Rückruffunktionen verwendet wird. Ein anderes gängiges Muster besteht darin, eine benannte Funktion zu definieren und den Funktionsnamen als Variable an die Funktion zu übergeben. Beispielsweise das folgende Beispiel:

//Globale Variablen var allUserData = [];

//Gewöhnliche logStuff-Funktion, druckt den Inhalt in die Konsolenfunktion logStuff (userData) {
    wenn (Typ der Benutzerdaten === "Zeichenfolge"){
        console.log(Benutzerdaten);
    } sonst wenn ( Typ von Benutzerdaten === "Objekt"){
        für (var item in userData) {
            console.log(Element + ": " + Benutzerdaten[Element]);
        }
    }
}

//Eine Funktion, die zwei Parameter empfängt, von denen der letzte eine Callback-Funktion ist function getInput (options, callback) {
    allUserData.push(Optionen);
    Rückruf (Optionen);
}

//Wenn wir die getInput-Funktion aufrufen, übergeben wir ihr logStuff als Parameter //so dass logStuff innerhalb der getInput-Funktion zurückgerufen (oder ausgeführt) wird
getInput({name:"Rich",speciality:"Javascript"}, logStuff);
//Name:Reich
//Spezialität:Javascript

Übergeben von Parametern an die Rückruffunktion

Da die Rückruffunktion bei ihrer Ausführung nur eine normale Funktion ist, können wir ihr Parameter übergeben. Wir können jede Eigenschaft der enthaltenen Funktion (oder globale Eigenschaft) als Argument an die Rückruffunktion übergeben. Im vorherigen Beispiel haben wir Optionen als Parameter an die Rückruffunktion übergeben. Nun übergeben wir eine globale Variable und eine lokale Variable:

//Globale Variablen var generalLastName = "Cliton";

Funktion getInput (Optionen, Rückruf) {
    allUserData.push (Optionen);
    //Übergeben Sie die globale Variable „generalLastName“ an die Rückruffunktion „callback(generalLastName,options);“
}

Stellen Sie sicher, dass der Rückruf eine Funktion ist, bevor Sie ihn ausführen

Es ist ratsam, vor dem Aufruf zu überprüfen, ob es sich bei dem als Argument übergebenen Rückruf tatsächlich um eine Funktion handelt. Dies ist außerdem ein guter Zeitpunkt, um bedingte Rückrufe zu implementieren.

Lassen Sie uns die getInput-Funktion im obigen Beispiel umgestalten, um sicherzustellen, dass die Prüfung angemessen ist.

Funktion getInput(Optionen, Rückruf){
    allUserData.push(Optionen);
    
    // Stelle sicher, dass Callback eine Funktion ist, if (typeof callback === "function") {
        //Rufen Sie es auf, nachdem wir nun festgestellt haben, dass es aufrufbar ist. callback(options);
    }
}

Ohne entsprechende Prüfung führt unser Code zu einem Laufzeitfehler, wenn getInput keine Rückruffunktion als Argument hat oder wenn die übergebene Rückruffunktion tatsächlich keine Funktion ist.

Probleme bei der Verwendung von Methoden dieses Objekts als Callback-Funktionen

Wenn die Rückruffunktion eine Methode dieses Objekts ist, müssen wir die Methode zur Ausführung der Rückruffunktion ändern, um den Kontext dieses Objekts sicherzustellen. Andernfalls, wenn der Rückruf an eine globale Funktion übergeben wird, verweist dieses Objekt entweder auf das globale Fensterobjekt (in einem Browser). Beide zeigen auf ein Objekt, das eine Methode enthält.

Wir veranschaulichen dies im folgenden Code:

//Definiere ein Objekt mit einigen Eigenschaften und einer Methode //Wir werden die Methode dann als Rückruf an eine andere Funktion übergeben var clientData = {
    Nr.: 094545,
    fullName "Nicht festgelegt",
    //setUsrName ist eine Methode im clientData-Objekt setUserName: function (firstName, lastName) {
        //Dies bezieht sich auf die Eigenschaft fullName im Objekt this.fullName = firstName + " " + lastName;
    }
} 

Funktion getUserInput(Vorname, Nachname, Rückruf){
    //Hier etwas tun, um Vorname/Nachname zu bestätigen
    //Jetzt die Namen speichern
    Rückruf (Vorname, Nachname);
}

Wenn in Ihrem Codebeispiel unten clientData.setUsername ausgeführt wird, legt this.fullName die Eigenschaft fullName im clientData-Objekt nicht fest. Stattdessen wird die Eigenschaft „fullName“ im Fensterobjekt festgelegt, da „getUserInput“ eine globale Funktion ist. Dies liegt daran, dass dieses Objekt in der globalen Funktion auf das Fensterobjekt verweist.

getUserInput("Barack","Obama",clientData.setUserName);
console.log(clientData,fullName); //Nicht festgelegt
//Die Eigenschaft fullName wird im Fensterobjekt initialisiert console.log(window.fullName); //Barack Obama

Verwenden Sie die Funktionen „Anrufen“ und „Übernehmen“, um diese

Wir können die Funktion „Anrufen“ oder „Anwenden“ verwenden, um Ihr oben genanntes Problem zu beheben. Bisher wissen wir, dass jede Funktion in JavaScript zwei Methoden hat: Call und Apply. Diese Methoden werden verwendet, um dieses Objekt innerhalb der Funktion festzulegen und Variablen an die Funktion zu übergeben.

Das erste vom Aufruf empfangene Argument ist das als dieses innerhalb der Funktion verwendete Objekt, und die an die Funktion übergebenen Argumente werden einzeln übergeben (natürlich durch Kommas getrennt). Das erste Argument der Apply-Funktion ist gleichzeitig das Objekt, das innerhalb der Funktion als this verwendet wird, während das letzte Argument ein Array von Werten ist, die an die Funktion übergeben werden.

Es klingt kompliziert, also schauen wir uns an, wie einfach es mit „Apply and Call“ ist. Um das Problem im vorherigen Beispiel zu beheben, werde ich in Ihrem Beispiel unten die Funktion „Übernehmen“ verwenden:

//Beachten Sie, dass wir einen neuen Parameter als Rückrufobjekt hinzugefügt haben, genannt „callbackObj“
Funktion getUserInput(Vorname, Nachname, Rückruf.Rückrufobjekt){
    //Hier etwas tun, um den Namen zu bestätigen callback.apply(callbackObj, [Vorname, Nachname]);
}

Indem die Apply-Funktion dieses Objekt korrekt einstellt, führen wir nun den Rückruf korrekt aus und legen die Eigenschaft fullName im clientData-Objekt richtig fest:

// Wir verwenden die Methode clientData.setUserName und das Objekt clientData als Parameter. Das Objekt clientData wird von der Methode Apply verwendet, um dieses Objekt festzulegen getUserName("Barack", "Obama", clientData.setUserName, clientData);

//Die Eigenschaft fullName in clientData ist korrekt festgelegt console.log(clientUser.fullName); //Barack Obama

Wir können auch die Call-Funktion verwenden, in diesem Beispiel nutzen wir jedoch die Apply-Funktion.

Mehrere Rückruffunktionen zulassen

Wir können mehr als eine Rückruffunktion als Argument an eine Funktion übergeben, genauso wie wir mehr als eine Variable übergeben können. Hier ist ein Beispiel für AJAX in jQuery:

Funktion ErfolgCallback(){
    //Vor dem Senden etwas tun }
  
Funktion ErfolgCallback(){
//Tun Sie etwas, nachdem die Nachricht erfolgreich empfangen wurde}

Funktion CompleteCallback(){
//Nach Abschluss etwas tun}

Funktion errorCallback(){
    //Bei Auftreten eines Fehlers etwas unternehmen}

$.ajax({
    URL: „upload/2022/web/favicon.png“,
    Erfolg:ErfolgCallback,
    komplett:completeCallback,
    Fehler: errorCallback
});

Das „Callback Hell“-Problem und seine Lösung

Bei der Ausführung von asynchronem Code kommt es unabhängig von der Reihenfolge der einfachen Ausführung häufig zu einer Situation, in der viele Ebenen von Rückruffunktionen gestapelt werden, sodass im Code die folgende Situation auftritt. Dieses Code-Chaos wird als „Callback-Hölle“ bezeichnet, da es zu viele Callbacks gibt und der Code dadurch sehr schwer zu verstehen ist. Ich habe ein Beispiel von node-mongodb-native genommen, einem MongoDB-Treiber für Node.js. Der folgende Code veranschaulicht die Callback-Hölle vollständig:

var p_client = neue Db('integration_tests_20', neuer Server("127.0.0.1", 27017, {}), 
                 {'pk':CustomPKFactory});
p_client.open(Funktion(err, p_client) {
    p_client.dropDatabase(Funktion(Fehler, fertig) {
        p_client.createCollection('test_custom_key', Funktion(err, Sammlung) {
            Sammlung.Einfügen({'a':1}, Funktion(err, docs) {
                Sammlung.finden({'_id':neue ObjectID("aaaaaaaaaaaaa")}, 
                Funktion(Fehler, Cursor) {
                    cursor.toArray(Funktion(err, Elemente) {
                        test.assertEquals(1, items.length);
                        // Lass uns die Datenbank schließen
                        p_client.close();
                    });
                });
            });
        });
    });
});

Sie möchten nicht auf solche Probleme in Ihrem Code stoßen, aber wenn Sie auf dieses Problem stoßen,

• Sie werden von Zeit zu Zeit auf diese Situation stoßen
• Hier sind zwei Lösungen für dieses Problem.
• Geben Sie Ihren Funktionen Namen und übergeben Sie sie als Rückrufe, anstatt anonyme Funktionen als Argumente für die Hauptfunktion zu definieren.
• Durch Modularität wird Ihr Code in Module aufgeteilt, so dass Sie einen Codeabschnitt für eine bestimmte Aufgabe heraussuchen können. Anschließend können Sie das Modul in Ihre Mega-App importieren.

Erstellen eigener Callback-Funktionen

Nachdem Sie nun alles Wissenswerte über Callbacks in JavaScript vollständig verstanden haben (was ich glaube, wenn Sie es nicht gerade schnell noch einmal durchgelesen haben) und gesehen haben, wie einfach und leistungsstark die Verwendung von Callbacks ist, sollten Sie Ihren Code durchsehen, um zu sehen, ob es Stellen gibt, an denen Sie Callbacks verwenden könnten. Die Rückruffunktion hilft Ihnen auf folgende Weise:

• Vermeiden Sie die Duplizierung von Code (DRY – Don't Repeat Yourself)
• Bessere Abstraktion, bei der Sie über mehr Mehrzweckfunktionen verfügen (wobei die gesamte Funktionalität erhalten bleibt)
• Machen Sie den Code wartbarer
• Macht den Code leichter lesbar
• Schreiben spezialisierterer Funktionen

Das Erstellen Ihrer Rückruffunktion ist sehr einfach. Im folgenden Beispiel werde ich eine Funktion erstellen, die die Benutzerinformationen liest, mit den Daten ein allgemeines Gedicht erstellt und den Benutzer begrüßt. Dies wäre eine sehr komplexe Funktion gewesen, da sie viele if/else-Anweisungen enthalten würde und beim Aufrufen der für die Benutzerdaten erforderlichen Funktionen zahlreiche Einschränkungen und Inkompatibilitäten aufweisen würde.

Stattdessen habe ich die hinzugefügte Funktionalität mithilfe von Rückruffunktionen implementiert, sodass die Hauptfunktion, die die Benutzerinformationen abruft, tun kann, was sie will, indem sie einfach den vollständigen Namen und das Geschlecht des Benutzers als Parameter an die Rückruffunktion übergibt und diese ausführt.

Kurz gesagt, die Funktion getUserInput ist multifunktional: Sie kann eine Rückruffunktion mit verschiedenen Funktionen ausführen.

//Erstellen Sie zunächst eine generische Gedichtgeneratorfunktion. Sie wird als Rückruffunktion der folgenden getUserInput-Funktion verwendet function genericPoemMaker(name, gender) {
    console.log(name + " ist feiner als guter Wein.");
    console.log("Altruistisch und edel für die moderne Zeit.");
    console.log("Immer bewundernswert mit dem neuesten Stil geschmückt.");
    console.log("Ein " + Geschlecht + " unglücklicher Tragödien, der es dennoch schafft, immer zu lächeln");
}

//callback, der letzte Parameter ist die genericPoemMaker-Funktion, die wir oben definiert haben function getUserInput(firstName, lastName, gender, callback) {
    var vollständigerName = Vorname + " " + Nachname;
    // Stellen Sie sicher, dass der Rückruf eine Funktion ist
    wenn (Typ des Rückrufs === "Funktion") {
    // Führe die Callback-Funktion aus und übergebe ihr die Parameter
    Rückruf (vollständiger Name, Geschlecht);
    }
}

Rufen Sie die Funktion getUserInput auf und verwenden Sie die Funktion genericPoemMaker als Rückruffunktion:

getUserInput("Michael", "Fassbender", "Man", genericPoemMaker);
// Ausgabe /* Michael Fassbender ist besser als guter Wein.
Altruistisch und edel für die moderne Zeit.
Immer bewundernswert geschmückt mit dem neuesten Stil.
Ein Mann, der unglückliche Tragödien erlebt hat und dennoch immer ein Lächeln auf den Lippen hat.
*/

Da die Funktion getUserInput nur für das Extrahieren von Daten verantwortlich ist, können wir ihr jede beliebige Rückruffunktion übergeben. Beispielsweise könnten wir eine „greetUser“-Funktion übergeben:

unction greetUser(Kundenname, Geschlecht) {
    var salutation = sex && sex === "Mann" ? "Herr" : "Frau";
    console.log("Hallo, " + Anrede + " " + Kundenname);
}

//GreetUser als Rückruffunktion verwenden getUserInput("Bill", "Gates", "Man", greetUser);

// Dies ist die Ausgabe Hallo, Herr Bill Gates

Wir rufen genau dieselbe getUserInput-Funktion auf, dieses Mal führt sie jedoch eine völlig andere Aufgabe aus.

Wie Sie sehen, sind Rückruffunktionen magisch. Auch wenn das vorherige Beispiel relativ einfach war, stellen Sie sich vor, wie viel Arbeit Sie sparen könnten und wie viel abstrakter Ihr Code würde, wenn Sie einfach anfangen würden, Destroy-Funktionen zu verwenden. Verwenden Sie es mutig.

Callbacks werden in der JavaScript-Programmierung, insbesondere in der modernen Web-Anwendungsentwicklung sowie in Bibliotheken und Frameworks, häufig auf verschiedene Weise verwendet:

• Asynchrone Aufrufe (wie das Lesen einer Datei, das Senden einer HTTP-Anfrage usw.)
• Ereignis-Listener/-Handler
• Methoden „setTimeout“ und „setInterval“
• Allgemein: Optimieren Sie Ihren Code

Abschluss

JavaScript-Rückruffunktionen sind wunderbar und leistungsstark und bieten viele Vorteile für Ihre Webanwendungen und Ihren Code. Sie sollten es bei Bedarf verwenden oder Ihren Code aus Gründen der Abstraktion, Wartbarkeit und Lesbarkeit so umgestalten, dass Rückrufe verwendet werden.

Oben finden Sie Einzelheiten zum Verständnis und zur Verwendung von Rückruffunktionen in JavaScript. Weitere Informationen zu JavaScript finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!