Master JavaScript Abschnitt 4: Funktionsprinzipien

1. Einführung: Wir haben einen neuen Abschnitt und spannende Themen. In diesem Abschnitt werden wir uns mit einigen Themen befassen , die für JavaScript wirklich von zentraler Bedeutung sind. All diese Themen konzentrieren sich auf Funktionen und die Art von Funktionen. Diese Konzepte haben zu vielen Mustern geführt, die ein hohes Maß an Entwicklungskompetenz definiert haben . Und es ist wichtig, dass Sie das, was in diesem Abschnitt steht, verstehen und in Ihrer eigenen Codierung anwenden können . Wir werden zunächst über die Natur der Funktionen in JavaScript sprechen . Die JavaScript-Funktion ist sehr leistungsfähig, weil sie ein erstklassiger Bürger ist. Und Funktionen können auf übergeordnete Weise verwendet werden. Wir werden uns die Schließung ansehen, eine Funktion, die meiner Meinung nach eine der nützlichsten und leistungsstärksten Funktionen der JavaScript-Sprache ist. Wir werden uns mit dem sofortigen Aufrufen von Funktionen und dem entsprechenden Muster befassen . Wir haben also viel zu besprechen. Also lass uns anfangen. 2. Funktionen sind Bürger der ersten Klasse: Zu Beginn dieses Kurses habe ich darüber gesprochen, dass Objekte in JavaScript überall vorkommen, mit Ausnahme von Primitiven, alles andere ist ein Objekt. Wie wir damals besprochen haben, sind Funktionen Objekte. Die Tatsache, dass Funktionen Objekte sind , ist ein so wichtiges Merkmal. Es führt dazu, dass Funktionen erstklassige Bürger in JavaScript sind. Die Vorstellung, dass Funktionen erstklassig sind, bedeutet nun einfach , dass Funktionen als Werte behandelt werden, die weitergegeben werden können. Und da Funktionen Objekte sind, ist es das, was dies ermöglicht. Wenn wir also an einen Wert denken, denken wir normalerweise an etwas wie eine Zeichenfolge oder eine Zahl. An jedem Ort kann ein Wert wie eine Zeichenfolge oder eine Zahl verwendet werden. Eine Funktion kann auch verwendet werden , weil sie als Werte behandelt werden, was sie erstklassig macht. Um diese Idee zu untermauern, schauen wir uns mehrere Beispiele in denen traditionelle Werte verwendet werden können , und zeigen, dass eine Funktion an derselben Stelle verwendet werden kann. Jetzt sind die ersten beiden Beispiele ziemlich offensichtlich. Wir können einer Variablen einen Wert wie eine Zahl zuweisen. Nun, wir können einer Variablen auch eine Funktion zuweisen. Und wir haben es schon oft gemacht, jederzeit einen Funktionsausdruck zu erstellen, wie er hier gezeigt wird. Wir weisen diese Funktion einer Variablen zu. Das ist ziemlich üblich. Das ist uns an dieser Stelle nicht fremd. Bevor ich nun dieses zweite Beispiel zeige, das ebenfalls ziemlich offensichtlich ist, möchte ich hier etwas über Funktionen zeigen und wie sie der Variablen zugewiesen werden. Wir haben Spaß zehn. Was wäre, wenn ich so etwas tun würde? Was ist, wenn ich eine weitere Variable erstelle? Und es macht zehn Uhr Spaß und das entspricht Fonds zehn. Also, was passiert hier? Da Funktionen jedoch Objekte sind, weist sie genau hier eine Referenz auf dieselbe Funktion zu . Fonds a eine weitere Referenz zuzuweisen. Es bedeutet nicht, die Funktion aufzurufen und eine Zehn in Fontan zu platzieren. Denken Sie daran, dass das ein deutlicher Unterschied ist. Wir müssen Klammern verwenden, um eine Funktion aufzurufen. Schauen wir uns das mal ganz schnell an . Wenn wir uns Fun Ten A in der Konsole ansehen würden, lass mich das einfach öffnen. Wir sehen, dass es eine Funktion ist. Das wird uns hier als Funktion angezeigt. Wenn wir jedoch Fontan a aufrufen würden , indem wir Abdrücke danach setzen, erhalten wir die Zehn zurück, was diese Funktion tun sollte. Also wichtiger Punkt bei der Verwendung der Variablen, der eine Funktion zugewiesen ist. Wenn wir keine Klammern danach setzen, wird diese Funktion nicht aufgerufen. Okay, das zweite Beispiel, das wir uns ansehen wollen, ich scrolle es einfach hier nach oben ist eine Funktion, die einer Eigenschaft eines Objekts zugewiesen werden kann. haben wir jetzt schon oft gesehen. Deshalb ist dieser auch offensichtlich. Grundsätzlich const OBJ und setze das gleich einem Objekt wie diesem. Und wenn wir dann einen lustigen Doppelpunkt machen und dann würden wir hier die Funktion platzieren , die dem zugewiesen ist. Und dieser wird einfach Spaß machen. Denken Sie nun daran, dies aufzurufen, wir verwenden die Punktsyntax. Wir machen einfach OBJ Punkt und dann, welcher Eigenschaft es zugewiesen ist , in diesem Fall, Spaß. Wir verwenden erneut die Doppeldrucke, um es aufzurufen. Okay? Nun, wie wir bereits gesehen haben, kann dies mit einer solchen Shortcut-Methode geschehen. Das würde dasselbe erreichen und dort eine Funktion einrichten. Und wir haben Spaß daran, auf der Konsole zu protokollieren. Ich werde das nur ein bisschen schließen, damit wir die Konsole einrichten können. In Ordnung, das ist also der zweite. Diese waren zu offensichtlich. Also der dritte, vielleicht nicht ganz so offensichtlich. Und diese Funktion kann in einem Array gespeichert werden. Also lassen Sie uns hier ein Array einrichten. Und wir werden dort eine Nummer eintragen. Ein Wert kann in ein Array aufgenommen werden, das wissen wir bereits, aber können wir dort auch eine Funktion einfügen? Nun ja, das können wir. Und dieses Mal mache ich eine Pfeilfunktion. Im Grunde wird es einfach zehn zurückgeben, wie wir es in der Vergangenheit getan haben. Jetzt haben wir also eine Funktion an der zweiten Position dieses Arrays. Und darauf können wir uns erneut berufen, indem wir die Trends nutzen. Also müssen wir die Position im Array so angeben . Und danach setzen wir einfach Freunde ein, wir rufen es auf. Das sollte also zehn zurückgeben. Wenn wir das also auf der Konsole protokollieren, sollten wir zehn auf der Konsole bekommen. Und los geht's. Ich habe das hier oben kommentiert , also ist das Einzige, was wir da oben sehen. So kann ein Wert in einem Array gespeichert werden und eine Funktion kann in einem Array gespeichert werden. Jetzt kann eine Funktion genauso Teil eines Ausdrucks sein wie ein Wert. Schauen wir uns das mal an. Ich werde dort ein einfaches Konsolenprotokoll erstellen. Ich werde einen Ausdruck eingeben, damit wir die Ergebnisse dieses Ausdrucks sehen können. Hier ist der Ausdruck. Ich mache einfach 30 plus was? Nun, wir werden eine Funktion machen. Also werde ich hier eine Funktion deklarieren. Und ich lasse es zehn zurückgeben. Jetzt. Im Moment wird dies nicht 30 plus zehn addieren, da diese Funktion nicht aufgerufen wird. Wir haben es gerade hier deklariert. Wenn wir das also speichern würden, lassen Sie mich darauf hinweisen, dass, wenn wir es speichern würden, es nur den Text dieser Funktion mit der Zahl 30 verkettet . Wenn wir es jedoch aufrufen würden und es sofort aufgerufen wird. Und dieses Thema werden wir später in diesem Abschnitt ausführlicher besprechen . Aber wenn ich gleich danach Doppeldrucke mache, schauen wir uns jetzt an, was passiert. Jetzt. Es ruft die Funktion auf, gibt eine Bräune zurück und addiert dann 30 zu zehn. Also setzen wir eine Funktion als Teil eines Ausdrucks ein, genau wie wir jeden anderen Wert könnten. Um nun dasselbe zu tun, nur damit Sie wissen, dass Sie dasselbe mit einer Pfeilfunktion tun müssen, müssten Sie so etwas tun, 30 plus. Und dann ist hier unsere Pfeilfunktion. Und wenn wir dort den fetten Pfeil definieren, zehn zurückzugeben, ist das großartig, außer dass wir Marken nicht sofort danach setzen können. Wir müssen das Ganze so in Klammern setzen. Dann können wir Klammern danach setzen. Jetzt sollten wir bei 40 zu den Konsolen-Protokollanweisungen kommen. Und los geht's. So würdest du es also mit einer Pfeilfunktion machen. Jetzt, im nächsten Beispiel, können wir Werte an eine Funktion übergeben. Eine Zahl kann an eine Funktion oder Zeichenfolge übergeben werden, kann in der Funktion übergeben werden. Nun, können also Funktionen in Funktionen übergeben werden? Denken Sie also an Rückrufe. Wir haben viel mit Rückrufen gemacht. Und das ist ein Beispiel dafür , wo wir eine Funktion an eine andere Funktion übergeben. Das häufigste Beispiel wir in diesem Kurs wahrscheinlich gemacht haben, ist die Verwendung von setTimeout. setTimeout hat also zwei Parameter. Eine ist eine Funktion, die wir übergeben, und die andere ist die Zeit in Millisekunden. Das wären also 10 s da. Dieser erste Parameter ist nur eine Funktion, die wir übergeben. Und dafür kann ich dort eine Pfeilfunktion machen. Und wir werden einfach Dot Log auf die Konsole stellen. Die Zeit ist abgelaufen, so etwas. Also hier übergeben wir eine Funktion an eine andere Funktion. Wenn wir das also sagen, bekommen wir die 240, wenn wir eine Sekunde später die Zeit ist abgelaufen in der Konsole angezeigt bekommen. Das letzte Beispiel, das wir uns ansehen möchten, ist, dass eine Funktion von einer Funktion zurückgegeben werden kann. Also hier unten. So wie wir eine Funktion an eine Funktion übergeben können, können wir auch eine zurückgeben. Also lass mich etwas einrichten, hab Spaß. Stellen Sie das gleich ein. Wir deklarieren hier eine Funktion. Und was werden wir zurückgeben? Was wir als Funktion zurückgeben werden. Ich werde das hier nach der Rückgabeerklärung deklarieren , und wir haben nur ein Konsolenprotokoll. Mal sehen, ich wurde zurückgebracht. Wie macht man das? Das ist also unsere Rücksendeerklärung. Und was geben wir zurück? Nun, wir könnten eine Zahl zurückgeben, wir können eine Zeichenfolge zurückgeben, wir können eine Funktion zurückgeben, weil sie als Wert behandelt wird. Also jetzt mit diesem Setup, wenn wir zu const new fund gehen, speichern wir hier die Funktion, die zurückgegeben wurde , und setzen sie gleich ein, um Spaß zu haben, und verwenden den Prinzen, um sie aufzurufen. Mach weiter und speichere das. Hier sind unsere Konsolenprotokolle, die wir da oben haben. Aber jetzt wollen wir sehen, was der neue Fonds enthält. Wenn ich jetzt hier neuen Spaß ohne die Marken eingebe, werde ich den Text dieser Funktion sehen. Aber wenn ich neuen Spaß mit Marken mache und ihn aufrufen lasse, dann bekommen wir den Rückgabewert. Wir haben die Konsolenprotokollanweisung, nicht den Rückgabewert. Da geben wir also eine Funktion zurück. Jetzt können wir hier etwas tun. Ich habe die Rückgabefunktion einer Variablen zugewiesen, aber ich könnte auch einfach aufrufen und so Spaß haben. Und das wird eine Funktion zurückgeben. Nun, was wäre, wenn wir die zurückgegebene Funktion aufrufen wollten ? Wir können einfach direkt danach eine weitere Reihe von Plänen eingeben. Diese ersten Drucke wirken also auf die Get Fun-Funktion. Die nächsten Marken reagieren auf diese zurückgegebene Funktion und veranlassen, dass diese Funktion aufgerufen wird. Wenn wir das jetzt speichern, sollten wir sehen, dass ich wieder auf der Konsole war. Und da ist unser Auge zurückgekehrt. Es gibt unsere SetTimeout-Konsolenprotokollanweisung. Es gibt also insgesamt sechs Beispiele dafür, wie wir eine Funktion verwenden können, genau wie wir jeden anderen Wert verwenden würden, wie eine Zahl oder eine Zeichenfolge, weil eine Funktion in JavaScript behandelt wird als ein Wert und deshalb ist er erstklassig. Deshalb nennen wir Funktionen in JavaScript erstklassig. Okay, jetzt die letzten beiden Beispiele, die wir uns angesehen haben, werden wir im nächsten Thema näher darauf eingehen , wenn wir über Funktionen höherer Ordnung sprechen. 3. Höhere Auftragsfunktionen: Im vorherigen Thema haben wir gezeigt, wie Funktionen in JavaScript als erstklassig behandelt werden , weil sie wie andere Werte behandelt werden. In diesem Thema werden wir diese Idee näher erläutern, während wir über Funktionen höherer Ordnung sprechen. Funktionen höherer Ordnung sind einfach Funktionen, die auf andere Funktionen einwirken, indem sie sie entweder als Argument verwenden oder eine Funktion zurückgeben. Beispiele dafür haben wir im vorherigen Thema gesehen. Tatsächlich zeigten die letzten beiden Beispiele Funktionen höherer Ordnung. Die Tatsache, dass JavaScript erstklassige Funktionen unterstützt ermöglicht es, Funktionen höherer Ordnung zu erstellen. Das Konzept erstklassiger Funktionen erklärt also, wie Funktionen in JavaScript als Werte behandelt werden. Das Konzept der Funktionen höherer Ordnung erklärt, wie wir sie verwenden. Hier sind die letzten beiden Beispiele wir im vorherigen Thema verwendet haben. Wir haben ein festgelegtes Timeout und wir übergeben hier eine Funktion. Und wir haben noch einen weiteren Parameter , nämlich die Zeit. Die Tatsache, dass wir eine Funktion als Parameter verwenden und diese übergeben können , führt dazu, dass diese Funktion auf die setTimeout-Funktion wirkt und auf andere Funktionen wirkt. Dies ist der, der weitergegeben wurde und der weiterwirkt. Aus diesem Grund handelt es sich um eine Funktion höherer Ordnung. Hier unten. Diese Funktion macht Spaß. Diese gibt eine Funktion zurück und weil sie auf andere Funktionen einwirkt, handelt es sich um eine Funktion höherer Ordnung. Also grundsätzlich nehmen Funktionen höherer Ordnung entweder als Parameter an oder geben sie zurück. Wir verstehen also, was Funktionen höherer Ordnung sind, aber warum sind sie so wichtig? Die gebräuchlichste Anwendung von Funktionen höherer Ordnung in JavaScript ist jetzt der Callback. In JavaScript gibt es mehrere Methoden , mit denen wir eine Funktion übergeben können, die als Teil dieser Methode oder Funktion verwendet wird . Also wird es zurückgerufen. Jedes Mal, wenn wir einen Event-Listener erstellen, richten wir einen Callback ein. Und so sind sie in JavaScript ziemlich verbreitet. Jetzt möchte ich die Funktion setTimeout als Beispiel verwenden und analysieren, warum sie als Funktion höherer Ordnung besser ist Was macht sie besser? Also gehe ich jetzt zu einer anderen Codedatei, in der ich bereits zwei setTimeout-Funktionen erstellt habe . Jetzt möchte ich mich zunächst auf den letzten Parameter konzentrieren, nämlich die Anzahl der Millisekunden, die setTimeout ausführt. Also geben wir dort Daten weiter. Durch die Übergabe von Daten an diese setTimeout-Funktion wird sie flexibler. Anstatt eine setTimeout-Funktion aufzurufen , die immer 3 s lang läuft, können wir die Anzahl der Millisekunden übergeben , die sie ausführen soll. Und es wird für diese Nummer laufen. Durch die Möglichkeit, Daten weiterzugeben, wird die Funktion flexibler. Es hilft uns auch dabei, zu verhindern, dass wir Code wiederholen. Wenn wir eine setTimeout-Funktion hätten , die 3 Sekunden lang lief, und eine, die 4 s lang lief. Sie machen im Grunde sehr ähnliche Dinge, nur eine andere Zeit. Indem wir also Daten weitergeben können, wie wir es hier getan haben, halten wir an diesem trockenen Prinzip fest. Wiederhole dich nicht. Code nicht wiederholen. Das tun wir, indem wir einen Parameter übergeben. Nun, dasselbe gilt für die Übergabe einer Funktion, für die Erstellung einer Funktion höherer Ordnung. Die Daten, die wir weitergeben, kontrollieren ihre Flexibilität. Anhand welcher Daten kann es handeln. Die von uns übergebene Funktion steuert ihre Flexibilität, indem sie ihren funktionalen Aspekt beeinflusst . Nehmen wir also diese beiden Beispiele. Ich habe ein setTimeout, das nach einer Sekunde einfach in die Konsolenprotokollierung einloggt. Das ist ein Beispiel. Ich habe hier unten ein setTimeout, das nach 2 s protokolliert oder zwei plus zwei zurückgibt. Das ist ein weiteres Beispiel. Nun ist es möglich, dass um diese beiden funktionalen Anforderungen zu erfüllen, wir, um diese beiden funktionalen Anforderungen zu erfüllen, eine setTimeout-Log-Funktion hätten erstellen können, die jedes Mal sie aufgerufen wurde, etwas an die Konsole protokolliert, wir haben gerade die Daten weitergegeben, die wir protokollieren wollten. Und wir können eine setTimeout-Add-Funktion erstellen , die bei jedem Aufruf nach Ablauf der Zeit einige Zahlen hinzufügt. Das wären zwei separate Funktionen. Und wir würden den Code wiederholen. Da setTimeout jedoch höherer Ordnung ist, können wir eine Funktion übergeben , die alles kann. Es ist also flexibler. Manche mögen argumentieren , dass es komplexer ist. Und ich denke, es ist, als man zum ersten Mal davon erfährt, als man zum ersten Mal etwas über Funktionen höherer Ordnung und deren Verwendung gelernt hat. Aber wenn man sie einmal kennt, ist es wirklich nicht viel schwieriger. es wirklich nicht. Und die Flexibilität wird sehr mächtig. ganze Konzept von Dry, don't repeat yourself, ist also don't repeat yourself, ist einer der Gründe, warum wir Funktionen höherer Ordnung haben wollen . Nun, wie ich bereits erwähnt habe, ist JavaScript voller Funktionen höherer Ordnung. Methoden für viele der verschiedenen Typen sind Funktionen höherer Ordnung. Arrays haben z. B. mehrere Methoden höherer Ordnung. Sie akzeptieren eine Funktion als Parameter und tun dann etwas mit der übergebenen Funktion. Aber ich möchte Sie nur darauf hinweisen und Sie darauf aufmerksam machen , dass Funktionen höherer Ordnung überall in JavaScript zu finden sind . Ich denke, einige Leute, die noch nicht mit JavaScript vertraut sind oder gerade erst mit JavaScript anfangen, meiden sie, weil sie komplex erscheinen, aber man kann ihnen nicht aus dem Weg gehen. Sie sind so mächtig. In Ordnung, lass uns zum nächsten Thema übergehen. 4. Deine eigene Funktion zur höheren Bestellung erstellen: In JavaScript gibt es viele Methoden, die Funktionen höherer Ordnung nutzen . Sie lösen Probleme mithilfe Mustern, die diese Funktionen höherer Ordnung nutzen von Mustern, die diese Funktionen höherer Ordnung nutzen. Und wir können daraus lernen und es in unserer eigenen Farbe verwenden. als Beispiel Schauen wir uns als Beispiel diese Sortiermethode an , die für Arrays verfügbar ist. Hier habe ich zwei Arrays, eines mit Namen und eines mit Zahlen, und wir werden sie sortieren. Also lass uns die Namen und auch Zahlen wie diese machen. Dann schauen Sie sich die Ergebnisse an. Also, wenn wir das speichern, lass mich nochmal zur Konsole gehen. Und jetzt schauen wir uns diese beiden Arrays an, Namen und Zahlen. Wir können sehen, dass die Dinge an den Namen richtig sortiert sind. Sie sind in alphabetischer Reihenfolge sortiert. Aber was die Sortiermethode mit Zahlen macht, ist, dass sie sie in eine Zeichenfolge konvertiert und dann alphabetisch basierend auf der Zeichenfolge sortiert. Und so bekommen wir hier ein paar wirklich komische Sachen mit Zahlen. Daher ist das Sortieren an sich nicht ideal für Zahlen. Die Sortiermethode wurde jedoch so eingerichtet , dass sie eine Funktion höherer Ordnung, eine Vergleichsfunktion, als Parameter verwendet. Wir können eine Funktion an die Sortiermethode übergeben. Es wird diese Funktion verwenden, um Elemente zu vergleichen. Es wird jedes Element zwei nach dem anderen durch das Array führen und es anhand der Funktion, die wir übergeben, vergleichen . Und dann bestimmt das die Sortierreihenfolge. Nun, das funktioniert so, wenn das erste Argument übergeben wird. Wenn wir also unsere Funktion erstellen, übergibt sie die ersten beiden Elemente. Wenn das erste Argument vor dem zweiten Argument erscheinen sollte , müssen wir sicherstellen, dass unsere Funktion eine Zahl kleiner als Null zurückgibt. Wenn das zweite Argument vor dem ersten Argument stehen soll als eine Zahl größer als Null, sollte es zurückgegeben werden. Denken Sie jetzt über den Vorteil nach. Wir werden das in nur einer Minute machen. Denken Sie jedoch an den Vorteil, dass diese Sortiermethode nicht mehr nur auf das Sortieren von Zeichenketten beschränkt ist . Wir können es jetzt andere Dinge sortieren , weil es eine Funktion als einen seiner Parameter akzeptiert. Und es verwendet diese Funktion und ruft sie für, in diesem Fall, die Elemente zwei gleichzeitig auf, während sie sie übergibt. Also lass uns das mit Noms versuchen. Also übergebe ich eine Funktion. Und wie gesagt, diese Funktion muss zwei Parameter akzeptieren. Es akzeptiert die ersten beiden Elemente und so weiter, während es über dieses Array funktioniert. Da wir nun eine Zahl kleiner als Null zurückgeben müssen das erste Argument vor dem zweiten Argument stehen sollte, können wir so etwas tun, können wir so etwas tun ein Minus b zurückgeben. Und das führt eine Sortierreihenfolge durch. Vom Kleinsten bis zum Größten. Woche könnte das umkehren und in die andere Richtung gehen. Denn schauen Sie, wenn 100 übergeben wird und 95 für a und B übergeben wird, entspricht 100 -95 fünf. Das ist also eine Zahl, die größer als Null ist. Und das bedeutet, dass das zweite Argument vor dem ersten Argument steht, also 95 vor 100 gesetzt wird. Jetzt wird es all diese Zahlen miteinander vergleichen und sie in einer sortierten Reihenfolge sortieren, weiß, wie das geht. Alles was wir tun müssen, ist die Funktion so zu übergeben , wie wir es hier gemacht haben. Wenn wir das also speichern und uns die Zahlen noch einmal ansehen, sehen wir, dass es kleiner bis größer ist. Zahlreiche Methoden in JavaScript nutzen dies aus. Die Fähigkeit, eine Funktion zu akzeptieren und sie bei Bedarf aufzurufen. Und wir können dasselbe in unserem Code tun. Wir können es auch nutzen . Nehmen wir an, ich möchte eine Funktion erstellen , die Zeichenketten verarbeitet. Lass mich einfach weitermachen und es hier kopieren und dann werden wir, wir werden darüber reden. Hier ist meine Funktion, die Zeichenketten verarbeitet. Wir lassen zu, dass eine Zeichenfolge übergeben wird, und dann konvertieren wir, die diesen Großbuchstaben automatisch konvertiert . Das machen wir in dieser Prozess-String-Funktion. Ich versuche es einfach zu halten, damit wir diese Rückrufinformationen im Mittelpunkt behalten können . Also wird es in Großbuchstaben umgewandelt . Wenn wir jedoch einen Rückruf senden, wird es mehr tun. Es macht alles, was wir mit einer Funktion angeben. Also plötzlich ist diese Funktion viel leistungsfähiger. Es kann viel mehr. Beachten Sie nun, wie wir mit dem Rückruf umgehen. Wir erstellen eine neue Zeichenfolge mit zwei Großbuchstaben. Aber dann prüfen wir, ob die Art des Callbacks der Funktion entspricht. Wenn also etwas übergeben wurde und es eine Funktion ist, dann rufen wir es auf. Und geben Sie diese neue Zeichenfolge ein , die wir bereits durchgeführt haben, die Konvertierung in Großbuchstaben. Dieser Callback macht alles, was er braucht, und gibt es zurück. Und dann geben wir diesen Wert zurück. Wenn es keinen Callback gibt, wir einfach die neue Zeichenfolge zurück, die wir erstellt haben. Dies kann Ihnen also eine Idee geben, ein Muster für die Gestaltung von Funktionen, die viel flexibler und leistungsfähiger sind . Lass uns weitermachen und das einfach versuchen. Lass es uns einfach benutzen, damit wir sehen können, wie es funktioniert. Gut, ich werde ein Konsolenprotokoll erstellen. Also möchte ich die Ergebnisse dessen, was von einer verarbeiteten Zeichenfolge oder einer verarbeiteten Zeichenfolge zurückgegeben wird, an die Konsole protokollieren verarbeiteten Zeichenfolge oder einer verarbeiteten Zeichenfolge . Also nenne ich Process Stream , diese Funktion genau dort. Und ich übergebe eine Zeichenfolge. Also lass uns weitermachen und hier eine Zeichenfolge einrichten. Const STR-Zone. Ich setze das einfach gleich auf. Das ist eine Zeichenfolge, so etwas Einfaches. Also wollen wir das in STR one an diese Prozessstream-Funktion übergeben . Jetzt wollen wir einen Rückruf weiterleiten . Und ich werde diesen Rückruf genau hier einrichten. Also gebe ich eine Funktion ein, es wird eine anonyme Funktion sein. Es gibt eine lockige Klammer, jetzt kann ich definieren, was sie macht. Aber eine Sache, die wir tun müssen , ist sicherzustellen, dass wir hier eine Variable für den Parameter angeben, den ich einfach als Wert nenne. Denn sieh dir an, was hier oben passiert. Es übergibt diesen neuen Stream an diese Callback-Funktionen. Also müssen wir sicherstellen, dass wir es akzeptieren, akzeptieren und dann etwas damit anfangen. Nun, sagen wir, alles, was wir noch tun wollen, ist einfach ein Array aus dieser Zeichenfolge zu erstellen, das auf dem Leerzeichen aufgeteilt wird. Also verwenden wir die Split-Methode und teilen auf dem Raum auf. Also werden wir das zurückgeben, sobald wir das getan haben. Dann ist hier die Split-Methode. Und dann geben wir dort einfach Platz ein, auf den wir uns aufteilen wollen. Was wir also bekommen sollten, was sollte auf der Konsole protokolliert werden, ist diese Zeichenfolge alles in Großbuchstaben? Innerhalb eines Arrays wird jedes Wort in seinem, sein eigenes Element im Array sein. Deshalb haben wir die Funktion unseres Prozessstroms leistungsfähiger und flexibler gemacht , indem wir ihn höherer Ordnung eingerichtet haben. Also lass uns weitermachen und das speichern und es uns ansehen. Und da haben wir ein Array. Alles in Großbuchstaben, jedes Wort, sein eigenes Element im Array. Was ich also möchte , dass Sie daraus Nutzen ziehen ist die Leistungsfähigkeit von Funktionen höherer Ordnung. Funktionen höherer Ordnung werden überall in JavaScript verwendet. Wir können diese Funktion auch in unserem eigenen Code nutzen . Und mit diesem einfachen Beispiel haben wir das getan. Ordnung, lass uns mit dem nächsten Abschnitt fortfahren. 5. Übung Start: Schaffung einer höheren Auftragsfunktion: Während des gesamten Kurses haben wir bereits viele Beispiele für Funktionen höherer Ordnung gesehen , als wir über das Callback-Muster gesprochen haben. Wie gesagt, das sind alles Funktionen höherer Ordnung. In den letzten Themen haben wir uns gerade ein paar andere Beispiele angesehen . Ich denke, es ist jetzt an der Zeit, eine Übung zu geben , bei der ich Sie eine Funktion höherer Ordnung erstellen lasse. Ich denke, wenn Sie einmal selbst eine erstellt haben, hilft es, die Kraft dieser ganzen Idee zu festigen, was meiner Meinung nach wichtig ist, um sie zu festigen. Sie ist etwas, das Sie sich bei JavaScript merken sollten. Diese Linse für JavaScript, eine der Funktionen, die es so leistungsstark machen. Ich möchte, dass du Folgendes tust. Ich habe eine Variable für deinen Gruß deklariert, und dann rufe ich eine Funktion auf. Und beachte, dass ich drei Parameter übergebe. Eine ist eine Begrüßung, weil diese Funktion „ Begrüßung erstellen “ ist, um eine Zustimmung für uns zu erzeugen, eine andere als Name. Und dann ist die dritte eine Funktion. Ich möchte also, dass Sie die Funktion „Begrüßung erstellen und drei Parameter verwenden. Wenn nur zwei Parameter angegeben werden, wird einfach eine Begrüßung zurückgegeben. Wenn jedoch ein dritter Parameter angegeben wird, nämlich die Funktion, bevor diese Begrüßung zurückgegeben wird , indem der Begriff und der Name zusammengesetzt werden, sollte diese Funktion auf diese Begrüßung einwirken. Es sollte also zuerst diese beiden Teile zusammenfügen und dann überprüfen ob die Funktion existiert, und darauf einwirken. Daher wird die Funktion „Begrüßung erstellen “ eine Funktion höherer Ordnung sein. Das wird uns etwas mehr Flexibilität geben. Wir können nicht nur Daten weitergeben und sie eine kompilierte Begrüßung zurückgeben lassen, wir können auch eine Funktion übergeben, wir verschiedene Dinge mit dieser Begrüßung tun können. Dies ist ein einfaches Beispiel, aber es zeigt das Muster einer Funktion höherer Ordnung oder das Muster, bei dem ein Callback verwendet wird, um die von Ihnen erstellte Funktion flexibler zu gestalten, um ihr zusätzliche Funktionalität, damit Sie sich nicht wiederholen. In Ordnung, mach weiter und probiere es aus. Und wenn du bereit bist, gehe zum nächsten Thema und wir werden es gemeinsam durchgehen. 6. Übung Ende: Schaffung einer höheren Auftragsfunktion: Okay. Wie hast du es damit gemacht? Ich mache weiter und mache es hier. Das gibt Ihnen die Möglichkeit, das, was ich getan habe, mit dem zu vergleichen , was Sie getan haben. Vielleicht lerne ich auch ein paar zusätzliche Dinge. Also oben werde ich weitermachen und Funktion, Erstellen, Begrüßen einrichten . Einfach so. Jetzt wollen wir drei Parameter. Ich nenne sie Turn Greeks und dann fn für die Funktion , die übergeben werden könnte. In Ordnung. Jetzt deklariere ich eine Variable, und das wird die erste Begrüßung sein, indem ich einfach diese beiden zusammenfüge, den Begriff und den Namen. Und es sieht so aus, als ob ich es nicht wusste. Ich weiß nicht , warum ich dort Gruss statt Namen eingegeben habe. Da haben wir's. Also wird es Begriff und Name zusammenfügen. Und das wird in diese Variable eingefügt. Ich werde eine Vorlagenzeichenfolge verwenden. Also verwende ich ein Back-Tick und dann das Dollarzeichen und die geschweiften Klammern für eine Variable. Die erste Variable Ich möchte seinen Begriff einbeziehen und dann möchte ich ein Leerzeichen dazwischen haben. Dann füge ich die nächste Variable hinzu, die einen solchen Namen hat. Also haben wir unseren Gruß erstellt und der könnte zurückgegeben werden. Wenn es keine Funktion gibt, würden wir weitermachen und sie zurückgeben. Ich werde das also tun indem ich überprüfe, ob der übergebene Wert einer Funktion entspricht. Wenn dies der Fall ist, führen wir die Funktion darauf aus und geben Ergebnisse zurück. Andernfalls habe ich nach der if-Anweisung nur eine Rücksendeerklärung . Wenn die if-Anweisung nicht ausgeführt wird, wird die Return-Anweisung ausgeführt und diese Begrüßung zurückgegeben. Schauen wir uns an, wie wir das machen. Ich gehe nur, wenn dann tippe von. So finden wir heraus, ob etwas ein Funktionstyp von Fn Triple Equals ist und dann innerhalb von Anführungszeichen eine Funktion. Also, wenn das eine Funktion ist, ist dieser Teil des Codes ziemlich einfach. Wir wollen einfach den Aufruf dieser Funktion zurückgeben. Aber wenn wir es aufrufen, wollen wir eine Begrüßung weitergeben. Schauen wir uns jetzt an, wie das funktioniert. Also wird eine Funktion übergeben und sie wird in dieser Variablen platziert. Da wir Funktionen als Werte behandeln können, können wir sie seit den ersten Klassen in einer Variablen speichern. Jetzt, wo diese Funktion diese Variable enthält, können wir sie dann mit Klammern aufrufen und wir übergeben hier einen Parameter. Wir können auch überprüfen, ob es sich um eine Funktion handelt, indem den Typ von verwenden und das sollte dort ein Semikolon sein. Also lass mich das reparieren. Sagt, dass Teil wirklich nicht so schwierig ist. Manchmal ist es schwieriger, was Sie weitergeben, die Funktionalität, die Sie weitergeben wie Sie etwas erreichen möchten. Ordnung, lass uns weitermachen und das beenden. Wenn das also nicht ausgeführt wird, wenn dieser Teil hier nicht ausgeführt wird, möchten wir trotzdem eine Begrüßung zurückgeben. Und so werde ich in der nächsten Zeile einfach Return, Gruss eintragen. Und so kann ich das mit einer Funktion oder ohne Funktion verwenden . Das macht es für mich umso flexibler. In Ordnung, also lass uns weitermachen und das speichern. Und lass uns hier raus springen und Sue öffnet hier die Konsole. Und ich habe eine Begrüßungsvariable deklariert. Mal sehen, was jetzt drin ist. Beachten Sie, dass wir einen guten Morgen haben, Anika. Das war also der Begriff im Namen dessen, der weitergegeben wurde. Und dann wurden diese Ausrufezeichen basierend auf der Funktion hinzugefügt. Ich gebe sie weiter, lassen Sie mich einfach zu diesem Anruf zurückkehren. Also Begriff, Name und da ist eine Funktion die die Begrüßung annimmt und dann geht es los Hier ist noch einmal die Vorlagenzeichenfolge. Es wird also dauern, was fertig ist , weil diese Begrüßung genau hier übergeben wird, wird an sie weitergegeben, so umfangreich, sie sie in dieser Variablen erhält. Und dann verwenden wir diese Variable in einer Vorlagenzeichenfolge mit Ausrufezeichen dahinter. In Ordnung, das funktioniert also für uns. Lassen Sie mich nun nur ein Beispiel für Create Grading machen ein Beispiel für Create , ohne eine Funktion zu übergeben. Ich gehe. Jetzt verwende ich hier einfach meinen Namen. Und es funktioniert immer noch, weil wir diese Art von Überprüfung durchgeführt haben. Das machen wir, wenn die Anweisung immer noch funktioniert, wenn wir keine Funktion übergeben. nun, nur um die Flexibilität dieser einfachen Funktion höherer Ordnung zu zeigen Lassen Sie mich nun, nur um die Flexibilität dieser einfachen Funktion höherer Ordnung zu zeigen, noch eine machen. Ich werde hier eine andere Funktion ausführen. Ich kann hier richtig tippen. Und jetzt benötigen wir für diese spezielle Funktion erneut eine Variable, um eine Begrüßung zu akzeptieren , die an sie übergeben wurde. mache noch einmal eine Pfeilfunktion und ich werde sie einfach in Großbuchstaben umwandeln. Also so etwas Einfaches. Also hier ist ein weiteres Beispiel. Wenn ich nun die Eingabetaste drücke, erhalte ich dort die Syntax. Kannst du y sehen? Beachten Sie, dass ich das Komma genau dort verpasst habe. Also gehe ich wieder hoch und komme einfach wieder her. Die Nachricht ist also falsch formatiert, Pfeilfunktion. Der Grund dafür ist falsch formatiert , weil wir keine Kommatrennung hatten. Sobald es soweit war, betrachtete es dies auch als Teil davon. Und denken Sie daran , dass sich Metall bildet. Wenn ich nun die Eingabetaste drücke und wir alles in Großbuchstaben bekommen, zeigt das nur ein Beispiel dafür , was wir mit dieser jetzt sehr flexiblen Funktion machen können . Ordnung, hoffentlich war das eine gute Übung für In Ordnung, hoffentlich war das eine gute Übung für Sie, um die ganze Idee von Funktionen höherer Ordnung anzuwenden. In Ordnung, lass uns weitermachen. 7. Verschlüsse: Wir sind zu einem meiner Meinung nach wichtigsten Konzepten in JavaScript gekommen . Verschluss. Sie müssen Closure verstehen und verwenden , um ein seriöser JavaScript-Entwickler zu sein. Jetzt ist die Schließung etwas, das neue JavaScript-Entwickler nicht verstehen. Ich kann mich erinnern, als ich zum ersten Mal auf die Idee kam oder die Idee des Abschlusses verstanden habe. Es war ein Aha-Moment für mich. Und dann konnte ich es in viel Code sehen und es verwenden, um bestimmte Probleme zu lösen. Also möchte ich mir zuerst eine Definition ansehen. Das kommt von Kyle Simpson. Er gibt an, dass eine Funktion in der Lage ist , sich einen Zugriff an seinen lexikalischen Geltungsbereich zu erinnern, auch wenn diese Funktion außerhalb ihres lexikalischen Gültigkeitsbereichs ausgeführt wird . Variablen und Funktionen aus ihrem lexikalischen Geltungsbereich sind für eine Funktion weiterhin zugänglich, auch wenn dieser lexikalische Bereich nicht die aktuell ausgeführte Umgebung ist. Jetzt werden diese Variablen und Funktionen im Speicher gespeichert, weil die JavaScript-Engine erkennt , dass es immer noch etwas gibt , das sie referenzieren kann. Also, wann passiert so etwas? Wann wird eine Funktion außerhalb ihres lexikalischen Gültigkeitsbereichs ausgeführt? Nun, es ist wirklich ziemlich häufig, aber um das zu wissen und es besser zu erklären, müssen wir uns einige Beispiele ansehen. Das erste Beispiel, das ich mir ansehen möchte, nenne ich diese Funktion verzögerte Begrüßung. Und wir werden uns ansehen, wie das funktioniert. Und dann werde ich erklären, was vor sich geht und welche Schließung stattfindet. Wir haben hier also eine Funktion, die wir einen Parameternamen übergeben können. Das wird eine Begrüßung für uns sein. Wir werden zwei Variablen innerhalb dieser Funktion deklarieren . Eine ist die Begrüßung. Guten Morgen, danach machen wir einen Platz. Und dann verwende ich One Leaped, um beide zu deklarieren. Die andere ist eine gepumpte Variable für die Interpunktion. Und wir setzen das einfach auf ein Ausrufezeichen. Das ist alles. Da sind also unsere beiden Variablen. Jetzt fügen wir nur noch ein setTimeout hinzu. Wir haben dies in der Vergangenheit häufig verwendet, daher ist dies eine großartige Möglichkeit, den Abschluss zu veranschaulichen. In Settimeout wird eine Funktion übergeben. Wie wir wissen, wird diese Funktion erst nach Ablauf der Zeit aufgerufen. Und wenn die Zeit abgelaufen ist, wenn Sie sich erinnern, wird die Funktion in die Warteschlange gestellt. Und sobald kein anderes JavaScript ausgeführt wird, wird es dem Stack hinzugefügt und ausgeführt. Nun, hier ist, was wir protokollieren werden. Wir protokollieren einfach die griechische Variable plus den Namen, der in m plus übergeben wurde. Okay, jetzt lass uns weitermachen und das auf 5 s setzen. So. Ordnung, lassen Sie mich jetzt in Bezug auf den Abschluss darüber sprechen bevor wir es uns tatsächlich ansehen. Und lassen Sie mich weitermachen und gradverzögerte Anzeige hier unten durchführen, damit es aufgerufen wird. Aber was die Schließung angeht, so laden wir diese JavaScript-Datei und die Funktion. Und wenn wir mit der Ausführung des Codes beginnen, stoßen wir darauf, wir fügen ihm eine Funktion hinzu. Und dann begegnen wir dem, was aufruft. Diese Funktion wird dann auf den Stapel gelegt und beginnt, den darin enthaltenen Code abzuarbeiten erstellt einen Ausführungskontext, Kontext für diesen Code. Auf diese Variable und diese Variable und diese Variable kann also und diese Variable und diese Variable den Code innerhalb der Funktion zugegriffen werden. Nun, es wird ein festgelegtes Timeout festgestellt und setTimeout wird, wie wir wissen, vom Browser verarbeitet. Und so beginnt der Browser, die 5 s herunterzuzählen. Nun , diese Funktion ist abgeschlossen. Bevor dieser Countdown beendet ist. Es ist fertig und wird vom Stapel entfernt. Was passiert also mit diesen Variablen? Sind sie mit dieser Funktion noch erreichbar? Da diese Funktion noch nicht einmal darin besteht , es zur Warteschlange hinzuzufügen, zählen wir immer noch die 5 s. Dann wird es der Warteschlange hinzugefügt. Und wenn dann noch Platz ist, wird es dem Stapel hinzugefügt. Und dann beginnt es, den darin enthaltenen Code auszuführen. Also hier ist der Code drin. Und jetzt muss es Greet, Name und Punk holen , aber diese Funktion ist bereits aus dem Stack entfernt. Was passiert also? Nun, hier kommt der Abschluss ins Spiel , weil die JavaScript-Engine weiß, dass diese Funktion immer noch einen Verweis auf diese Variablen hat , die Teil ihres lexikalischen Geltungsbereichs sind. Lexikalisch, wo es geschrieben ist. Und das ist der Umfang hier. Es hat also immer noch Zugriff darauf. Diese werden im Speicher aufbewahrt. Obwohl die Ausführung dieser Funktion abgeschlossen ist und aus dem Stack entfernt wurde, werden diese Variablen nicht bereinigt , sondern im Speicher erreicht. Diese Funktion kann dann auf sie zugreifen, weil sie Teil ihres lexikalischen Geltungsbereichs waren. Javascript-Engine weiß genug , um sie bei sich zu behalten, um sie verwenden zu können. Das ist also Schließung. Um diese Variablen herum wird eine Schließung erstellt , sodass diese Funktion später immer noch auf sie zugreifen kann. Eine sehr mächtige Funktion, wenn Sie darüber nachdenken Wir können etwas ausführen und beenden lassen und haben trotzdem Zugriff auf die Variablen. Sehr mächtig. Okay, also ich möchte das speichern. Dann werde ich das etwas reduzieren. Lass uns weitermachen und die Konsole öffnen. Da ist meine erste Rückkehr. Ich möchte da keinen Namen eintragen. Warum habe ich einem Anruf keinen Namen gegeben , okay, Steve, so. Ordnung, jetzt speichern wir es. Die Funktion ist weg. Es ist Countdown, Countdown, Countdown. 5 s ist abgelaufen. Wir haben guten Morgen, Steve, und wir haben aufgrund der Schließung Zugriff auf all diese Variablen. Also wie wir bleiben oder wie gesagt, die Funktion wird aus dem Stack entfernt. Trotzdem werden die Variablen immer noch im Speicher aufbewahrt, da die Engine oder etwas anderes auf sie verweisen könnte. Es könnten also Variablen sein, die eine Funktion sein könnten , die diese Funktion aufruft. Diese werden alle im Speicher gespeichert, sodass ihr Zugriff, solange er Teil des lexikalischen Geltungsbereichs ist, Zugriff auf sie hat und sie nicht von der JavaScript-Engine bereinigt werden . In Ordnung, lassen Sie uns ein anderes Beispiel machen. Ich gehe hier zur HTML-Datei und füge zwei Schaltflächen hinzu. Und ich möchte, dass der erste Button eine Button-ID von eins hat. Also benutze ich dafür die Abkürzung. M, es ist ein Plug-In für Visual Studio Code. Wenn ich die Tabulatortaste drücke, wird die Schaltfläche für mich mit der richtigen Tasten-ID erstellt. Und ich werde dem Button einen Namen geben. Klicken Sie so auf mich. Okay, jetzt setzen wir hier noch einen Knopf. Und ich möchte, dass dieser auch eine ID hat, aber dieser wird BTM tun, klicken Sie auch auf mich, so. Das sind also die beiden Schaltflächen , die wir hinzugefügt haben. Spar dir das auf. Mal sehen, ob die auftauchen. Ja, sie sind genau hier. Und dann bekommen wir diese Nachricht, dieser Code funktioniert immer noch. Wenn wir also hierher kommen, werde ich das für nur eine Minute kommentieren , während wir etwas anderes tun. Also, was ich tun möchte, ist eine Initialisierungsfunktion zu erstellen. Dies ist eine Funktion, die wir ausführen werden, wenn diese Seite geladen wird, und sie wird einige Dinge initialisieren, hauptsächlich die Event-Listener. Also nenne ich es eine Nische. Sie lügt. Und dann füge ich hier einige Variablen ein. Vielleicht kannst du dir ein Bild davon machen, was ich hier mit Closure mache. Ich werde zwei Variablen einrichten. Und auf beide Variablen kann auch dann zugegriffen werden , wenn diese Initialisierungsfunktion vollständig abgeschlossen ist. Die Initialisierungsfunktion wird also zuerst ausgeführt. Es wird die Event-Listener einrichten , die ich gerade mache. Mal sehen. Übrigens, einer ist einer von denen , die ich machen möchte. Event-Listener hinzufügen. Und wir werden das Click-Event verwenden, um sie einzurichten und dann ist es abgeschlossen. Aber selbst wenn es fertig ist, werden wir immer noch Zugriff auf diese Variablen haben und wir werden sehen, wie wir damit umgehen können. Also eines der Dinge, die wir tun werden, ist C und T. Wir werden einfach die erste Variable dort inkrementieren und uns dann bei der Konsole C und T anmelden Das werden wir in dieser ersten so machen. Und lassen Sie mich weitermachen und Semikolon dort und Semikolon dort. Und ich kopiere einfach diesen und mache im Grunde etwas Ähnliches für den nächsten hier unten. Aber dieses Mal machen wir bt und zwei, und dieses Mal erhöhen wir die Anzahl, aber wir werden mit dem Zuwachsbetrag fertig. Also machen wir ein Plus gleiche Schritte wie diese. Und dann protokollieren wir die Anzahl erneut in der Konsole. In Ordnung, wir haben das Setup. Jetzt, wenn die Seite geladen wird, rufe ich initialize auf. Das wird also laufen und es wird vom Stack entfernt. Diese Variablen werden jedoch im Speicher gespeichert, da sie von diesen Funktionen hier referenziert werden, diesen anonymen Funktionen, die Teil des Event-Listeners sind. Also wer weiß, wie lange es dauern wird wenn diese Funktion abgeschlossen ist, bevor diese Knöpfe oder gar angeklickt werden. Es spielt wirklich keine Rolle, wie lang es Jahre sein könnten. Solange diese Seite aktiv bleibt, speichert sie sie im Speicher und hat Zugriff auf sie. In Ordnung, also lass uns das speichern. Und jetzt lassen Sie uns sehen, dass die initialisierte Funktion bereits abgeschlossen ist. Lass uns weitermachen und Click Me machen und wir werden bei der Konsole angemeldet. Lass uns das hier drüben anklicken. Wird es sich an diese Zahl erinnern , die hier erhöht wurde? Das tut es. Es fügt zwei weitere hinzu. Und ich klicke darauf, wenn es eins hinzufügt. Also zwei verschiedene Funktionen, aber sie adressieren denselben lexikalischen Geltungsbereich. Sie sprechen also dieselbe Variable an. Und aufgrund der Schließung werden diese Variablen beibehalten. Sie werden mit diesen beiden Funktionen aufgerufen. Du kannst dir ein Bild machen. Nun, die Leistung, die Closure in JavaScript bieten kann, ist wirklich ein wichtiges Feature von JavaScript. Wir haben die ersten Beispiele für das Schließen mit setTimeout und auch mit addEventListener bereitgestellt . Nun, was ich als nächstes im nächsten Thema tun möchte , ist, dass wir eine Funktion höherer Ordnung verwenden, um eine Funktion höherer Ordnung auch die Anwendung von Closure anzuzeigen. Gehen wir also zum nächsten Thema über. 8. Verwendung von Schließung mit zurückgegebenen Funktionen: Als wir über Funktionen höherer Ordnung sprachen, war eine Sache, die eine Funktion höherer Ordnung machte Tatsache, dass sie wieder funktionierte. Durch die Kombination dieser Funktion mit einem Verschluss haben wir ein ziemlich leistungsfähiges Konstrukt. Denn plötzlich können wir eine Funktion aus einer Funktion zurückgeben . Und diese zurückgegebene Funktion hat Zugriff auf den Gültigkeitsbereich der ursprünglichen Funktion, auf jedes Variablen-Setup. Und er funktioniert deklariert. Wir werden Zugriff auf all diese haben. Und einer der Vorteile davon ist, dass wir keine dieser Variablen, Funktionen, in den globalen Geltungsbereich stellen dieser Variablen, Funktionen mussten, um sie zugänglich zu machen. In gewissem Sinne sind sie privat. Sie können nur durch Dinge in ihrem Geltungsbereich abgerufen werden. Und die Rückgabefunktion kann weiterhin auf sie einwirken und sie nutzen. Schauen wir uns ein Beispiel an. In Ordnung, jetzt beachte die Anzahl der Dinge, die wir hier deklariert haben. Wir haben eine Variable, wir haben drei Funktionen, und dann haben wir diese Funktion, die durch das Zusammenstellen der drei Funktionen davor erstellt wird . Wir haben also ziemlich viel , das hier deklariert wurde und sich auf dem globalen Raum befindet. Während wir diese Idee verwenden, über die wir gerade gesprochen haben , lassen Sie uns alles in eine Funktion einfügen und dann eine Funktion zurückgeben lassen , die dies tut. Das Gleiche. In Ordnung? Also nennen wir das einfach, nennen wir es der Einfachheit halber Get-Funktion. Und ich nehme das und schneide das aus. Und dann lassen Sie uns weitermachen und all das einziehen. Hier unten. Füge die abschließende lockige Klammer hinzu. Da ist also unsere Funktion. Wir haben dieses Setup, aber jetzt müssen wir eine Funktion zurückgeben. können wir also tun, indem diesen Teil hier einfach durch return ersetzen. Und es wird diese Funktion hier zurückgeben. Nun, um das zuzuweisen, um es mit fünf zu multiplizieren und so weiter. Wir können diese Variable deklarieren. Und wir können es dieser Funktion gleichsetzen , die wir gerade erstellt haben. Wenn diese Funktion abgeschlossen ist, die Funktion get abgeschlossen, wird die Funktion get abgeschlossen, sie gibt eine Funktion zurück, die platziert und mit fünf multipliziert und angezeigt wird . Okay, jetzt diese Funktion hier, obwohl diese Funktion oben komplett abgeschlossen ist, wurde sie aus dem Stapel entfernt. Es wird Zugriff auf dies und das und das haben und die Nummer eins, auf die Variablen Zugriff haben können, auf all das, was ihm zur Verfügung stehen wird. Und dann, wenn wir die Signatur ändern. Also, wenn wir nur eine Zahl weitergeben, sagen wir mal zwei. Und dann hier unten verwenden wir Nummer eins davon, das zuvor deklariert wurde. Nun, das wird sich immer mit fünf multiplizieren und noch etwas anderes, was auch immer weitergegeben wird. Dadurch wird es mit fünf multipliziert und angezeigt, was hier zurückgegeben wird. Jetzt geben wir nur eine Nummer wie diese weiter. Lass uns jetzt weitermachen und das speichern. Und wir werden es uns ansehen. Öffne die Konsole hier. Und wir sollten die Möglichkeit haben, es mit fünf zu multiplizieren und anzuzeigen. Und lassen Sie uns sechs weitergeben. Und das gibt uns 30 Formate zurück , nach denen die Interpunktion sowieso steht, es macht all die anderen Dinge, die Teil dieser Funktion waren. Diese Funktion hier, die Funktion get, also hat sie Zugriff auf all diese. Etwas anderes, was wir tun könnten, um das noch besser zu machen, ist, dass wir hier oben Nummer eins gebrauchen könnten. Wir können die Deklaration hier loswerden und sie einfach als Parameter haben. Wenn wir nun die Multipliziere es mit fünf und die Anzeigefunktion erstellen , geben wir fünf weiter. Wir können aber auch multipliziert mit, lass uns zehn machen und anzeigen. Plötzlich ist das viel flexibler. Wir geben da einfach zehn rein. Jetzt haben wir also zwei Funktionen , die daraus erstellt wurden. Und jeder von ihnen hat Zugriff auf alles, was Teil des lexikalischen Geltungsbereichs dieser zurückgegebenen Funktion ist. So wird, wird auf diese Weise sehr mächtig. Schauen wir uns die einfach an. Lass uns mit fünf multiplizieren. Lass uns dieses Mal sieben machen. Das funktioniert also immer noch für uns. Und jetzt haben wir auch eine Multiplikation mit zehn. Lass uns auch hier sieben machen. Wir haben jetzt also zwei Funktionen , die Zugriff auf alles haben, was darin enthalten ist. Der Gültigkeitsbereich der Funktion get, obwohl diese Funktion nicht mehr läuft. Die JavaScript-Engine ist intelligent genug, um zu wissen , dass es etwas geben könnte , das immer noch auf sie verweist , sodass sie das schließt. Diese werden im Speicher gespeichert. Und aufgrund der Schließung können wir auf sie zugreifen. Lassen Sie mich Ihnen nun etwas anderes zeigen, das wir tun können da wir es hier mit Funktionen höherer Ordnung zu tun haben, Gehäuse. Lass mich weitermachen und zur Konsole gehen. Ich rufe get function auf. Und dieses Mal werde ich 20 Jahre alt. Was wird das nun zurückgeben? Nun, es wird eine Funktion zurückgeben, wie wir hier sehen können. Da das eine Funktion zurückgibt, könnte ich so etwas tun. Da die Funktion zurückgegeben wird, könnte ich sie sofort aufrufen. Der nächste Satz von Klammern ruft die Funktion auf, die zurückgegeben wird. Und ich gebe fünf, also das sollte 100 sein. Jetzt haben wir eine Funktion. Wenn wir nur die Gap-Funktion auf diese Weise verwenden , haben wir eine Funktion, mit der wir zwei beliebige Zahlen multiplizieren und anzeigen können . Was ich Ihnen hier zeigen möchte, ist nur die Flexibilität aufgrund der Funktion höherer Ordnung, aufgrund des erstellten Verschlusses . Und deshalb habe ich gesagt, dass es ein leistungsstarkes Konstrukt in JavaScript ist, mit dem wir vertraut sein müssen und das wir verwenden können müssen. In Ordnung, lass uns zum nächsten Thema übergehen. 9. Wichtige Merkmale von Schließungen: Nun, ich weiß, dass ich oft darauf hingewiesen habe, aber Schließungen sind wichtig. Ich möchte dieses Thema verwenden, um auf zwei Merkmale von Verschlüssen hinzuweisen , die sie wichtig machen. Nun, das sind nicht die einzigen Merkmale von Verschlüssen. Aber zwei, von denen ich sichergehen möchte, dass Sie sie verstehen. Das erste Merkmal ist, dass Schließungen uns helfen können speicher - oder CPU-intensive Aufgaben effizient zu nutzen. Lassen Sie mich nun ein Beispiel dafür geben. Also hier ist unser Code, den wir zuvor verwendet haben. Nehmen wir an, dass wir als Teil dieses Codes einen Prozess haben, wir als Teil dieses Codes einen Prozess haben Daten aus einer Datenbank oder von einer API auf einer Site abruft . Und was wir davon zurückbekommen, wenn wir dieses riesige Spektrum haben. Jetzt werde ich dieses riesige Array nur mit einem kleinen Array darstellen . Aber stell es dir als eine riesige Rate vor. Dies sind die Daten, die mithilfe eines asynchronen Befehls von der Site-API zurückgegeben werden. Wir werden später auf asynchrone Dinge eingehen. Aber wir müssen asynchron damit umgehen , weil es lange dauert, bis es zurückkommt. Aber wenn es endlich zurückkommt, bekommen wir diese Reihe von Zahlen. In Ordnung? Und dann ändern wir das in einen Index. Und im Grunde nehmen wir aus der riesigen Auswahl die Zahl, die wir wählen werden. Okay? Lassen Sie mich nun noch einmal betonen, dass es beim Abrufen dieser Daten eine Weile dauert, bis sie die Datenbank oder auf die Site gelangen und sie abrufen und zurückbringen. Also müssen wir asynchron damit umgehen. Denken Sie nun darüber nach, ob wir jedes Mal, wenn wir Zahlen miteinander multiplizieren wollten, diese intensive Aufgabe erledigen müssten. Wir mussten rausgehen und die Daten holen. Jedes Mal, wenn wir das gemacht haben, dauerte es Sekunden oder was auch immer es war, auch wenn es nur eine kleine Anzahl von Sekunden, sogar Millisekunden sind, diese können sich jedes Mal summieren , wenn wir das tun. Es kann also intensiv sein. Nun, wenn unsere Funktion, Funktion ausgeht und sie einmal abruft, und dann haben wir sie in dieser Variablen gespeichert. Und dann können wir durch Schließen weiterhin über das Display Multiplizieren mit fünf darauf zugreifen und dann mit zehn multiplizieren , sodass wir nicht jedes Mal, wenn wir mit fünf multiplizieren möchten , ausgehen müssen und hol dir diese Daten. Jedes Mal, wenn wir diese Funktion aufrufen. Es bezieht sich nur auf das, was wir bereits im Speicher gespeichert haben. Es hat den Prozess, um es zu bekommen, bereits abgeschlossen. In Ordnung, so kann es uns helfen, CPU-intensive oder zeitintensive oder speicherintensive Aufgaben effizient zu nutzen CPU-intensive oder zeitintensive oder speicherintensive . Durch die Verwendung von Closure können wir das kontinuierlich für uns verfügbar machen. Okay, jetzt das zweite Feature, ein Feature, über das ich sprechen möchte, nennen wir Kapselung. Jetzt. Um zu verstehen, was eine Verkapselung ist, lassen Sie mich diese Idee näher erläutern. Wir haben da, wo wir diese riesige Auswahl haben. Nehmen wir an, das ist etwas, dieses Array ist etwas, das wir nicht ändern wollen. Willy Nilly, in jedem Teil des Programms. Es gibt nur einen Ort, an dem wir es ändern wollen, und an keiner anderen Stelle im Programm sollte das passieren dürfen? Nun, wir können eine Funktion einrichten, etwa diese, bei der wir eine neue Zahl übergeben und dann diese neue Zahl zum Array hinzugefügt wird und nur so kann sie aktualisiert werden. Okay? Also machen wir hier einfach einen Push mit neuer Nummer. Wir wollen also nicht , dass die Leute auf sein Array zugreifen und ihm Zahlen hinzufügen können. Tatsächlich möchten wir vielleicht jedes Mal, wenn jemand eine Zahl hinzufügt, sie irgendwie überprüfen, um sicherzustellen, dass sie einige Kriterien erfüllt. Wir können hier also eine IF-Erklärung haben. Wenn Zahl größer als 100 ist, ist das vielleicht alles, was wir akzeptieren oder so ähnlich. Dann machen wir weiter und machen weiter. Also kontrollieren wir das Hinzufügen neuer Zahlen zu diesem Array mit dieser Funktion. Die einzige Möglichkeit, das Array zu manipulieren, ist also mit dieser Funktion. Sie müssen das durchmachen. Jetzt kehren wir zu Funktionen zurück, die offensichtlich nicht erlaubt sind. Eine Möglichkeit, das zu tun, wenn wir zwei Funktionen haben, wir von so etwas zurückgeben wollen, ist, dass wir ein Objekt zurückgeben können. Wenn wir also auch diese Funktion ändern, aktualisieren Sie das Array so. Und wir ändern diesen, um eine solche Funktion zu erstellen. Wir könnten dann ein Objekt zurückgeben. Und wir müssten das Array aktualisieren und Spaß machen. Sie wären beide Teil dieses Objekts. Wenn wir diese Funktion aufrufen, ist die Rückgabe also ein Objekt. Also hol dir die Funktion. Was wir zurückbekommen, ist ein Objekt. Und dann können wir dieses Objekt benutzen. Wir können OBJ verwenden, um das Array zu aktualisieren, um diese Funktion aufzurufen , oder OBJ dot create fund, um diese Funktion aufzurufen. Also wie auch immer, so würden wir das machen, anstatt zwei Rückgabefunktionen auszuführen. Aber der Punkt, den ich erreichen möchte, ist, dass wir jetzt eine Funktion erstellt haben dass wir jetzt eine Funktion erstellt der wir dieses Array nur so ändern können. Also haben wir dieses Array in eine Funktion eingeschlossen. Wir haben es eingekapselt. Das ist also eine Kapselung, sie schützt sie nur, eine Möglichkeit, sie zu ändern, und wir können überprüfen, ob sich das geändert hat. Und tatsächlich sind diese anderen Funktionen auch gekapselt. Sie sind außerhalb dieser Funktion nicht verfügbar. Die einzige Möglichkeit, sie zu verwenden, ist hier. Dies hat Zugriff auf sie, aber nichts anderes hat Zugriff auf sie. Diese sind also gekapselt. Der Test, die Idee der Verkapselung. Beide Merkmale sind wichtige Merkmale , wenn es um den Abschluss geht. In Ordnung, lass uns zum nächsten Thema übergehen. 10. Übungsbeginn: Schließung 1: In Ordnung, es ist Zeit für eine nähere Übung. Jetzt werde ich Ihnen das Problem in diesem ersten Video vorstellen , und dann werden wir im nächsten Thema die Lösung durchgehen. Nun, dieses spezielle Problem können Sie im Internet sehen. Es ist ein Problem, das oft dargestellt wird , um den Abschluss zu veranschaulichen. Vielleicht auch ein Teil des JavaScript-Interviews. Es ist also sehr praktisch in dem Sinne, dass es die Art von Problem ist , das die Leute stellen, um zu sehen, ob Sie den Abschluss verstehen. Schauen wir uns also an, was das ist. Okay, ich habe hier ein Array und die Lernrate, und das sind nur Namen, Vornamen in diesem Array. Insgesamt fünf Lernende. Das ist alles was es gibt. Dann haben wir einen For-Loop und wir durchlaufen dieses Array. Wir haben die Variable deklariert. Wir gehen die Schleife durch, solange sie kürzer als die Länge dieses Arrays ist. Und dann haben wir hier inkrementiert. Und dann haben wir innerhalb dieser Schleife ein festgelegtes Timeout. Und das ist die Funktion , die nach Ablauf der Zeit in die Warteschlange gestellt wird . setTimeout wird also vom Browser, der Web-API, verarbeitet. Und wenn diese 2 s ablaufen, wird diese Funktion hier in die Warteschlange und die Eventschleife gestellt die Warteschlange und die Eventschleife Sobald sie Platz dafür hat, fügt sie sie dem Stack hinzu und diese Funktion wird ausgeführt. Okay, wir kennen den ganzen Prozess. Lassen Sie uns nun einfach weitermachen und sehen welche Ergebnisse daraus resultieren. Wir schauen uns das an. Was wird das Konsolenprotokoll anzeigen? Wenn ich also hier die Konsole öffne, erhalte ich im Grunde fünf undefinierte Anweisungen. Das ist alles, was ich im Logbuch habe. Wenn es sich also an der Konsole anmeldet, kann es nichts im Array finden und es wird einfach undefiniert ausgedruckt. Das hat also zwei Teile. Diese Übung besteht aus zwei Teilen. Zuerst möchte ich, dass du darüber nachdenkst und erklären kannst , warum es fünf undefinierte gibt Warum passiert das? Und erläutern Sie es anhand von Dingen, die wir über Scope gelernt haben. Der zweite Teil besteht darin, dieses Problem dann mithilfe des Verschlusses zu lösen , damit das nicht passiert. Damit wir tatsächlich an der Konsole angemeldet werden, die Namen, die hier im Array stehen. Also zwei Teile dieser Übung. Nun, ich werde gleich sagen, dass es eine einfache Möglichkeit gibt, dieses Problem zu lösen, aber ich möchte, dass Sie die Schließung verwenden, um es zu lösen. Wir werden am Ende der Lösung über den einfachen Weg sprechen , weil ich denke, dass es wichtig ist, auch das zu verstehen. Sowohl der Abschluss als auch dieses andere Konzept sind beide wichtig zu verstehen. Also nimm dir etwas Zeit. Wenn Sie bereit sind, fahren dem nächsten Thema fort und wir werden diese Lösung durchgehen. 11. Übung Ende: Schließung 1: Wie hast du dich dabei geschlagen? Ich hoffe, Sie können das lösen. Lassen Sie uns zuerst darüber sprechen warum wir die fünf undefiniert bekommen. Lass uns das zuerst machen. Beachten Sie also, dass nicht alles hier innerhalb einer Funktion erstellt wird, also wird es global sein . Das ist also auf globaler Ebene. Diese Autodeklaration, das Auge, das ist global. In Ordnung, das wird also in den globalen Geltungsbereich aufgenommen. Dann haben wir unser erstes setTimeout gestartet. Das wird vom Browser erledigt. Zwei Sekunden beginnen zu zählen. Die For-Schleife läuft weiter. Also im Grunde gehen fünf dieser fünf SetTime-Outs sehr schnell nach dem anderen aus und sie sind alle bereit für 2 s. Alles klar? wir nun zu der letzten Iteration kommen, wird die letzte Iteration davon für Schleife i inkrementiert. Und so werde ich zu dieser Zeit fünf. Und es ist auf globaler Ebene. Sobald diese 2 s für die erste erledigt sind, wird diese Funktion in die Warteschlange gestellt. Es wird von der Event-Loop aufgenommen und in den Stapel gelegt. Es ruft auf. Diese Zeile hier wird ausgeführt. fünf Lernenden sind undefiniert. Wir haben 012345 ist undefiniert. Deshalb bekommen wir das Undefinierte. Was wir also tun wollen, ist, eine Schließung einzurichten , sodass wir eine Variable schließen , die dann hier verwendet werden kann. Und es wird nicht die globale Variable I verwenden, die jedes Mal geändert wird, wenn wir den For-Loop durchlaufen. In Ordnung? Und indem wir eine Funktion einrichten, definieren wir einen neuen Geltungsbereich. Daher wird die Schließung für diesen Bereich und die Variable , die wir darin verwenden, behandelt . Schauen wir uns also an, wie wir das machen könnten. Es gibt mehrere Möglichkeiten, dies zu tun. Aber die erste, ich werde hier einfach eine Funktion erstellen. Und ich werde dieses Mal eine Funktionsdeklaration machen , nur um sie kürzer zu halten. Ich nenne es Show Learner. Und dann lass uns einfach weitermachen und das schneiden. Und wir fügen das in diese Funktion ein. Da wir also eine neue Funktion eingerichtet haben, haben wir einen neuen Geltungsbereich definiert. Wir können jetzt eine Variable darin platzieren. Also lass den Lernenden gleich und ich stelle es einfach auf Lernende ein. Und dann der Index I. Also werden wir dieser Lernvariablen einen der Namen zuweisen . Und genau das werden wir hier zeigen. Funktion also geschlossen wird, Wenn diese Funktion also geschlossen wird, hat sie Zugriff auf diese Variable, wenn sie ausgelöst wird. Und jedes Mal, wenn diese Funktion aufgerufen wird, erstellt sie eine brandneue Variable für den neu erstellten Bereich. Also hier unten müsste ich Show Learner eintragen. Es wird also jedes Mal über diese For-Schleife aufgerufen. Wenn wir nun zu sofort aufgerufenen Funktionsausdrücken kommen , gibt es eine einfachere Möglichkeit, dies zu tun, die wir uns zu diesem Zeitpunkt ansehen werden. Aber im Moment rufe ich die Funktion hier nur auf. Es ruft das auf, richtet eine Variable innerhalb dieses Funktionsumfangs ein. Diese Funktion, weil sie auf diese Variable verweist. Und aufgrund des Schließens wird diese Variable im Speicher aufbewahrt , sodass sie darauf zugreifen kann. Und das sollte das Problem für uns lösen. Wenn ich das also nach 2 s sage, werden alle Namen angezeigt. In Ordnung, das ist also ein Ansatz. Ich werde das kopieren. Ich habe also von jedem davon eine Version im Code, die Sie sich ansehen können. Ich werde das dort einfach kommentieren. Ein anderer Ansatz wäre also gewesen eine Variable idx vielleicht für den Index zu setzen und diese einfach auf I zu setzen. Okay, diese Variable ist jetzt Teil dieses Gültigkeitsbereichs. Das wird also dasselbe bewirken. Der einzige Unterschied besteht hier unten. Anstelle von i verwenden wir idx, um die Position im Array zu referenzieren. Und das wird für uns genauso gut funktionieren. Wenn ich das speichere, springen wir nach 2 s hier raus, wir können sehen, wie die Namen angezeigt werden. Okay, jetzt habe ich erwähnt, dass es auch dafür eine einfache Lösung gibt. Lassen Sie mich Ihnen zeigen , was diese einfache Lösung ist. Lass mich das kopieren. Also, diese ersten beiden Lösungen, Using Closer, lassen Sie mich dort nur einen Kommentar abgeben. Verschluss verwenden. Kommentiere das aus. Damit beschäftigen wir uns also nicht mehr. Die zweite verwendet einfach die Eigenschaft von LET. Wenn Sie sich nun an einen der Unterschiede erinnern, über die wir mit let und const im Gegensatz zu var gesprochen haben, besteht darin, dass lateinische Cons einen Blockbereich haben. Was bedeutet blockierter Geltungsbereich? Im Fall von diesem For-Loop? Ich werde das sehr schnell entfernen und mich das loswerden lassen. Wir werden es einfach wieder so machen, wie es war. Deshalb möchte ich I hier verwenden, um auf diese zu verweisen. Nun zurück zur Idee des Blockbereichs. Was bedeutet Walk Scope? Nun, das Zielfernrohr ist genau hier. Da es also einen Blockbereich hat und wir ihn in lat statt in var ändern, ist der Gültigkeitsbereich bereits darin enthalten. Und diese Funktion wird durch Schließen weiterhin darauf verweisen. Die Variable I wird also im Speicher beibehalten. Und jedes Mal in der Schleife deklariert es im Grunde eine neue Variable i. Aufgrund des Blockbereichs , den wir mit let erhalten. Ordnung, also wird jede dieser Funktionen einen Bezug zu diesem Ich haben. Und das wird das Problem für uns lösen. Okay? Dies löst also das Problem mit einer Funktion von let, die wir manchmal vergessen. Wir vergessen, dass das Block-Scoping solche Dinge für uns tun kann. Aber lass es mich dir einfach zeigen, ich werde mir das sparen. Nach 2 s wieder herausspringen. Gleiche Ergebnisse, gleiche Ergebnisse. Nun, ich glaube, ich habe erwähnt, als ich darüber gesprochen habe, dass diese Lösung nicht wirklich Close verwendet. Nun, es verwendet einen Verschluss. Wir schließen immer noch über eine Variable. Jetzt verweisen Funktionsstile darauf. Aber der Grund, warum das funktioniert und var nicht, ist , dass lat hier diesen Blockbereich hat. Var hat keinen Blockbereich und wurde daher auf den globalen Kontext beschränkt. Das ist also eine andere Lösung. Wenn Sie nun nicht zu dieser Lösung gelangen konnten, hoffe ich, dass Sie sie zumindest verstehen. Ich hoffe, Sie sehen, wie diese die Schließung nutzen, um das Problem für uns zu lösen. Und ich möchte, dass du noch eine Übung machst, also machen wir als nächstes noch eine. Lass uns weitermachen. 12. Übungsbeginn: Schließung 2: Ich lasse dich eine zweite Übung zum Thema Schließungen machen. Wie Sie sehen, habe ich dieser HTML-Seite drei Schaltflächen hinzugefügt. Und diese Übung beinhaltet diese drei Tasten. Lassen Sie mich weitermachen und zur Codedatei springen. Ich habe eine Beschreibung, was Sie dort tun sollen. Und das sind dieselben Codedateien , die Sie für die Übung verwenden werden. Zunächst habe ich hier oben drei Konstanten erstellt, die die Schaltflächen enthalten , die ich auf einer HTML-Seite erstellt habe. Diese drei Schaltflächen hier, Ihre Referenzen, diese drei Knöpfe, ich habe weitergemacht und sie erstellt. Sie können diese verwenden oder Sie können Ihre eigenen erstellen, was auch immer. Ich habe das nur hinzugefügt, falls einige sich nicht sicher waren , wie man diese Schaltflächen aus dem DOM auswählt. Nun, ich möchte, dass du Folgendes tust. Jedes Mal, wenn auf eine dieser Schaltflächen geklickt wird, sollten zwei Zahlen angezeigt werden. Die erste Zahl, die angezeigt werden sollte, gibt an, wie oft auf diese Schaltfläche geklickt wurde. Und dann ist eine zweite Zahl der kumulative Wert aller drei Tasten. Es sollte also so etwas stehen. Ich wurde dreimal angeklickt. Alle drei Knöpfe wurden zehnmal angeklickt, ungefähr so. Und es ist wichtig, dass Sie die Schließung verwenden , um dies zu erreichen. Sei dir jetzt bewusst. Es gibt Hunderte von Möglichkeiten , dieses Problem zu lösen. Es gibt Hunderte von Möglichkeiten außerhalb von Closure zu lösen, aber es gibt Hunderte von Möglichkeiten, es mithilfe von Closure zu lösen. Ihre Lösung wird also wahrscheinlich etwas anders aussehen als meine Lösung. Der Punkt ist, ich möchte, dass du den Verschluss benutzt. Ich möchte, dass Sie üben, dies zu tun und über Ihren Code mit Closure als Werkzeug zur Lösung dieser Probleme nachzudenken . Also so möchte ich, dass du das ansprichst. Ordnung, mach weiter und gib dem etwas Zeit. Wenn Sie bereit sind, weiterzumachen und die Lösung zu finden, fahren Sie mit dem nächsten Thema fort. 13. Übung Ende: Schließung 2: Ordnung, lass uns das durchgehen. Jetzt bin ich mir ziemlich sicher, dass meine Lösung ein bisschen anders sein wird als deine. Ich vermute, dass viele von Ihnen eine äußere Funktion geschaffen haben. Sie deklarieren drei Variablen, vier Variablen, tatsächlich eine für das Gesamtkonto und dann vielleicht eine Variable für jede Tastenanzahl. Dann würden Sie diese zu den entsprechenden Zeiten erhöhen und die entsprechende Meldung anzeigen. Ich werde bei der Lösung dieser Lösung einen etwas anderen Ansatz verfolgen . Ich wollte sichergehen, dass ich das DRY-Prinzip verwende. Ich wollte keine Dinge wiederholen , die ich nicht wiederholen musste. Ich werde eine einzige Funktion haben , die angezeigt wird. Ich werde ein einziges Konstrukt haben. Es wird jedem von ihnen einen Event-Listener hinzufügen. Und im Grunde habe ich auf die Verwendung von IF-Anweisungen verzichtet auf die Verwendung von IF-Anweisungen da ich aufgrund des Abschlusses das tun kann, was ich getan habe. Da ich mir sicher bin, dass Ihre Lösung auch Verschluss verwendet. Lassen Sie uns weitermachen und loslegen, damit ich Ihnen meine Lösung zeigen kann . Wir können gemeinsam daraus lernen. Also werde ich zuerst eine Initialisierungsfunktion einrichten , die die äußere Funktion sein wird, die all das einrichten wird. Und dann möchte ich das aufrufen, um die Dinge in Gang zu bringen. Also lege ich das hier hin. Doppeldrucke zeigen an , dass wir diese Funktion aufrufen. Was ich nun mit diesen Deklarationen hier machen werde, ist, dass ich ein Array einrichten werde, um nur Schaltflächen aufzurufen. Und dieses Array wird jede dieser Deklarationen enthalten. Der Grund, warum ich das tue, ist, dass ich die fortgeschrittenen Listener mit einer Schleife deklarieren werde . Deshalb möchte ich diese in ein Array einordnen , nur um mir das einfacher zu machen. Denn dann kann ich einfach dieses Array durchgehen, jedes Element, jedes Element nehmen, den Event-Listener hinzufügen, dann kann ich loslegen. Da ist also mein Array. Jetzt muss ich eine weitere Variable einrichten. Das wird die Gesamtzahl sein. Dies muss im gesamten Umfang dieser Gesamtfunktion ein Teil davon sein. Weil es um alle drei Tasten erhöht werden muss . Also setze ich das zunächst auf Null. In Ordnung, als ich darüber nachdachte, dachte ich mir, nun , auf jeder dieser Tasten wird dieselbe Nachricht angezeigt. Deshalb sollte ich wirklich eine Funktion haben, die anzeigen kann , dass die Meldung in jeder dieser Schaltflächen die Variable für die Gesamtzahl erhöht. Deshalb sollte ich eine Funktion haben, die das auch tut. Also dachte ich, nun, ich kann diese Dinge in einer einzigen Funktion zusammenfassen. Also werde ich das jetzt einrichten. Inkrementieren und anzeigen. Wenn ich Zähler eingeben kann , nenne ich es so. Direkt da drinnen kann ich die Variable für die Gesamtzahl sofort erhöhen. Und dann kann ich die Nachricht an der Konsole protokollieren. Und ich werde eine Vorlagenzeichenfolge verwenden , um das ein bisschen einfacher zu machen. Und ich werde kopieren, ich werde einfach genau den gleichen Satz hier unten kopieren . Das wollte ich sowieso anzeigen, also kopiere ich das einfach. Nun an die Stelle der Gesamtzählung, diese hier. Ich muss die variable Gesamtzahl angeben. Und was werde ich hier hinstellen? Nun, ich denke, was ich tun werde, ist, die Anzahl von jedem Knopf zu geben . Und dann kann ich das durch diese unveränderliche Vergangenheit ersetzen. Da das ein Parameter ist. Der Geltungsbereich dieser Variablen ist hier, wohingegen der Geltungsbereich der Gesamtzählung all das ist. Wenn ich also die Event-Listener hier unten erstelle, können sie ein inkrementelles Konto erstellen. Und diese Funktion hier wird durch Schließung auch Zugriff auf die Gesamtzahl haben . Es wird also verfügbar sein. In Ordnung, lassen Sie uns jetzt weitermachen und die Event-Listener erhöhen. Und wie gesagt, ich habe ein Array eingerichtet , damit ich das in einer Schleife machen kann. Also führe das durch. Und so kann ich denselben Code nur einmal ausführen. Weil das Einrichten dieser Event-Listener derselbe Code wäre. Nun, hier ist, was ich in dieser Schleife machen möchte. Ich deklariere eine Variable und verwende lat. Der Umfang davon wird also dieser Block sein. Und ich setze es auf Null. Das ist also eine andere Variable als diese, weil sie einen anderen Geltungsbereich haben. In Ordnung? Sie widersprechen sich nicht , obwohl sie denselben Namen haben. Und ich richte das ein, weil ich im EventListener eine Funktion einrichten werde. Das hat dann Zugriff auf diese Variable und wir erhöhen diese Variable und übergeben sie dann hier. In Ordnung. Jedes Mal, wenn dies aufgerufen wird, wird eine andere Variable oder möglicherweise eine andere Variable übergeben. Und aufgrund der Schließung werde ich in der Lage sein, den Überblick über die Gesamtzahl zu behalten. Ich werde die Einzelzählung verfolgen können. Lassen Sie uns nun weitermachen und diesen Event-Listener einrichten. BTN, indem es die for-Schleife verwendet, enthält btn jetzt jedes dieser DOM-Elemente, während es durch dieses Array iteriert. Also BTN, füge den Event-Listener hinzu. Dann wollen wir die Klickereignisse verwenden, und hier ist meine anonyme Funktion. Was werden wir nun in dieser anonymen Funktion tun ? Nun, zuerst werden wir diese Variable hier erhöhen. Diese Funktion hat durch Schließen Zugriff auf diese Variable. Also um den Überblick über die Konten zu behalten. Sobald wir inkrementiert haben, fahren wir fort und rufen Inkrement-Display-Zähler an. Und wir werden diese Variable weitergeben. Diese Variable hier, die inkrementiert wurde , wird hier übergeben und dann hier angezeigt. Und diese Variable , die Teil dieses Bereichs ist , wird einfach jedes Mal erhöht, wenn die Funktion aufgerufen wird. Und weil ich alle Elemente im Array durchlaufen habe , haben alle diese Schaltflächen denselben Event-Listener. Also werden wir alle dieselbe Funktion aufrufen. Da es sich um eine Schleife handelt, wird dies jedes Mal in dieser Schleife eine andere Variable sein. Und dann die Funktionen für jeden Event-Listener. Nun, ich habe Zugriff darauf, weil ich geschlossen habe. In Ordnung, lass uns weitermachen und sehen, wie das für uns funktioniert. Ich werde weitermachen und das speichern. Und wir springen wieder raus. Nehmen wir an, ich möchte die Konsole anzeigen , damit wir sehen können, welche Zählungen wir erhalten. Lassen Sie mich also nach unten scrollen , bis die Schaltflächen angezeigt werden. Und wenn wir auf Button eins klicken, was bekommen wir? Einmal wurden alle drei Schaltflächen einmal angeklickt. Lass mich noch einmal darauf klicken. Zweimal. Alle drei Knöpfe werde ich zweimal anklicken. Jetzt dreimal einen Knopf auf einmal getroffen. Gehen wir zu Button drei. Einmal, viermal auf erneut drücken, zweimal, fünfmal. Es sieht so aus, als ob es zweimal, sechsmal funktioniert. In Ordnung, also eine lustige kleine Übung mit Verschluss. Ich hoffe also, dass diese Übung WIR lehrreich war. Sie hatten nicht nur die Gelegenheit , es selbst herauszufinden. Aber vielleicht können Sie auch etwas von dem Ansatz lernen , den ich gewählt habe. Denn wie gesagt, es gibt wahrscheinlich 100 verschiedene Möglichkeiten, dieses Problem zu lösen. In Ordnung, lass uns zum nächsten Thema übergehen. 14. Unmittelbar aufgerufener Funktionsausdruck (IIFE): Sofort aufgerufene Funktionsausdrücke sind ein wichtiges Muster in JavaScript. Ich habe es in einigen der vergangenen Themen kurz erwähnt . Nun, jetzt werden wir es uns genauer ansehen. Unmittelbar. Ausdrücke von Aufruffunktionen werden in der JavaScript-Welt als IFIS bezeichnet. So spricht man das IIFE aus, das man am Ende der Titelzeile sieht. Iffy. Und wenn er einfach eine Funktion definiert und sie dann sofort aufruft, warten wir nicht darauf, später anzurufen. Es ist definiert und gleichzeitig in großen Mengen. Schauen wir uns ein einfaches Beispiel an und dann werde ich über einige der Gründe sprechen, die wir verwenden. Wenn es ihm gut geht, werde ich hier eine sehr einfache Funktion erstellen. Ich werde im Grunde zwei Zahlen hinzufügen und sie auch zurückgeben. Also kommen wir zurück, machen wir einfach fünf plus fünf. Nun, wenn wir das speichern und ich hier rausspringen und mir die Konsole ansehen werde . Wenn wir uns die Summenvariable ansehen, was sie enthält, sehen wir, dass sie die Funktion enthält. Wenn wir das nun aufrufen wollen, müssen wir die Purine hinzufügen. Was wäre, wenn wir das definieren könnten? Und dann setzen Sie einfach die doppelten Klammern an das Ende , sodass wir die Funktion definieren und sie dann gleichzeitig aufrufen. Das würde bedeuten, dass es sofort aufgerufen wird. Und das ist ein Funktionsausdruck. Also ein sofort aufgerufener Funktionsausdruck. Also lass uns das versuchen. Ich mache weiter und setze die beiden Anführungszeichen danach. Was wird nun in der Summenvariablen stehen? Wird es die Funktion sein? Wissen Sie, es wird der Wert sein, der zurückgegeben wird, wenn dies sofort aufgerufen wird. Also werden wir uns das sparen. Und dann schauen wir uns einige an. Jetzt enthält es die Antwort oder den Rückgabewert dieser Funktion, da sie sofort aufgerufen wurde. Das hier ist also ein sofort aufgerufener Funktionsausdruck. Es funktioniert nicht für eine Funktionsdeklaration. So etwas können wir nicht tun. Schauen wir uns die Rückkehr an. Lass uns so etwas machen. Ich möchte, dass Sie Ihnen zeigen, was passiert, wenn wir eine Erklärung abgeben. Also, wenn ich diesen unverwischten Syntaxfehler speichere, unerwartetes Token in Zeile neun. Warum gefällt Nine das nicht? Es weiß nicht, was wir hier machen. Es kann also nicht mit einer Funktionsdeklaration gemacht werden, muss ein Funktionsausdruck sein. Jedes Mal, wenn wir sofort etwas aufrufen ist dies ein Funktionsausdruck. Lassen Sie mich Ihnen nun etwas zeigen , das damit gemacht werden kann. Ich mache eine Summe zehn und setze das einer Funktion gleich. Und wir werden dort einen Parameter für eine Zahl haben , die übergeben wurde. Und dann deklarieren wir hier eine Variable und setzen sie einfach so auf zehn. Und dann geben wir Nummer plus eins zurück. Deshalb nennen wir es etwa zehn. Was passiert nun, wenn wir sofort diese Fußabdrücke darauf hinweisen? Speichere es. Schauen wir uns etwa zehn an. Nan sagt uns , dass es keine Zahl ist. Was sagt uns das, dass wir dafür eine Zeit lang keinen Wert eingegeben haben? Also versucht es, undefined zu zehn hinzuzufügen, sagt NaN. Lassen Sie uns also einen Wert übergeben und wir machen fünf. Spar dir das auf. Jetzt sind wir mit einiger Zeit auf 15 gekommen. Jetzt möchte ich Sie auf etwas mit dieser Variablen aufmerksam machen , das ich gerade hier eingegeben habe. Es gibt nichts, was diese Variable ändern kann , wenn sie einmal gesetzt ist. Es ist zehn. Und das nicht nur, weil ich eine definierte Konstante verwendet habe, offensichtlich verhindert eine Constable, dass erneute Zuweisung zu einem Syntaxfehler führt. aber auch daran, dass es in dieser Funktion enthalten ist. Die Tatsache, dass in dieser Funktion definiert ist , bedeutet, dass wir keinen Zugriff darauf haben, keinen anderen Code haben oder diese Variable auch nur modifizieren könnten , weil sie sich in der Funktion befindet. In Ordnung? Der Grund, warum ich das zeige , ist, dass dies hilft die Anwendungsfälle für sofort aufgerufene Funktionsausdrücke zu veranschaulichen , dass es tatsächlich zwei davon gibt. Ich gebe sie einfach hier ein. Anwendungsfälle, die ich für wichtig halte. Eine davon sind private Daten. Okay? Das sind private Daten. Das kann nicht geändert werden. Es ist in der Funktion, kann nicht manipuliert werden, es ist privat. Ein weiterer Anwendungsfall besteht darin, globale Variablen und Variablenkollisionen zu vermeiden . So können wir Code ausführen, ohne globale Variablen zu deklarieren wenn wir einen sofort aufgerufenen Funktionsausdruck verwenden. Lassen Sie mich nun diesen Anwendungsfall veranschaulichen. Also werde ich hier etwas Code einkopieren. Ich füge es einfach unter diese Anwendungsfälle ein. Da haben wir's. Titel auch. Ich bin auch Query Selector Title. Ich schnappe, wir schauen uns die HTML-Datei an. Ich nehme genau hier dieses Div, das den sofort aufgerufenen Funktionsausdruck tidal line enthält. In Ordnung, wir schnappen uns das. Dann fügen wir Event-Listener hinzu. Einer ist für Mouseover, einer für Maus raus. In beiden Fällen ändert es lediglich den Cursor und wechselt ihn zurück. Und dann haben wir ein Klickereignis, das einfach den inneren Text davon in der Konsole protokolliert. In Ordnung? Also, wenn wir das speichern, kommen wir hier raus. Beachten Sie, dass sich mein Cursor ändert. Während ich das durchgehe. Wenn ich darauf klicke, werden die Informationen, das innere HTML von diesem DOM-Element, auf der Konsole angezeigt. Jetzt haben wir hier eine Variable deklariert, um das zu tun, um dieses Div abzurufen und es verwenden zu können. Aber lassen Sie uns eine Funktion darum herum einrichten. Beginnen wir mit der Deklaration einer Variablen. Ich werde das gleich ändern, aber wir werden so beginnen. Sagen wir ein Strick, es ist eine initialisierte Funktion. Und lassen Sie mich das alles kurz zusammenfassen. Ich werde es einziehen. Das kann also in diesen lockigen Zahnspangen sein. Formatiere ein bisschen für uns. Und dann ist hier die abschließende geschweifte Klammer für diese Funktion. Jetzt haben wir eine Init-Funktion. Wenn wir das jetzt speichern, haben wir die Funktionalität hier natürlich nicht mehr , weil sie nicht aufgerufen wurde. Wir haben diese Funktion nicht genannt. Nun, wir wissen, dass wir uns sofort darauf berufen können , wenn wir so etwas tun. Also füge ich den Prinzen am Ende hinzu. Lassen Sie uns nun sehen, ob wir diese Funktionalität haben. Ich komme hoch, der Cursor ändert sich, ich klicke darauf. Ja, wir haben es. Wir konnten das also sofort aufrufen, aber wir haben hier immer noch eine Variable. Nun, wir erfassen nichts, was variabel ist. Es gibt nichts, was wir von dieser Funktion zurückgeben , für das wir die Variable dafür benötigen. Lassen Sie uns einfach diese Variable entfernen. Und mal sehen, ob das funktioniert. Wir speichern es. Was bekommen wir? Eine Syntaxfehlerfunktionsanweisung gibt einen Funktionsnamen zurück, der einen erfordert. Was uns also sagt, was uns dieser Syntaxfehler sagt, ist , dass es sich um eine Funktionsanweisung handelt. Es erwartet direkt danach einen Funktionsnamen. Es erwartet eine Funktionsdeklaration weil es sieht, dass das Funktionsschlüsselwort an erster Stelle steht. Nun, lassen Sie uns das in einen Ausdruck verwandeln. Und warum wir das tun können, ist, es einfach in Klammern zu setzen. Jetzt setze ich normalerweise gerne meine Klammern um die Funktion und lasse die Marken sie gleich danach aufrufen. Aber es gibt viele Leute , die es vorziehen. Auf diese Weise. Sie arbeiten beide. Es spielt keine Rolle, welchen Weg Sie wählen. Sie arbeiten beide. Also lass uns das jetzt speichern. Wir haben die Syntax dort nicht mehr. Ich komme hoch, der Cursor wechselt. Ich klicke darauf, ich sehe es unten in der Konsole. Jetzt haben wir also Code, der innerhalb einer Funktion ausgeführt wird. Und wir mussten keine Variable deklarieren , um das zu erreichen. Diese Variable befindet sich jetzt in der Funktion verschmutzt den globalen Raum nicht. So vermeiden wir Variablenkollisionen, was bedeutet, dass jemand anderes der an einem Projekt gearbeitet hat oder eine Erkältung, die wir mitgebracht haben mitgebracht , denselben Variablennamen und diese beiden Variablen verwendet hat, Clyde, die letzte derjenige , der deklariert letzte, der einen Wert erhält wird oder der letzte, der einen Wert erhält , hat Vorrang. Wir vermeiden also diese Kollisionen und wir vermeiden globale Variablen. Jetzt können wir auch private Daten haben. Offensichtlich kann niemand auf diese Variable zugreifen, aber auf diese DOM-Elemente, die außerhalb dieser Funktion verfügbar sind, sie müssten sie nur auswählen. Aber ich kann hier eine Variable deklarieren, sie auf etwas setzen. Nur Interpunktion oder so. Jetzt kann von nun an nicht mehr darauf zugegriffen werden. Die Interpunktion wird ein Ausrufezeichen sein. Nun, wir könnten auch eine Funktion innerhalb dieser Funktion einrichten und sie außerhalb der Funktion zurückgeben. Das würde es uns ermöglichen, dies zu ändern. Und dann regeln wir, wie diese privaten Daten geändert werden, was ein sehr verbreitetes Muster ist. Tatsächlich ist dies ein Muster, das im traditionellen Modulmuster verwendet wird, das wir in diesem Kurs sprechen werden , wenn wir uns mit Modulen befassen. Wie ich bereits erwähnt habe, wird bei Closures das und Sie werden sofort aufgerufenen Funktionsausdruck betrachten wenn wir uns mit den traditionellen Modulmustern befassen. Es ist also ein großartiges Muster, um zu lernen, diese Konzepte anzuwenden. Aber dieses Satzzeichen ist privat. Wenn ich das speichere, komm raus und klicke darauf. Jetzt sehen wir dort das Satzzeichen. Das sind also sofort aufgerufene Funktionsausdrücke. Was ich nun in den nächsten Themen tun möchte, wir werden uns einige der Codeteile ansehen , die wir in früheren Themen verwendet denen ich vielleicht erwähnt habe, dass bei denen ich vielleicht erwähnt habe, dass dies verbessert werden könnte sofort aufgerufener Funktionsausdruck. Wir werden uns ansehen, wie wir diese verbessern können. Wir werden uns die Änderungen ansehen, die wir vornehmen müssen, um iffy zu verwenden. In Ordnung, also lass uns zum nächsten Thema übergehen. 15. Anwendung von IIFEs: Nachdem ich IFIS vorgestellt habe, wollen wir sie nun auf einige der Codebeispiele anwenden , die wir in diesem Abschnitt verwendet haben. Dies sind Beispiele für den Abschluss, und jetzt werden wir IFIS zu demselben Code hinzufügen. Das erste Beispiel ist nun die verzögerte Begrüßung. Nun, das ist ein einfaches Beispiel. Wenn Sie sich erinnern, haben wir eine Funktion. Wir nennen Delayed Greeting Pass in einem Namen mit setTimeout, dass die Begrüßung um 5 s verzögert ist. Wenn dies nun eine Funktion wäre, die von irgendwoher anrufen möchte, würden wir dafür kein Leerzeichen verwenden. Aber ich möchte NFV verwenden. Nehmen wir an, ich möchte, dass dies angezeigt wird, wenn die Datei geladen wird. Deshalb möchte ich NFV für dieses Beispiel verwenden , weil es diesen Durchgang in einer Variablen hat. Also möchte ich ein Beispiel dafür machen. Schauen wir uns an, wie wir das machen würden. Ganz einfach. Wir müssen das nur entfernen. Das brauchen wir nicht mehr. Und wir können diesen Teil auch entfernen. Nun, wir wollen das in einen Ausdruck umwandeln, damit er gültig ist, und deshalb setze ich das in Klammern. Und um es dann aufzurufen, setzen wir erneut Klammern. Nun, wie ihr wisst, gibt es dafür verschiedene Formate, dieser letzte Perrin könnte auch hier rauskommen. Ich bevorzuge einfach diese spezielle Struktur. Jetzt müssen wir die Variable übergeben, und deshalb setze ich sie einfach in die Klammern. Das ist alles, was wir dafür brauchen. Und da haben wir unsere verspätete Begrüßung. Also lass mich wieder hierher gehen und lass uns die Konsole öffnen. Hier ist unser Gruß von der Zeit, als wir die Seite zum ersten Mal geladen haben. Lassen Sie uns das jetzt speichern und es wird neu geladen. Und dann, nach 5 Sekunden, sollten wir wieder dieselbe Begrüßung erhalten. Im Grunde entfernen wir nur die Zeile, die diese Funktion aufruft, und wir behandeln sie hier. Das ist wirklich das, was wir mit einem sofort aufgerufenen Funktionsausdruck machen . Ordnung, jetzt werde ich das kommentieren. Und ich werde einen weiteren Code hineinkopieren , den wir als Beispiel verwendet haben. Und das war eine initialisierte Funktion. Mach weiter und füge das ein. Und wenn Sie Mitglied sind , werden zwei Schaltflächen initialisiert. Und wenn sie angeklickt werden, erhöhen Sie die Zählvariable und melden Sie sich dann bei der Konsole an. Um das verwenden zu können, muss ich jetzt hierher kommen und diese Schaltflächen auskommentieren, damit sie auf der HTML-Seite angezeigt werden. Also mach weiter und aktualisiere das. Und sagen wir diesen. Lass uns einfach sehen , ob die auftauchen. Wir haben sie genau hier. Okay. Stellen Sie einfach sicher, dass der Code funktioniert, bevor wir weitermachen. Jep. In Ordnung. Wir sind also gut. Jetzt, wo wir einige Dinge initialisieren müssen und wir eine solche Funktion nicht initialisiert haben . Das ist normalerweise eine gute Bewerbung für einen Zweifel. Da diese Funktion aktiv ist, wird sie nur einmal ausgeführt und dann wird die Seite geladen. Warum es in einer Variablen speichern? Also können wir es später anrufen. Oder warum die Funktion deklarieren, damit wir sie später aufrufen können? Lassen Sie uns einfach den Code aufrufen, den Code ausführen und fertig damit sein. Lassen Sie uns also weitermachen und diese Deklaration dort entfernen, und wir werden sie hier unten entfernen. Noch einmal, alles was wir tun müssen, ist dies mit Krenz zu umgeben. Das macht es gültig. Und dann legen wir die Pläne hinterher, um sie aufzurufen. Jetzt wird das wirklich dasselbe bewirken , dasselbe für uns. Also speichern wir das, die Seite wird neu geladen. Und lass uns weitermachen und diese Tasten ausprobieren. Und sie arbeiten immer noch. Also zwei kurze Beispiele, in denen wir etwas genommen haben, das wir mit Closures gemacht haben , und wir haben einen sofort aufgerufenen Funktionsausdruck hinzugefügt . Und besonders das zweite Beispiel ist ideal für IFIS. In Ordnung, lassen Sie uns weitermachen und lassen Sie mich Ihnen die Gelegenheit geben , eine Übung mit diesen auszuprobieren. 16. Übungsbeginn: IIFEs: Sobald Sie die Struktur eines sofort aufgerufenen Funktionsausdrucks verstanden haben, ist es nicht so schwierig, ihn zu erstellen. Normalerweise wandelst du etwas, das schon da ist in eins um und das macht es noch einfacher. Aber ich möchte, dass du eine Übung machst. Dies ist ein wichtiges Konzept, und ich denke, es ist wichtig, eine Übung zu diesem Konzept durchzuführen. Lass uns einen Blick darauf werfen, was ich von dir erwarten würde. Okay, hier ist ein erster Code und im Grunde erstellt es eine Nachricht innerhalb dieser Nachrichtenvariablen, die sagt, dass heute unabhängig vom Datum und dann der Tag des Monat. Das ist alles, was es tut. Dies ist etwas, das möglicherweise auf der ersten Webseite oder ähnlichem angezeigt wird. Ich möchte also, dass Sie das in ein Problem verwandeln und sehen, ob es richtig funktioniert, protokollieren Sie einfach die Ergebnisse in der Konsole. Also schicken wir es an die Konsole. Es sollte erstellt werden, sobald die Seite geladen und sich von der Konsole abgemeldet hat. Normalerweise möchten Sie diese Nachricht vielleicht in einem Div oder ähnlichem anzeigen . Wir werden die Konsole machen und das wird gut genug sein. Ordnung, mach weiter und probiere es aus. Und wenn Sie bereit sind, es zu überprüfen, fahren Sie mit dem nächsten Thema fort. 17. Exercise IIFEs: Okay. Hoffentlich war das nicht zu schwer. Ich hatte nicht vor, dass das zu schwierig sein sollte. Nun, um nur zu erwähnen, dass einer der Vorteile der Umwandlung in eine FE darin besteht, dass plötzlich drei Variablen im globalen Raum vorkommen, die nicht auf dem Ziel des Weltraums liegen werden. Das ist so ein großer Vorteil, sie machen das fraglich. Also lass uns weitermachen und das tun. Ich werde zuerst die Funktion aufrufen. Und dann meine geschweiften Klammern, ich werde weitermachen und den Code jetzt nehmen und ihn in diese Funktion einfügen. Beachten Sie, dass ich der Funktion keinen Namen gegeben habe, was normalerweise bedeutet, dass ich gerade dabei bin , ein iffy zu erstellen. Aber ich muss das in Klammern setzen, es in Ausdrücke umwandeln, damit wir keinen Syntaxfehler bekommen , und dann Klammern, um es aufzurufen. Nun, das einzige, was ich erwähnt habe, ist, dass wir dies nur auf der Konsole anzeigen wollen. Lassen Sie mich weitermachen und das tun. Punktprotokollierung der Konsole dient nur dazu, sicherzustellen, dass sie ordnungsgemäß funktioniert. Und das werden wir uns sparen. Spring raus und sieh dir die Konsole an, sieh nach, ob wir eine Nachricht bekommen haben. Heute ist Montag, 19. Und das ist in der Tat der Wochentag und das Datum des Monats. Und das funktioniert für uns. So ziemlich einfach. Aber ein sehr wichtiges Muster und JavaScript sofort Funktionsausdrücke aufgerufen, oder wenn er es ist, Ordnung, lass uns weitermachen.