Veröffentlicht am 20-03-2019

Javascript: normale, anonyme und IIFE-Funktionen.

Neun Tage Vollzeit Javascript. Als ich von Ruby kam, hatte ich völlig vergessen, wie man eine Funktion in Javascript definiert (ich hatte vorher einige Erfahrung, die alle vergessen wurden). Glücklicherweise sind einige Konzepte identisch mit Ruby, der Sprache, die ich vor 6 Wochen gelernt hatte. Ich schaue zurückhaltend auf diese Tage. Die Einfachheit Die Flexibilität Eine syntaktische Brise!

Sehen wir uns zunächst die Altersgruppe meines Publikums an.

ERKENNST DU DIESES FOTO ?!

Ich muss den Lesern das geben, was sie wollen (ein paar lustige Fotos, die sich locker auf das Thema beziehen). Kann sich nicht auf gutes Schreiben verlassen.

Ich kann Javascript nur mit Ruby vergleichen, ich kenne nur Ruby. Von Ruby zu Javascript zu kommen ist anfangs ein frustrierender Übergang (wenn auch viel einfacher als bei einer Programmiersprache mit nichts).

Lassen Sie mich beschreiben, warum Funktionen nützlich sind und was sie tun.

Analogie: Sie arbeiten in einem sehr geschäftigen Restaurant. Sehr beschäftigt. Alles, was sie servieren, ist Lasagne. Es ist Ihre Aufgabe, jede Scheibe Lasagne für 1 Minute in der Mikrowelle aufzuwärmen. Sie müssen 59 Scheiben pro Stunde machen. Wenn Sie 1, dann 0 und dann wieder 0 stanzen, fressen Sie zu viel Zeit. Und Ihr Chef Guido Salami wird irritiert, weil Sie in der letzten Stunde nur 58 Scheiben produziert haben. Dann bemerken Sie eine Taste an der Mikrowelle, es steht ONE MIN. Da Sie einen Job weit unterhalb Ihrer kognitiven Fähigkeiten ausführen, schließen Sie daraus, dass diese Schaltfläche für 1 Minute vorprogrammiert ist und beim Drücken gestartet wird. Jetzt müssen Sie nur noch eine kalte Scheibe einlegen, die Tür schließen und ONE MIN drücken. Sie produzieren 60 Scheiben Lasagne in der nächsten Stunde, beeindrucken Guido mit Ihrer Innovation, er bietet Ihnen eine Gehaltserhöhung und Beförderung an und lehnen es ab, Javascript-Entwickler zu werden.

Das macht eine Funktion. Es führt wiederholte Aufgaben an den Daten für Sie durch, so dass Sie das Verhalten nicht jedes Mal eingeben müssen, wenn Sie es benötigen

Was für eine lustige Analogie.

Grundlagen und normale / deklarierte Funktionen

Das erste, was mir beim Lernen von Javascript aufgefallen ist, sind einige allgemeine Regeln beim Schreiben einer Funktion. Zuerst müssen Sie Javascript wissen lassen, dass es sich um eine Funktion handelt. So machen Sie das

Funktion

Okay, ich gebe dir ein echtes Beispiel für eine Funktion.

Funktion realExample () {
}

Der Funktionsname ist camelCase. Geschweifte Klammern sind erforderlich, wenn Sie diese Art von Funktion aufrufen. Dies ist der Rumpf der Funktion, in dem Sie Daten bearbeiten. Wenn Ihre index.js-Seite geladen wird, werden diese Funktionen für die spätere Verwendung gespeichert (wird nicht sofort ausgeführt).

Berufung

Wie kann man eine Funktion nicht aufrufen?

realExample
=> ƒ realExample () {
}
Dies gibt lediglich Ihre Funktion zurück.

So rufen Sie die Funktion auf.

realExample ()
 führt die Funktion aus

Beim Aufrufen dieser Funktion sind Klammern erforderlich.

Okay, zurück zu unserem realExample mit einem Funktionsrumpf.

Funktion realExample () {
   21 + 21
}

Logischerweise würde man davon ausgehen, dass beim Aufruf von realExample () 42 der Rückgabewert wäre. Lass uns das testen.

Funktion realExample () {
    21 + 21
} => undefiniert
realExample ()
=> undefiniert

Oh, oh. Was ist passiert und wie können wir das beheben? Erste Sache. FUNKTIONSWERTE MÜSSEN EXPLIZIELL ZURÜCKGEBEN WERDEN !!!

Wie wird ein Wert in einer Funktion explizit zurückgegeben?

Einfach.

Funktion realExample () {
    Rückkehr 21 + 21
}
=> 42
Da gehst du hin. Die Antwort auf das Leben, das Universum und alles.

Fügen wir dieser Funktion etwas mehr Komplexität hinzu, indem Sie Argumente hinzufügen. Wir tun dies, indem wir sie in Klammern setzen. Beispiel.

Funktion realExample (num1, num2) {
    return num1 + num2
}

Hier wird eine Funktion… erm… Funktionalität wirklich nützlich und dynamisch. Beispiel.

realExample (21,21)
=> 42
Die Bedeutung von allem.

Wenn Sie nun zwei Dinge zusammen hinzufügen möchten, können Sie die Funktion verwenden.

realExample ("vierzig", "- zwei")
=> "zweiundvierzig"
Universum.

Cool. Nächster.

Anonyme Funktionen

Eine anonyme Funktion ist eine Funktion, die… ummm… anonym ist. Es hat keinen Namen. Es kann jedoch in einer Variablen gespeichert werden und im Wesentlichen auf die gleiche Weise ausgeführt werden.

Beispiel:

Lass Universum = Funktion (num1, num2) {
return num1 + num2
}
Beachten Sie das Fehlen des Funktionsnamens. Wir haben ihn in einer Variablen gespeichert. Das macht es anonym.

Anonyme Funktionen aufrufen

Ziemlich das Gleiche wie das Aufrufen einer regulären Funktion, aber Sie rufen den Variablennamen auf, da es keinen Funktionsnamen gibt. Dann können Sie es in einer anderen Variablen speichern, wenn Sie möchten. Beispiel.

Lass Universum = Funktion (num1, num2) {
    return num1 + num2
}
Universum (21,21)
=> 42
lass alles = Universum (21,21)
alles
=> 42
lass nichts = Universum (0,0)
nichts
=> 0

IIFE (sofort aufgerufener Funktionsausdruck)

Dies ist ein saftiger. Es wird verwendet, um Speicherplatz zu sparen und Ihren Code sauberer aussehen zu lassen. Beim Codieren geht es um Effizienz und Klarheit. Wenn Sie eine Reihe von Funktionen haben, die sofort beim Laden der Seite aufgerufen werden sollen, können Sie mit IIFE Speicherplatz sparen und den Code lesbarer machen.

Schauen wir uns den normalen Weg noch einmal an.

Funktion realExample () {
 Rückkehr 21 + 21
}
Universum()
=> 42

Das IIFE-Äquivalent.

(Funktion(){
   Rückkehr 21 + 21
}) ()
=> 42

Wert wird sofort zurückgegeben. Hier ist ein Überblick über das, was passiert.

Sie schreiben eine unbenannte Funktion in Klammern und fügen anschließend eine Reihe von Klammern hinzu, um sie aufzurufen.

Beginnen Sie mit leeren Klammern
1. ();
Schreibe unbenannte Funktionen in diese Klammern
2. (Funktion () {
   Rückkehr 21 + 21
});
rufen Sie die Funktion auf, indem Sie am Ende einen Satz Klammern hinzufügen.
3. (Funktion () {
   Rückkehr 21 + 21
}) (); => 42

Jetzt können Sie Argumente übergeben, um Komplexität und Dynamik hinzuzufügen.

(Funktion (num1, num2) {
    return num1 + num2
}) (21,21); => 42

Wie ich schon sagte, möchten Sie vielleicht, dass eine Funktion beim Laden der Seite ausgelöst wird, verwenden Sie den IIFE. Probieren Sie es aus. Kopieren Sie die folgende Zeile in Ihre Konsole und fügen Sie sie ein (klicken Sie irgendwo auf die Seite, klicken Sie auf die Registerkarte "Konsole", fügen Sie den Code ein und drücken Sie die Eingabetaste).

(Funktion () {
        alert ('Sie haben einen IIFE geschrieben !!!')
    }) ();

Hoffentlich bekommst du diese Warnung. Sie können auch sehen, dass ich diesen Artikel schreibe, während ich an diese Analogie dachte, welche Improvisation!

Es gibt ein paar syntaktische Möglichkeiten, ein IIFE zu schreiben. Ich möchte es zuerst vereinfachen und später verzweigen.

Achten Sie auf diese Syntaxfehler.

Ich schwöre in Klammern.

Genießen!

Quellen:

W3Schulen

MDN-Funktionen

Siehe auch

Top-Facility-Management-Trends in Afrika.5 Möglichkeiten zur Verringerung des Compliance-Risikos in Finanzdienstleistungen (auf die Sie sich verlassen können)DOWNLOAD in [PDF] Life after Google: Der Fall von Big Data und der Aufstieg der Blockchain-Ökonomie…Montage vorbereitenHP Reinvent 2019: Das ist ein Wrap!Leitsätze zu Datenschutz, Sicherheit und Vertrauen