Was ist der Unterschied zwischen Umfang und Kontext in Javascript?

1. Warum ist es wichtig, den Unterschied zu verstehen ?: in dieser Klasse, werde ich den Unterschied zwischen Bereich und Kontext und JavaScript erklären. Ich werde Ihnen auch helfen zu verstehen, warum sich das Scoping Kontext manchmal wie das Gleiche anfühlt obwohl sie es nicht sind. Und ich werde auch erklären, wie Sie bessere Entscheidungen über den Bereich Kontext treffen können, wenn Sie Ihren Code planen . Die dritte Frage, die wir beantworten müssen, ist. Warum ist es so wichtig, den Unterschied zwischen Umfang und Kontext in JavaScript zu verstehen ? Nun, als Entwickler, verbringen Sie die meiste Zeit mit einer von zwei Dingen Entwicklung oder Fehlerbehebung . Und wenn es um die Entwicklung geht, wenn Sie den Unterschied zwischen Umfang und Kontext stark verstehen, schreiben Sie Code, der sauberer und einfacher zu pflegen ist. Und das liegt daran, dass Sie bessere Entscheidungen treffen, wie Sie Ihren Code bei der Fehlerbehebung am besten nutzen, Umfang und Kontext optimal nutzen können. Wenn Sie den Unterschied zwischen Umfang und Kontext verstehen, nutzen Sie Ihre Zeit optimal und führen die richtigen Schritte zur Fehlerbehebung durch, um Ihr Problem schneller zu lösen . Später in diesem Kurs wird darüber sprechen, wie Sie bessere Entscheidungen über die Nutzung Umfang und Kontext in Ihrem Code treffen können. Also im Moment möchte ich mich nur auf die Fehlerbehebung konzentrieren. Werfen wir einen Blick auf einen typischen Workflow zur Fehlerbehebung. Sagen wir mal, haben Sie ein Problem oder einen Bug. Nun, in den meisten Fällen, entdecken Sie den Fehler und beginnen sofort, Schritte zu ergreifen, um dieses Problem zu beheben. Und wenn Sie den Unterschied zwischen dem Bereich im Kontext nicht wirklich verstehen, können Sie feststellen, dass Ihre Schritte zur Fehlerbehebung überall vorhanden sind. Eine Sache führt Sie zum anderen, und in einer Minute denken Sie, dass es ein Problem mit der Variablen ist. Und dann ist es vielleicht ein Kontextproblem, weil es eine Eigenschaft eines Objekts ist. Aber dann bist du dir nicht wirklich sicher, und es führt dich auf einen anderen Weg. Und bei dieser 0,1 Sache, die klar ist, dass wir nicht ah, sehr fokussierten Spielplan haben und Fehlerbehebungsschritte sind nicht, ähm, wirklich führen uns irgendwohin in einer logischen Weise. Das Problem hier ist also, dass Sie ohne ein wirklich solides Verständnis eines Unterschieds zwischen Umfang und Kontext feststellen können, dass Ihre Fehlerbehebung lange dauern könnte. Es könnte unfokussiert sein, und es besteht die Chance, dass Sie das Problem nie lösen können. Ich denke, es gibt einen besseren Weg, dies zu tun, also wenn Sie mit einem Problem oder einem Fehler beginnen. Wenn Sie sich als erstes eine Frage stellen, Ist das ein Umfang oder ein Kontextproblem? Nun, wenn Sie sich diese Frage stellen, aber zuerst, bevor Sie irgendwelche Schritte zur Fehlerbehebung ausführen, wenn Sie das Wissen haben, diese Frage zu beantworten, wenn Sie den Unterschied zwischen Umfang und Kontext verstehen und beantworten Sie diese Frage selbstbewusst, dann können Sie die richtige Entscheidung treffen. Und wenn Sie wissen, die Antwort auf diese Frage, dann die Schritte zur Fehlerbehebung, die Sie auf logischer. Sie sind fokussierter, und Sie können Ihr Problem viel schneller lösen. Wenn es um die Fehlerbehebung und das Verständnis der verschiedenen Teams geht , hilft das Scoping Kontext Ihnen, das Problem einfacher zu beheben. Und es ist wichtig, dass Sie sich, wenn Sie mit der Fehlerbehebung eines Problems beginnen, eine Frage stellen möchten. Ist das ein Geltungsbereich oder ein Kontext? Probleme des ersten Schritts ist die Bestimmung, ob das Problem ein Bereich oder ein Kontext Probleme ist. Der zweite Schritt besteht darin, die entsprechenden Schritte zur Fehlerbehebung auf der Grundlage der Antwort auf Teil 1 durchzuführen, und wenn Sie die entsprechenden Schritte zur Fehlerbehebung ausführen, werden Ihre Probleme endlich schneller gelöst 2. Was ist der Unterschied zwischen Scope und Kontext in JavaScript?: Die nächste Frage, die wir beantworten müssen, ist, was ist der Unterschied zwischen Umfang und Kontext in JavaScript? Nun, Scope ist die Sichtbarkeit von Variablen, und Kontext ist das Objekt, zu dem eine Methode gehört. Wenn Sie sie also Seite an Seite stellen, könnten wir so darüber nachdenken. Scope ist eine Sichtbarkeitsvariablen, und Sie könnten sich fragen, Sie wissen, was ist dieser Umfang einer Variablen? Oder wie ist es variabel, Bereich und mit Kontext, welches das Objekt ist, zu dem die Methode gehört? Von Zeit zu Zeit können Sie sich fragen, was ist das oder in welchem Kontext wird diese Methode ausgeführt? Wenn Sie also an den Umfang denken, denken Sie an Variablen. Und wenn Sie an Kontext denken, denken Sie Methoden. Schauen wir uns ein Beispiel an, fangen wir einfach mit einer Art Pseudocode-Ansatz an. Ich habe diese drei Dinge auf dem Bildschirm. Ich habe Sam ein oder drei und Funktionen, und das sind nur drei Dinge, und im Moment schweben sie einfach im Weltraum raus, und ich habe keine Möglichkeit, sie zu kriegen. Also ist Sam eine Zeichenfolge, und 123 ist eine Zahl, und Dysfunktion ist eine Funktion. Jetzt lassen Sie uns einfach so tun, als ob diese Funktion eine Funktion ist, weil sie wirklich nicht korrekt ist. JavaScript-Syntax. Aber wieder, es ist nur Pseudo-Code. Moment ist es nur so tun, als wäre es eine Funktion. Okay, also muss ich diese Zahl und Dysfunktion eingrenzen, aber ich habe wirklich keine Möglichkeit, diese Dinge zu erreichen. Ich kann sie nicht in die Hände kriegen. Sie sind einfach da. Ich brauchte einen Weg, um auf sie zu verweisen, also müssen wir es tun. Wir müssen auf diese Werte in gewisser Weise verweisen, indem wir ihnen einen Namen geben. Also nennen wir Sam Namen. Lassen Sie uns 123 zählen und hieß The Function Greet. Indem ich das tue, habe ich jetzt eine Möglichkeit, auf jedes dieser Dinge zu verweisen. Wenn ich also den Bereich nutze, kann ich Variablen für jedes dieser Dinge erstellen, die ich speichern kann. Unser Name ist gleich Sam Var Count gleich 123 und bar Griechisch gleich Funktion. Und wenn ich auf den Hebelkontext gehen würde, könnte ich ein Objekt erstellen. Nehmen wir einfach an, die Objekte namens O B J und ich könnten diesen Objekteigenschaften geben, weil Objekte Eigenschaften haben und ich ihm eine Namenseigenschaft geben könnte, die Sam und ich ihm geben könnten. Account-Eigenschaft. Das ist 123 und ich könnte ihm ein griechisches Eigentum geben. Das ist eine Dysfunktion. Oder ich könnte es vermischen Hebel, Umfang und Kontakt, damit ich unseren Namen speichern könnte gleich Sam und O B j Punktzählen geht 123 und vier. Griechisch entspricht Funktion. Sehen wir uns an, wie das tatsächlich in JavaScript-Code funktioniert. Also zurück zum Geltungsbereich, wenn ich Variablen für diese Dinge erstellen wollte, die ich von unserem Schlüsselwort verwendet hatte , und ich speichere unseren Namen gleich Sam Farr Count gleich 123 und unsere große Gleichheitsfunktion und innerhalb der griechischen Funktion Isler als Namenswerte. Also erstelle ich Handles für diese Werte, indem ich Variablen erstelle. Wenn ich den Kontext nutzen wollte,könnte ich eine No b J-Variable erstellen. Wenn ich den Kontext nutzen wollte, Es ist ein Objekt. Und dann gebe ich diese Objekteigenschaft. Also B j Punktname ist Sam und O. P. J Punktanzahl ist 123 und mehr. Jadot Gier ist eine Funktion bei hoher Alarmbereitschaft. Dieser Aktenname, der Sam alarmieren würde. Jetzt werden wir ein wenig ausführlicher darüber reden, was dieses Schlüsselwort bedeutet. Aber gerade jetzt. Denken Sie daran, dass, wenn es um Kontext geht, das Schlüsselwort dieses wirklich wichtig ist und dass dieser Schlüssel auf das Objekt verweist, zu dem eine Methode gehört. Jetzt. Wenn ich es irgendwie vermischen und Umfang und Kontext verwenden würde, könnte ich sagen, offen Jason. Eine Variable und ein Name sind eine Variable, aber über Jade Konto ist eine Eigenschaft und dann ist niemand dot greet auch eine Eigenschaft. Es ist auch eine Methode, wenn objects-Eigenschaft eine Methode ist, ah Funktion, und dann wird es die Methoden genannt. Objekte haben Eigenschaften, aber wenn es sich bei einer Eigenschaft um eine Funktion handelt, handelt es sich um eine Methode. In diesem Fall alarmiert es die Namensvariable selbst Art von drei Möglichkeiten, um wirklich zwei Möglichkeiten, es zu betrachten. Sie können den Bereich nutzen und Variablen erstellen. Sie können Kontext nutzen und Objekteigenschaften erstellen, oder Sie könnten sicherlich mischen und übereinstimmen. Also noch einmal ist der Umfang die Sichtbarkeit von Variablen. Und wenn Sie an Umfang denken, denken Sie Variablen und Kontext ist das Objekt, zu dem eine Methode gehört, und wenn Sie an Kontakte denken, denken Sie Methoden 3. Erforderliche Software: Es gibt einige Annahmen, die ich über Sie mache. Ich gehe davon aus, dass Sie bereits einen auf Ihrem Computer installierten NPM wissen, dass Sie einen anständigen Texteditor haben und dann einen Webbrowser haben. Wenn Sie nicht alle drei dieser Dinge bereits auf Ihrem Computer eingerichtet haben, ist es wichtig, dass Sie jetzt aufhören und sich darum kümmern, bevor Sie mit dem Kurs fortfahren . Nun, wenn Sie nicht installieren müssen, können Sie einfach gehen, um J s dot Organ Donald Installer für Ihr Betriebssystem kennen. Ich empfehle jedoch, jedoch, dass Sie einen Paketmanager verwenden, um Knoten zu installieren. Dies stellt sicher, dass Sie die neueste Version von in P. Mnotiert installieren M Und dann in Zukunft können Sie Ihre Version von Notiz aktualisieren. Wenn Sie einen Mac verwenden, können Sie Homebrew verwenden, was ich empfehle, Und wenn Sie Windows verwenden, können Sie chocolatey oder scoop verwenden. Wenn Sie einen Texteditor benötigen, empfehle ich Visual Studio Code, der sowohl auf Mac als auch Windows oder erhabenen Text funktioniert, auch ein ausgezeichneter Texteditor ist, der auch unter Mac und Windows funktioniert. Wenn Sie einen Webbrowser benötigen, empfehle ich Google Chrome oder Mozilla Firefox, die beide unter Mac OS und Windows funktionieren 4. Einrichtung: Okay, lassen Sie uns den Beispielcode auf Ihrem Computer einrichten. Wir werden drei Dinge tun. Zuerst wird der Beispielcode herunterladen. Als nächstes wird das Projekt mit NPM eingerichtet, und danach werde ich den lokalen Webserver demonstrieren. also zunächst Beginnen wiralso zunächstmit dem Herunterladen des Beispielcodes. Als Vorschau werde ich Sie durch die Schritte des Klicks auf diesen Link in der Klassenwebseite führen, die den Download der ZIP-Datei startet. Und dann, nachdem Sie diese ZIP-Datei heruntergeladen haben, werden Sie diese Datei entpacken. Öffnen Sie diesen Ordner in Ihrer Terminalanwendung. Sie führen die Installation von NPM aus, um Abhängigkeiten zu installieren. Dann führen Sie NPM aus. Starten Sie den lokalen Webserver, und verweisen Sie Ihren Browser auf lokalen Host 3000. Zu diesem Zeitpunkt sehen Sie die Beispiel-Webseite des lokalen Webservers in Ihren Browsern. Lasst uns diese Schritte jetzt gemeinsam durchlaufen. Scrollen Sie nach unten in Richtung unten auf der Seite und klicken Sie auf Ihr Projekt. Auf der rechten Seite sehen Sie einen Link namens Scope versus Contact Beispiele dot sip. Klicken Sie auf diesen Link, um den Download zu starten, bewegen Sie sich in die Falte, die die heruntergeladene ZIP-Datei enthält. Ich habe meine auf meinem Desktop, nur um die Dinge einfach zu halten. Entpacken Sie diese Datei. Öffnen Sie Ihre Terminalanwendung und wechseln Sie in diesen Ordner. Als nächstes führen Sie die Command NPM-Installation aus. Dadurch werden alle Abhängigkeiten für das Projekt heruntergeladen. Wenn das fertig ist, müssen wir den Webserver starten. Wenn Sie also NPM Stolen abgeschlossen sind, führen Sie den Befehl MPM start aus. wird eine Meldung angezeigt, die besagt, dass die Webserver auf dem lokalen Host Port 3000 ausgeführt werden. Öffnen Sie also Ihren Browser und zeigen Sie Ihren Browser auf lokalen Host 3000 und Sie werden das Beispiel sehen . Webseite. OK, jetzt, wo Sie den Beispielcode auf Ihrem Computer gesetzt haben, werde ich durch diese kleine Webseite gehen, die zusammen, die als, ah für unsere Diskussionen über die verschiedenen Konzepte in dieser Klasse und einige der Codebeispiele. Dies ist eine sehr, sehr einfache kleine Webseite, die ich zusammengestellt habe, nicht viel, aber hauptsächlich werden wir sie verwenden, um die Codebeispiele in vielen Lektionen zu demonstrieren . Also zuerst in der oberen linken Ecke, wenn Sie auf die Show-Beispiele klicken, aber Sie werden sehen, dass es Links zu allen Beispielen aus dem Kurs gibt, und es ermöglicht Ihnen, die Codebeispiele ohne Kopieren und Einfügen auszuführen. Sie können ihn einfach direkt vom Browser aus ausführen. Wenn Sie also nach unten scrollen und auf diejenige klicken, die Methodenverkettung sagt wir jetzt nicht wirklich darauf eingehen. Aber, ähm , dieses spezielle Beispiel macht tatsächlich den gesamten Code für die U.I. U.I Also jetzt möchte ich Ihnen nur zeigen, wie die Seite funktioniert. Dies ist ein fiktives Verkaufsteam von 10 Personen, und für jeden Vertriebsmitarbeiter kann ich auf die Auswahlschaltfläche klicken und auf die Schaltfläche de select klicken. Also, wenn ich klicken, wählen Sie, dass Sie sehen können, der Verkäufer hat die Sie Ich ändert ein wenig und Aiken de Select es. Und ich kann auch einfach manuell jeden Verkäufer von der Seite löschen, indem Sie auf den Lösch-Button und für diesen Verkäufer klicken. Und wenn ich einen oder mehrere Vertriebsmitarbeiter auswähle, wird die Schaltfläche „Löschen“ in der oberen rechten Ecke angezeigt und wenn ich darauf klicke, dass jeder ausgewählte Vertriebsmitarbeiter gelöscht wird, also wenn ich auswähle, sagen wir, Tomb oder und klicken Sie auf Löschen ausgewählter zu löschender Objekte. Und wenn Sie Vertriebsmitarbeiter löschen, die Anzahl, sinkt die Anzahl,die Gesamtzahl der Vertriebsmitarbeiter. Ah, wirklich einfaches Zeug. Aber Sie wissen, dass einige Codebeispiele durchlaufen werden und dies verwendet haben, um unsere Beispiele zu stützen . Und in einer bestimmten Zeit, wenn Sie die Seite neu laden möchten, klicken Sie einfach auf die Schaltfläche Seite neu laden und Sie können von Grund auf neu starten. Wenn Sie sich öffnen, können Ihre Aufträge trösten. Außerdem wird eine Meldung angezeigt, wenn Sie ein Codebeispiel laden, das Ihnen genau mitteilt , welche Datei geladen wurde. Sie können also sicher sein, dass zum Beispiel ich zum Beispielglobale Anwendungsbeispiele zwei lade. Und ich sehe das in der Konsole, also lass dich wissen, dass du das richtige Beispiel führst, falls du dir nicht wirklich sicher bist. 5. Wo man den Beispielcode finden: Für einen Großteil dieser Klasse werden Sie zusammen mit dem Beispielcode folgen. Also lassen Sie uns einfach eine kurze Sekunde nehmen, um herauszufinden, wo. Um diese Beispiele zu finden. Öffnen Sie Ihren Texteditor. Ich verwende Visual Studio-Code und gehe in den Projektordner. Öffnen Sie den Ordner W W W. Öffnen Sie den Ordner Js, Öffnen Sie den Ordner Examples im Ordner Examples. Sie finden eine Reihe von Unterordnern und jeden Unterordner der Beispieldateien für dieses bestimmte Thema. Zum Beispiel finden Sie im Ordner Global Scope die Beispiele für den globalen Bereich und in der privaten Schule Ordner finden Beispiele für den privaten Bereich und so weiter. Wir werden diese spezifisch ein wenig später eingehen, aber ich wollte Ihnen nur zeigen, wo Sie den Beispielcode finden. 6. Scope Details – drei Arten von: Aber lassen Sie uns etwas detaillierter über den Umfang sprechen, wie wir bereits besprochen haben. Scope ist die Sichtbarkeit von Variablen, und es gibt drei Arten von Umfang. Es gibt globalen Umfang, es gibt einen privaten Bereich und es gibt Bereich auf Blockebene. 7. Globaler Scope – Diskussion: Lasst uns zurückkreisen und ein wenig genauer über den globalen Umfang sprechen. Globaler Bereich wird auch als Fensterobjekt oder äußerster Bereich oder Bereich oberster Ebene bezeichnet. Grundsätzlich ist globaler Bereich jeder Code, der sich nicht in einer Funktion befindet. So zum Beispiel habe ich zum Beispieleinen Code hier auf der linken Seite. Und wie Sie sehen können, habe ich ein paar Variablen an der Spitze, und ich habe zwei Funktionen Essen und Bar und dann am unteren Rand der könnte diese Funktionen ausführen . So sind die Variablen Geschwindigkeit und Begrüßung und die Funktionen Grippe und Bar und die Ausführung dieser Funktionen globaler Code. Sie sind im globalen Bereich definiert, und das liegt daran, dass sie nicht in einer Funktion definiert sind. Der Code, der sich innerhalb der Food- und Barfunktionen befindet, ist also kein globaler Code, da dieser Code innerhalb einer Funktion definiert ist. In diesem Fall habe ich eine Variable namens app, und diese App ist eine private Variable, weil sie innerhalb einer Funktion definiert ist. Es ist also wirklich wichtig, sich daran zu erinnern, dass der globale Bereich ein Code ist, der nicht in der ah-Funktiondefiniert ah-Funktion 8. Globaler Umlauf – Demonstration: Öffnen Sie den Ordner Examples, und öffnen Sie dann den globalen Scope-Unterordner. Sehen wir uns jetzt Big Beispiel an. Globaler Geltungsbereich eins. Hier habe ich eine globale variable kalte Geschwindigkeit. Ich weiß, dass das global ist, weil es nicht in einer Funktion ist, außerhalb einer Funktion zu finden. Also deklariere ich die variable Geschwindigkeit, die gleich ist 25 Ich habe eine Konsolenprotokollanweisung, die diese Variable ausgibt und wir sollten 25 in der Konsole bekommen. Also, wenn ich auf Show Beispiele und dann Global Scope Beispiel eins klicke, können wir sehen, dass wir Global Street 25 erhalten. Keine große Überraschung. Schauen wir uns also den globalen Bereich Nummer zwei an. Also noch einmal habe ich die globale variable Geschwindigkeit, die gleich 25 ist. Aber dann habe ich diese Funktion innerhalb der Funktion. Ich gebe auch in der Konsole Geschwindigkeit von Lebensmitteln aus, das ist die globale Geschwindigkeitsvariable definiert online drei und dann online. Neun. Ich habe das Konsolenprotokoll mehr Ausgabe angegeben, den Wert der globalen Variablen und online 10 Execute fu, das auch die globale Variable ausgibt. Also lassen Sie uns einen Blick auf zeigen Beispiele globalen Bereich zu, und ich sehe die beiden Nachrichten Geschwindigkeit aus dem globalen Bereich. 25 Geschwindigkeit von Essen 25. Ziemlich einfaches Zeug. Aber der Punkt hier ist, dass eine globale Variable Wunder ist, die im globalen Bereich zu finden ist, und wir wissen, dass wir uns im globalen Bereich befinden. Wenn wir nicht in einer Funktion sind. Variable Geschwindigkeit ist in einer Funktion nicht definiert, was bedeutet, dass sie global ist, obwohl wir online auf sie zugreifen. Sechs. Diese Geschwindigkeitsvariable hier bezieht sich immer noch auf die globale Geschwindigkeit, und dann setzen wir sie hier aus. Denken Sie also daran, dass die globale Variable eine ist, die außerhalb einer Funktion definiert ist. 9. Privater Teil – Diskussion: und als nächstes ist der private Bereich. private Bereich wird auch als lokaler Bereich oder Funktionsbereich bezeichnet. private Bereich wird durch die Verwendung des VAR Schlüsselworts innerhalb einer Funktion erreicht. Wenn ich beispielsweise in dieser Funktion eine Variable namens Speed erstelle und es privat ist, weil ich unser Schlüsselwort verwendet habe , ist es so einfach. Wenn ich unser Schlüsselwort innerhalb einer Funktion verwendet habe, wird diese Variable, die ich erstelle privat für diese Funktion. Nun ist es wichtig, auf etwas sehr, sehr kritisches über JavaScript hinzuweisen , und das ist lexikalischer Umfang. Der lexikalische Bereich ist die Art und Weise, wie sich der Bereich in JavaScript verhält, in dem Inter-Funktionen sehen können . Aber äußere Funktionen können nicht in sehen. Und was ich speziell meine, ist in diesem Fall, wir haben drei Funktionen außen, Mitte und Innen, und die Interfunktion, die die enorme Funktion ist, ist verschachtelt. Es ist zweimal verschachtelt. Es ist in der Mitte verschachtelt und in der Mitte verschachtelt. Von der inneren Funktion hat diese Funktion Zugriff auf die Bar und die Nahrungsmittelvariablen. Da die Inter-Funktion sehen kann, kann sie alle Variablen sehen, die außerhalb von sich selbst deklariert sind. Die Inter-Funktion hat also ziemlich viel Zugriff. Es bietet Zugang zu einem eigenen Bad. Variabel. Es hat Zugang zu der Bar Variable, und es hat Zugang zu der Lebensmittelvariablen. Aber das Gegenteil ist nicht wahr, so dass die äußeren und mittleren Funktionen nicht in der Lage sind, in zu sehen, So hat die äußere Funktion Zugriff auf ihre eigene private Lebensmittelvariable. Aber es kann nicht innerhalb der mittleren Funktion sehen, die die Barvariable nicht sehen kann, und es kann die Bassvariable nicht sehen, weil sie innerhalb der Inter-Funktion ist. Also wieder können Funktionen sehen, aber sie können nicht in sehen. Und das ist lexikalischer Umfang in JavaScript. Und es ist wirklich wichtig zu verstehen, dass, weil sich der Bereich verhält und JavaScript, und wenn Sie eine Variable mit Navarre-Schlüsselwort deklarieren, diese Variable für diese Funktion privat wird, und nichts außerhalb dieser Funktion hat Zugriff auf diese Variable. Aber diese Funktion kann alle Variablen sehen, die außerhalb von sich selbst definiert sind. 10. Privater Teil – Demonstration: Öffnen Sie den Ordner Examples, und öffnen Sie dann den privaten Scope-Unterordner. Schauen wir uns den privaten Bereich eins an. Das ist so ziemlich das, was wir im letzten globalen Beispiel hatten. Wir haben eine globale variable Kältegeschwindigkeit, wenn wir diese Funktion namens Essen haben, aber wir greifen auf die globale Geschwindigkeit innerhalb dieser Funktion zu. Also kam er mit 25 sind Konsole zweimal. Lassen Sie uns gehen, um Beispiele Private Scope eins zu zeigen und wir wollen mit 25 im Konsul zweimal. Okay, wenn du also in den privaten Bereich gehst, wirst du sehen, dass die Dinge ein bisschen anders waren. Ich habe hier meine globale Geschwindigkeit, aber dann, innerhalb dieser Funktion, habe ich eine private Variable, und eine private Variable wird erstellt, indem das var Schlüsselwort innerhalb einer Funktion verwendet wird. Wenn wir also das Schlüsselwort var verwenden, um Variable innerhalb einer Funktion zu definieren, wird diese Variable privat dieser Funktion. Diese Version der Geschwindigkeit ist also außerhalb dieser Funktion nicht verfügbar. Sie möchten Zeilennummer acht ausführen? Ich bekomme die private Version der Geschwindigkeit diese Geschwindigkeit hier in Linie Nummer acht, verweist auf diese Geschwindigkeit Online-Nummer sechs. Wo ist diese Geschwindigkeit Online-Nummer 11 verweist auf die globale Geschwindigkeit Online-Nummer drei. Also sollte ich in meine Konsole gehen. Die globale Geschwindigkeit ist 25, dann sollte ich sagen, die Last. Die lokale Geschwindigkeit beträgt 100. Und lassen Sie uns Beispiele privaten Bereich zeigen. Und genau das ist es. Globale Geschwindigkeiten 25 private Speere 100. Der Punkt hier ist also, dass wir jetzt, oder haben, oder haben,eine private Variable erstellen, die auch als lokale Variable bekannt ist. Aber mit dem Schlüsselwort var, schauen wir uns den privaten Bereich an. Drei. Also hier habe ich ein Beispiel für lexikalischen Umfang. Mit lexikalischem Umfang können Funktionen sehen, aber nicht in so hier. In Zeile Nummer acht Dysfunktion Bar Ich Zugang zu Geschwindigkeitsvariablen. Aber diese Geschwindigkeitsvariable löst sich auf diese Geschwindigkeit. Also, wenn ich diese Konsolenprotokollanweisung online Nummer neun sehe, wird es Bar 100 sagen. Und das liegt daran, dass diese Funktionsleiste außerhalb von sich selbst sehen kann. Es kann sehen, dass die variable Geschwindigkeit, die erste variable Geschwindigkeit von Geldstrafen gleich 100 So hier Bars ausgeführt und diese Konsul Lock-Anweisung findet die Version der Geschwindigkeit es gleich 100 ist. Außerdem gebe ich ein Konsul Log online 13 aus, das Geschwindigkeit referenziert. Es ist auch eins mit der Version der Geschwindigkeit gleich 100, weil wieder, innerhalb dieser Funktion, Geschwindigkeit gleich 100 ist. Diese Funktion kann außerhalb von sich selbst sehen, und ihre Konsolenprotokoll-Anweisung befindet sich innerhalb des Bereichs von Lebensmitteln. So werden sowohl die Bar Food Council Log-Aussagen 100 ausgeben. Und dann wird diese Konsolensperre Anweisung 25 ausgeben, weil hier Geschwindigkeit auf 25 die globale Version der Geschwindigkeit aufgelöst wird. Diese sehen sich Beispiel Nummer drei für den privaten Bereich an. Dann sehen wir Global 25 bar 104 100. Wenn wir also das letzte private Scope-Beispiel betrachten, ist es ein bisschen anders, denn hier innerhalb der Barfunktion deklarieren wir eine private variable Geschwindigkeit. So online. 11 Diese Geschwindigkeit löst sich auf diese Geschwindigkeit, die 500 ist. Also Bar hat jetzt seine eigene private Version von Geschwindigkeit, was bedeutet, dass diese Version der schnellen Referenz auf Leben 15 wird 100 sein, weil wir auf die erste im Sinne der Geschwindigkeit zugreifen. Wir beschränkten uns in Essen und die private Version von Geschwindigkeit und Essen ist gleich 100. Aber in bar ist die private Version der Geschwindigkeit gleich 500. Und das liegt daran, dass wir unser Schlüsselwort verwendet haben, um Geschwindigkeit zu definieren, die eine private Version von Geschwindigkeit erzeugt. Also, jetzt sollten wir, äh, hier Global 25 haben. Wenn wir Essen hinrichten, werden wir eins mit Bar 500 Full 100. Lassen Sie uns also zeigen Beispiele, privaten Umfang. Beispiel. Vier. Das kriegen wir. Wir bekommen globale 25 Bar 500 Essen 100. Die Hauptsache hier, auf die ich nur hinweisen möchte, ist dieses Werkzeug. Zwei Dinge. Eines, wenn wir von unserem Schlüsselwort verwendet, erstellen wir eine private Variable. Es ist private oder lokale Zehe, die funktionieren, und auch, dass Funktionen außerhalb von sich selbst sehen können. Das ist ein kalter lexikalischer Umfang. Also diese Balkenfunktion. Wenn wir das var Schlüsselwort wegnehmen, diese Zeile wegnehmen würden , würde dies 100 statt 500 ausgeben, weil es würde, würden wir sagen, Hey, ich habe keine private variable kalte Geschwindigkeit. Lassen Sie mich sehen, ob ich eine finden kann, und es würde außerhalb von sich selbst schauen und es würde auf diesen Umfang schauen und diese Version der Geschwindigkeit finden . Aber hier, da wir private Variable namens Geschwindigkeit deklariert haben. Diese Geschwindigkeit löst sich auf 500 die Geschwindigkeit auf 100 in diesem aufgelöst auf 25, da mit lexikalischen Umfang, Funktionen sehen können. Aber sie können nicht hineinsehen. Und noch einmal erstellt das VAR Schlüsselwort eine private oder lokale Variable nur für die Funktion, in der sie definiert wurde . 11. Blockbereich – Diskussion: Die endgültige Art von Geltungsbereich in JavaScript ist Blockbereich, daher wird der Blockbereich durch die Verwendung der let- oder const-Schlüsselwörter innerhalb eines Blocks erreicht. Jetzt wurde es in der Atmos Script 2015-Version des Java-Skripts eingeführt. Also vor ec rescript 2015 hatten wir zwei Arten von Umfang, global und privat. Und dann, nachdem ec rescript 2015 ausgerollt wurde, haben wir drei Arten von Umfang globalen, privaten und Block-Level-Bereich. So können Sie sich fragen, was ist ein schwarzer Nun, das ist ein Blockblock öffnet und schließt geschweifte Klammern. Und in diese geschweiften Hosenträger steckst du deinen Mantel und er Code, den du in diese geschweiften Hosenträger steckst , ist ein Block-Level-Mantel. Also, zum Beispiel, ich habe diese Variable. Ich und ich haben es mit dem let-Schlüsselwort beide deklariert. Also, indem ich das let-Schlüsselwort innerhalb eines Blocks verwende, werde ich auf diesen Block beschränkt. Jetzt könnte ich auch eine andere I-Variable haben, die in diesem Fall global definiert ist, weil wieder einmal , wenn irgendein Code, der nicht in einer Funktion definiert ist, global definiert ist, also hier habe ich diese globale Variable namens I Und dann habe ich diese andere Variable namens I, die gleich 50 innerhalb des Blocks ist. Und diese beiden können sehr glücklich nebeneinander existieren, weil die 1. 1 global ausgegrenzt ist und die zweite 1 blockübergreifend ist. Also konnte ich auch die Konstante verwenden, die Sie waren, um die zweite Ich-Variable die Unterschiede zu erstellen . Wenn ich das let-Schlüsselwort verwendet habe, könnte ich diese Variable die nächste Zeile von Code-Tickets umdrehen. Sie lassen mich gleich 50 sein. Und dann könnte ich sagen, Lassen Sie mich gleich 5000. Kein Problem. Aber wenn ich ein Con Ski Wort benutze, ist das eine Konstante. Wenn ich das also mache, kann ich nicht versuchen, mich zu ändern. Ich bin ich. Also, wenn ich sage konstant Artikel 50 und dann sagen kommt, Ich gleich 5000 Ich werde einen Fehler bekommen, weil ich die Augen nicht überschreiben kann. Also das andere Team lassen und Const. Werden beide Variablen auf Blockebene oder Blockbereich erstellt? Aber, Const. Wenn Sie dieses Schlüsselwort verwenden, können Sie es nicht überschreiben. einmal gibt es jetzt drei verschiedene Möglichkeiten, eine Variable zu erstellen. Es gibt var, die einen privaten Bereich erstellt. Es gibt lassen, die, ah, Blockebene oder eine Blockbereichsvariable erstellt ah, , und es gibt das Const-Schlüsselwort, das auch eine Blockbereichsvariable erstellt. Aber diese Wertzuweisung kann nicht geändert werden 12. Blockbereich – Demonstration: Öffnen Sie den Ordner Examples und öffnen Sie dann den Unterordner Blockbereich. Schauen wir uns die Blöcke an, Hope Beispiel. Eins. Sie hören von dieser globalen Variablen I, die gleich 100 ist, dann habe ich hier einen Codeblock und es sagte Der Block, den ich den Wert von I ausgebe und dann auf der Seite des Blocks löschte ich den Wert wieder durch. Schauen wir uns Block-Beispiel Nummer eins an. Also sehe ich 100 zweimal für A und B, und das macht Sinn, weil ich hier nichts Besonderes tue. Ich setze einfach den Wert von Ich zweimal einmal einmal in den Block von einmal außerhalb des Blocks meines Punktes hier. Ist das, weil ich nichts Besonderes im Plock gemacht habe? Ich bin immer noch 100, also schauen Sie sich das schwarze Beispiel Nummer zwei an. Ich habe eine globale Variable namens I, die gleich 100 ist. Aber dann habe ich innerhalb meines Blocks eine Bereichsvariable I auf Blockebene, die gleich 50 ist und das in der Konsole ausgibt. Diese Version von I ist also anders als diese Version von I, weil diese Blockebene Bereich hat . Es ist tatsächlich Umfang nur für diesen Block, also entspricht ich 50 im Block. Aber ich war 100 außerhalb des Blocks. Also, wenn ich mir das Block-Bereichsbeispiel anschaue, bekomme ich 50 und 100. Der Hauptpunkt hier war also die Verwendung des let-Schlüsselworts, um eine Bereichsvariable auf Blockebene zu erstellen , die nicht mit der globalen kollidiert, da sie hier auf den Block beschränkt ist, der Blockbereich aussah , . Beispiel. Drei. Also hier mache ich so ziemlich genau das Gleiche. Aber anstatt das let-Schlüsselwort zu verwenden, verwende ich das konstante Schlüsselwort, um diesen Block zu erstellen. Bereichsvariable I Also, wenn ich Blöcke ausführe? Beispiel. Drei Gleiche Sache. 15 100 offenes Blockspektrum. Beispiel. Nummer vier. Also hier sind zwei globale Variablen i NJ Ich startet es Null n. J. J. Beginnt 100. Ich habe eine for-Schleife und in der Vier-Schleifeninkrement I. Aber ich inkrementiert auch J. Was wir also abschließen sollten, ist eine Schleife, bei der die Ratsausgänge gleich Null und 101 101 202 und so weiter sind . Werfen wir einen Blick auf Block Scope Beispiel für und das ist, was wir landen. Der Punkt, den ich hier mache, ist, dass wir hier keinen Blockbereich nutzen. Wir implementieren I NJ innerhalb der Blacklist. Mal sehen, ob wir dieses Beispiel reparieren können. Fünf. Was wir tun ist, ist es sehr ähnlich, außer dass wir innerhalb unseres Blocks J so einstellen, dass er nur in seinem Block erfasst wird. Also jetzt J ist gleich 50 und wir erhöhen Verfolgungsjagd. Was wir abschließen werden, ist eine Schleife, bei der die Ratsausgänge 0 51 1 51 bis 51 3 51 und so weiter sind , weil bei jeder Iterationsschleife eine neue Variable festgelegt wurde, die nur auf diesen Block abdeckte und nur einen inkrementiert. Also, wenn wir gehen zwei Blöcke gehen Beispiel fünf. Das ist es, was wir bekommen. 0 51 1 51 bis 51. , Ich illustriere nur,dass Jay auf diesen Block und jeden auf jeder interationalen Sperre beschränkt ist. Wir erhalten eine neue Version von J. Wir erstellen eine neue Version von J mit dem let-Schlüsselwort und es ist nur auf diesen Block beschränkt ,während ich global Bereich ist. , Also änderte es sich bei jeder Iteration, bekomme auch den Blockbereich. Beispiel. Sechs. Hier machen wir genau das Gleiche. Onley definiert J mit dem konstanten Schlüsselwort anstelle des let-Schlüsselworts. Aber das wird ein Problem sein, denn mit dem konsequenten Wort können wir den Wert, den wir erstellen, nicht überschreiben, sobald wir J erstellen und sagen, ist gleich a, wir können nicht umdrehen sagen, J ist gleich, weil mit dem konstanten Schlüsselwort, erstellen wir eine Konstante. Also dieser Versuch, j zu erhöhen, wird einen Typ Er uh werfen, schauen Sie, am Beispiel Nummer sechs Block Scope Beispiel Nummer sechs. Sie können auf Gerichtstyp Fehlerzuweisung zu einer konstanten Variablen sehen. Das Sprichwort ist, Hey, Hey, du hast hier eine Konstante geschaffen und dann drehte er sich um, sie zu ändern. können wir nicht tun. Das Const-Schlüsselwort funktioniert also auf die gleiche Weise wie let-Schlüsselwort. Es erstellt eine Bereichsvariable auf Blockebene. Aber sobald Sie erstellt haben, dass sich variabel nicht ändern kann, können Sie es nicht überschreiben. Wenn Sie einen Block Scope Beispiele sieben aussehen. Wir machen ziemlich dasselbe, aber wir versuchen nicht, Jay zu ändern. Wir lassen es einfach so, wie es ist. Also bekommen wir die Ratsleistung von 0 51 52 53 15 So weiter. Also dann eine Show. Beispiele für Blockbereich. Sieben. Das ist genau das, was wir bekommen. 0 51 52 50 Und das liegt daran, dass wir die Blockebene J-Variable erstellen, die gleich 50 ist. Und das ist in Ordnung. Es ist jetzt. Jay steht nicht in Konflikt mit dieser Version von James Global, aber wir ändern sie einfach nicht. Also die Sache, die man sich daran erinnern sollte, Const zu lassen. Ist das mit Lead, können Sie eine Variable erstellen, die einen blockierten Level-Bereich hat, und Sie können ihn ändern, während mit Const. Du kannst es nicht ändern. Sobald Sie erstellt haben, müssen Sie es in Ruhe lassen. Es ist eine Konstante, aber sowohl lassen als auch Nachteile erstellen Bereichsvariablen auf Blockebene. 13. Kontext – Diskussion: Früher in dieser Klasse haben wir die sehr wichtige Frage gestellt. Was ist Kontext in JavaScript? Und wir fanden die Antwort war, Kontext ist das Objekt, zu dem eine Methode gehört. Diese Diskussion war ziemlich hoch. Lasst uns etwas tiefer eingraben. Hier. Ich habe dieses Objekt namens account, und es hat zwei Eigenschaften Kontonummer, die eine Nummer ist und Kontonummer erhalten, die eine Funktion in JavaScript ist, wenn eine Eigenschaft eine Funktion ist. Es wird auch eine Methode genannt, die zufällig für eine Reihe von Sprachen wahr ist. Aber hier, um die Kontonummer zu bekommen. Eigenschaft ist eine Methode, weil es eine Funktion ist, und diese Funktion gibt den Wert der Kontonummer Eigenschaft dieses Objekts Also in diesem Fall würde 12345 zurückgeben Jetzt hätten wir nur in unserem get Kontonummer gesagt, Methode Rückgabe Konto Punkt Kontonummer, aber das ist nicht sehr elegant. Also, was wir tun, ist, sagen wir, diese Startkontonummer jetzt zurück, da bekommen Kontonummer ist eine Methode, die JavaScript. Dieses Schlüsselwort innerhalb dieser Methode bezieht sich auf das Objekt, zu dem diese Methode gehört, und diese Methode gehört zum Kontoobjekt. Die Methode get-Kontonummer gibt also die Kontonummereigenschaft des Objekts zurück, zu dem es gehört, was zufällig das Konto-Objekt ist. Wenn wir also dieses Zeug Kontonummer sagen, sehen wir wirklich die Kontonummer des Punkts. Es ist also nur wichtig, sich daran zu erinnern, dass, wenn es um Kontext geht, das JavaScript dieses Schlüsselwort auf das Objekt bezieht, zu dem eine Methode gehört. Ich habe ein wenig tiefer gegraben und einige tatsächliche Codebeispiele angeschaut. 14. Kontext – Demonstration: in Ihrem Ordner Examples öffnen Sie den Kontext-Unterordner und schauen wir uns den Kontext an. Grundlegendes Beispiel. Hier haben wir zwei Objekte voll und bar. Jedes dieser Objekte verfügt über zwei Eigenschaften. Eine Grußunterkunft und ein griechisches Anwesen. Jetzt mit Objekten. Wenn eine Eigenschaft zufällig eine Funktion ist, wird sie als Methode bezeichnet. Jedes dieser Objekte hat also eine Begrüßungsmethode, so dass die Nahrungspunkt-Gier oder die griechische Methode des Essens diese Bestandsgrünung zurückgibt. Nun, in einer Methode, die dieses Schlüsselwort sehr wichtig ist, bezieht es sich auf die Funktion das Objekt, zu dem eine Methode gehört, so dass dieser Schlüssel in Zeile war . Nummer fünf bezieht sich auf Lebensmittel, weil diese Methode zu grüßen gehört zu diesem Objekt Nahrung. Also noch einmal, das Job-Skript. Dieses Schlüsselwort innerhalb einer Methode bezieht sich auf das Objekt, zu dem diese Methode online gehört. Nummer fünf. Diese bekam Punkt Greening löst sich auf Lebensmittel schaffen Online-Nummer 13. Dieser Börsengruß wird in Bardach-Lesung aufgelöst, daher sollten unsere Konsul Log-Ausgaben gleich sein. Ich bin voll und ich bin Bar, weil unter Hinweis auf Essen, Arterie und Bar Grad. Also lassen Sie uns das in Aktion sehen. Wenn ich den Blockbereich Kontextort öffne. Beispiel. Ich sehe, ich bin voll und ich bin Bar, und das ist genau das, was wir erwarten. Jetzt gibt es etwas, das wir tun könnten, das dies ein wenig klarer innerhalb der Barda Greet Methode machen könnte . Ich werde einen Rat Dura Erklärungen setzen. Ich werde sagen, Rat während dieser Zeit, ich werde das nur inspizieren, damit wir ein vielleicht ein wenig tieferes Verständnis davon bekommen , was das Online-Nummer 13 bedeutet. Also, wenn wir den Code ausführen, sehe ich dieses Objekt in meiner Konsole und ich konnte sehen, dass es zwei Eigenschaften kriechen hat, was eine Funktion und ein Gruß ist. Ich bin Bar, wenn ich es tue. Wenn ich das nehme und es in das Essen schiebe, Essen gierig, gierig. Soll ich mich nicht erneut ausführen? Dieser Code ist jetzt Objekt. Sie können sehen, dass es eine griechische Methode und einen Gruß hat. Ich bin Essen. Die Sache, die Sie sich an Kontext erinnern sollten, ist, dass es das Objekt ist, zu dem eine Methode so innerhalb einer Methode gehört . Das Java-Skript. Dieses Schlüsselwort kann verwendet werden, um das Objekt zu referenzieren, zu dem diese Methode hier gehört, innerhalb des Essens, das dieses Schlüsselwort hier voll verweist innerhalb der Bar, auf die dieses Schlüsselwort dort verweist. Also dieser Aktiengruß löst sich auf Bardot Gruß und diesen Aktiengruß online. Fünf Resolves zu Essen sind Gruß. 15. Wenn sie die gleiche Sache fühlen - Diskussion: Manchmal kann das Scoping Kontext wie das Gleiche anfühlen. So können Sie sich fragen, sind Scoping Kontext Everth dasselbe? Und die Antwort ist nein. Außer es gibt Zeiten, in denen Scoping-Kontext sich wie das Gleiche anfühlen kann. Lassen Sie uns über implizierte Global reden und implizierte Global ist etwas, das passiert, wenn Sie das VAR Schlüsselwort weglassen. Also, zum Beispiel, auf der linken Seite erschaffe ich diese Funktion kaltes Essen, und ich erstelle eine Geschwindigkeitsvariable, indem ich sage, var speed gleich fünf. Also, wenn ich diese Geschwindigkeit mache, ist im privaten Bereich der Food-Funktion. Geschwindigkeit ist jetzt eine private Variable auf der rechten Seite. Ich erstelle die Food-Funktion wieder, aber ich sage nur, dass Geschwindigkeit gleich fünf ist. Ich habe das VAR Schlüsselwort gut weggelassen, indem ich das var weggelassen habe. Keyword-Geschwindigkeit ist jetzt eine globale Variable, da unser Schlüsselwort weggelassen wurde. Tatsächlich ist Geschwindigkeit nicht nur eine globale Variable, eine implizierte globale Variable. Wir erstellen implizit eine globale Variable, indem wir das Schlüsselwort var weglassen. Zusätzlich zu dieser Geschwindigkeit ist nun Eigenschaft des Fensterobjekts. Das ist richtig. Wenn Sie eine globale Variable entweder implizit oder explizit erstellen, erstellen Sie eine Eigenschaft für das Fensterobjekt. Indem Sie also sagen, dass Geschwindigkeit gleich fünf innerhalb einer Funktion ist. Ich sage auch, dass Fensterpunktgeschwindigkeit gleich fünf ist. Sie haben beide genau das Gleiche erreicht. In der Tat kann ich auch unsere Geschwindigkeit gleich fünf im globalen Umfang speichern, und es erreicht genau das gleiche. In der Tat kann ich sogar sagen, Geschwindigkeit entspricht fünf im globalen Umfang und das erreicht genau das Gleiche . Es ist also super wichtig zu wissen, dass das, was wir auf der rechten Seite tun, indem wir sagen, Geschwindigkeit gleich fünf Wenn wir das var Schlüsselwort weglassen, das wir tun, haben zwei Dinge eine implizierte globale geschaffen. Wir erstellen eine globale variable kalte Geschwindigkeit, und wir erstellen auch eine Eigenschaft für das Fensterobjekt namens Geschwindigkeit, da jede Variable , die global ist, auch eine Eigenschaft außerhalb des Fensterobjekts wird. Und das ist ein Beispiel für einen. Umfang und Kontext beginnen sich wie das Gleiche zu fühlen, weil wir Variablen erstellen , die Umfang. Aber wir arbeiten mit einem Objekt oder geben einem Objekt Eigenschaften. Und wenn wir eine Funktion oder Methode namens Window get speed erstellen würden, könnten wir sagen, diese Punktgeschwindigkeit zurückzugeben und es würde funktionieren. Es kommt also in diesen unscharfen Bereich, in dem Scoping-Kontext nicht dasselbe ist, manchmal das gleiche Gefühl haben kann, und es ist wichtig zu verstehen, dass sie es nicht sind. Aber wir kommen in einen grauen Bereich, in dem es sich ein wenig verwirrend anfühlt. Jetzt. Wenn ich das VAR Schlüsselwort zurück in diese Funktion setzen und unsere Geschwindigkeit gleich fünf Geschwindigkeit speichern ist jetzt wieder im privaten Bereich der vollen Funktion. Und das ist es. Es gibt keine globale Variable mehr, die Geschwindigkeit genannt wird, und Geschwindigkeit ist nicht mehr eine Eigenschaft des Fensterobjekts. Lassen Sie uns nun über das JavaScript sprechen, dieses Schlüsselwort innerhalb globaler Funktionen. So schwerer Haftungsausschluss hier für die nächsten paar Minuten. Wir sprechen über JavaScript im Browser. Es gibt einen anderen Kontext, wie Node, aber im Moment sprechen wir nur über JavaScript, wie es im Browser läuft. Und auch gibt es etwas namens strikten Modus, was das Gespräch, das wir über die Zehe sind, dramatisch verändern könnte, also seien Sie sich dessen bewusst , um definitiv mehr über den strikten Modus in ein paar Minuten zu erfahren. Wir schauen uns die Codebeispiele an, aber nur für die nächste Minute zu versuchen, den strikten Modus zu vergessen und nur im Hinterkopf zu behalten , dass wir über Jobs sprechen. Laufen Sie im Browser. Ok. Ende des Haftungsausschlusses. Nun, das innerhalb der globalen Funktion. Also innerhalb einer globalen Funktion ist das Javascript des Schlüsselworts dieses gleich dem Fensterobjekt. Also auf der rechten Seite, ähm erstellt diese Funktion namens Essen, und ich habe darauf verwiesen. Und als ich darauf verwiesen habe, verweise ich wirklich auf das Fenster innerhalb einer globalen Funktion. Das JavaScript. Dieses Schlüsselwort referenziert immer auf das Window-Objekt. Also, wenn ich diese Punktgeschwindigkeit sage, ist es, als würde man Fensterpunktgeschwindigkeit sagen. Wenn ich sage, diese Startgeschwindigkeit gleich fünf ist, sage ich wirklich, dass Fensterpunktgeschwindigkeit gleich fünf ist. Und nicht nur das, ich erstelle auch eine globale Variable, weil zu sagen, dass wir ohne Zweifel Geschwindigkeit gleich fünf ist, wie im globalen Umfang unserer Geschwindigkeit gleich fünf oder Geschwindigkeit gleich fünf zu sagen. Dies ist eine jener Situationen, in denen die Grenzen zwischen Umfang und Kontext ein wenig verschwommen werden und es verwirrend sein kann. Sie sind nicht genau dasselbe, aber sie kommen in dieser Situation sehr nahe. Denken Sie also daran, dass in einer global deklarierten Funktion oder definierten Funktion, dem JavaScript, dieses Schlüsselwort auf das Fensterobjekt verweist und Sie im Wesentlichen auch erstellen. Wenn Sie dem Window-Objekt eine Eigenschaft hinzufügen, erstellen Sie eine globale Variable. Ich denke, das wird ein wenig mehr Sinn machen, wenn wir uns einige Codebeispiele ansehen, also schauen wir uns etwas Code an. 16. Wenn sie die gleiche Sache fühlen - Code 1 Teil 1: in Ihrem Ordner Examples, Öffnen Sie den Unterordner mit dem Titel Scope und Context scheinen gleich. Und schauen wir uns die erste Beispieldatei an. Kopieren Sie dieses Beispiel Ein Code mit dem Namen, der eine Geschwindigkeitsvariable erstellt und in der Konsole angezeigt wird. Kopieren Sie diesen Code und fügen Sie ihn in Ihre Aufträge ein. Guter Rat. Und wir sehen, dass die Ausgabe, die wir bekommen, 100 ist. Okay, lasst uns zurückkreisen. In diesem Beispiel erstellen wir eine private Variable, kalte Geschwindigkeit innerhalb dieser Funktion Lebensmittel, ohne in die Konsole zu setzen und nur Lebensmittel auszuführen . Wir sehen 100. also nichts Besonderes. Aber nur Teoh hat festgestellt, dass wir das Schlüsselwort var verwenden wollen, um eine private Variable zu erstellen . Und wir haben in dieser Klasse mehrfach darüber gesprochen. Wenn Sie also zum Beispiel gehen, seien Sie derjenige, der ah ist, sagt, was passiert, wenn Sie das var Schlüsselwort hier online vergessen? 15. Ich vergesse das var Schlüsselwort I auf Zeile vier von gebrauchten var, aber online 15 Ich habe es einfach weggelassen, Also sage ich Geschwindigkeit gleich 100 Ich Ausgangsgeschwindigkeit und führen Essen. Also, okay, okay, was passiert, wenn wir das Bar-Schlüsselwort vergessen, aber ich werde diesen Code kopieren, und ich werde das in die Konsolenfreie erste Seite einfügen und ich bekomme wieder 100. Also bekommen wir immer noch 100. Wir wissen, dass wir die Variable erstellt haben. Wir geben es aus, aber ich denke, dass hier etwas anderes passiert. Nun, hier ist etwas passiert. Es gibt etwas, das mit dieser Geschwindigkeitsvariablen passiert. Was passiert, ist, dass die Geschwindigkeitsvariable eine implizite globale wird, und implizierte globale ist eine Variable in browserbasiertem JavaScript, wobei, wenn Sie unser Schlüsselwort weglassen, diese Variable zu einer Eigenschaft aus dem Fensterobjekt wird, wird zu einer globalen Variablen. Und denken Sie daran, es wirklich sehr wichtig ist, dass eine globale Variable eine Eigenschaft der Fensterobjekte ist . Also, wenn ich Geschwindigkeit in meiner Konsole tippe, sehe ich 100. In der Tat, wenn ich Fenster tippen bekam Geschwindigkeit, Ich bekomme 100. In der Tat, wenn ich Fenster tippe und ich das Fensterobjekt inspiziere und ich den ganzen Weg nach unten scrolle und ich schaue, könnte ich sehen, dass es eine Geschwindigkeit richtig hier gibt. Der Punkt hier ist also, dass, wenn Sie das Schlüsselwort var weglassen, Sie ein impliziertes Global erstellen. Es wird zu einer globalen Variablen, und Sie haben das implizit getan. Erstellen eines Plot AMP impliziert Global ist wirklich das gleiche wie das Deklarieren des Mobiltelefons globale Variable. Linien 14 und die Linie 17 sind also genau gleich. Sie machen genau das Gleiche. Beide schaffen ein globales sehr gut. Der einzige Unterschied besteht darin, online zu sein. 14. Ich mache es explizit. Ich sage, var Geschwindigkeit gleich 100 Ich mache es im globalen Bereich war online 17. Ich mache es implizit, und ich sage, Tja, Geschwindigkeit, es waren 100. Und weil ich in einer Funktion bin, sagt das Weglassen der var Schlüsselwörter: Oh, Oh, es wird eine globale sein. Aber die andere Sache, die passiert ist, ist, dass wir vor ein paar Sekunden entdeckt haben, ist, dass das Erstellen und eine globale Variable auch eine Eigenschaft des Fensterobjekts mit dem gleichen Namen erstellt, so dass die Zeilen 14 und 15 genau gleich sind. Sie erreichen genau das Gleiche. Var Geschwindigkeit entspricht 100 Fensterpunktgeschwindigkeit ah entspricht 100. Beide erstellen eine globale Variable, die auch eine Eigenschaft der Fensterobjekte ist. Dies ist also keine Situation, in der Umfang und Kontext fast irgendwie zusammengeführt werden. Sie fühlen sich sehr wie das Gleiche, und in gewisser Weise können Sie sie fast als dasselbe betrachten. Es hängt davon ab, wie Sie es diskutieren wollen, aber es ist wirklich die Art von treffen, und sie fühlen sich sicherlich das gleiche, weil wir eine globale Variable haben, war kein Zweifel daran. Aber das wird sehr gut zu einer Eigenschaft des Fensterobjekts. Und Sie können auch sagen, dass dies genau das Gleiche ist. Zeile 16 tut genau das gleiche wie Zeilen 14 oder 15, weil ich das ferne Schlüsselwort auf 16 weglasse , erstelle ich ein impliziertes globales. Ich mache es nur im globalen Raum. Also haben alle drei dieser Dinge genau das Gleiche erreicht. Sie erstellen eine globale Variable, und diese globale Variable wird zur Eigenschaft des Fensterobjekts bei unglaublich wichtigen Informationen , die im Auge behalten werden müssen, denn wenn Sie mit browserbasiertem JavaScript arbeiten, das Fensterobjekt ist ein sehr wichtiges Objekt. Globale Variablen sind ein wichtiges Konzept, um sich ihrer in der Regel schlecht bewusst zu sein. Es gibt viele, ähm, es gibt definitiv viele Problemeigenschaften des Fensterobjekts, aber das Erstellen globaler Variablen absichtlich ist normalerweise etwas, das Sie vermeiden möchten. Aber es ist wichtig zu verstehen, dass, wenn Sie das Schlüsselwort var innerhalb einer Funktion weglassen, Sie ein impliziertes Global erstellen. Es ist eine globale Variable, Sie tun es implizit, und diese Variable wird auch zu einer Eigenschaft des Window-Objekts. Jede globale Variable ist auch eine Eigenschaft des window-Objekts. 17. Wenn sie das gleiche Stück "fühlen" - Code Teil 2: Sehen wir uns nun ein Beispiel an. Siehst du diejenige, die sagt: Was ist das? Also habe ich wieder diese Funktion Essen. Und im Inneren des Essens erstelle ich eine Variable. Also, das ist gut. Ich benutze wieder das var Schlüsselwort, was ich denke, ist besser. Also erstelle ich eine private Variable innerhalb des Essens. Also Geschwindigkeit ist privat für diese Funktion, und ich warne diese Stott-Geschwindigkeit, okay? Und dann richte ich Essen aus, also sollten wir alarmiert werden. Aber die Frage ist, was wird der Wert sein, den wir in der Warnung sehen? Das ist die Frage. Also lasst es uns versuchen. Es ist kopieren Sie diesen Code und gehen Sie zum Job-Skript. Konsul, schnappen Sie den Mantel ein. Und wenn Sie den Code ausführen, sehen wir undefiniert zu den Warnungen. Diese Punktgeschwindigkeit ist nicht definiert. Okay, mal sehen, ob wir herausfinden können, was los ist. Nun, wieder einmal, wir haben diese private variable Geschwindigkeit und wir alarmieren diese Startgeschwindigkeit. Nun, wenn ich etwas sehe, ist das etwas, was ich denke, Objekt-Punkt-Eigenschaft. Diese Punktgeschwindigkeit ist also nicht dasselbe wie Geschwindigkeit, denn wenn er Geschwindigkeit wollte, würden wir nur Geschwindigkeit bekommen. Aber wir bekommen keine Geschwindigkeit, wir werden undefiniert und wir alarmieren keine Geschwindigkeit. Wir lernen diese Punktgeschwindigkeit. Wie wir viele Male in seiner Klasse gesprochen haben, bezieht sich dieses Job-Skript dieses Schlüsselwort auf das Objekt, zu dem eine Methode gehört. Nun, diese Food-Funktion ist nicht wirklich, ähm, eine Methode. Oder ist es? Vielleicht ist es iss Lassen Sie uns diesen Code noch einmal kopieren und lassen Sie uns den Code ausführen. Und dann schauen wir mal, was passiert, wenn wir Foo tippen, was? Also habe ich gerade Fu in meine Konsole getippt. Ich bekomme sieht aus wie der Code von unserer Funktion. Es sieht genau so aus wie der Code aus unserer Funktion. Nun, stellt sich heraus, dass, und wenn ich Window Dot Food tippe, bekomme ich den Code von unserer Funktion. Es stellt sich also heraus, dass Fu eine Eigenschaft des Fensterobjekts ist. Und der Grund ist, weil wir erklären, dass Lebensmittel im globalen Bereich genau hier im globalen Umfang waren , nicht innerhalb einer Funktion waren, in der wir uns in einer Funktion hier auf Zeilen 26 oder 28 befinden. Aber die eigentliche Funktionserklärung von full online 25 ist im globalen Rahmen. Wenn wir also eine globale Funktion erstellen, erstellen wir eine globale Variable. Und wie wir vor ein paar Minuten besprochen haben, ist eine globale Variable auch eine Eigenschaft der Fensterobjekte. Also im Moment ist Essen eine Eigenschaft des Fensterobjekts. Okay, das bedeutet also, dass sich das Schlüsselwort dieses auf das Window-Objekt bezieht. Wenn ich also diese Punktgeschwindigkeit sage, frage ich nach der Speed-Eigenschaft der Fensterobjekte. Also warnt diese Startgeschwindigkeit wird genau das gleiche sein wie zu sagen, dass Warnfenster Punktgeschwindigkeit Linien 28 29 genau das Gleiche sind. Genau das Gleiche. Die Situation ist also, wir haben keine ah, Speed-Eigenschaft auf Fenster Nicht in diesem Beispiel. Das vorherige Beispiel, das wir getan haben. Aber hier tun wir es nicht, weil diese Geschwindigkeit genau dort privat ist. Online 26. Das ist eine private Geschwindigkeit, aber die Punktgeschwindigkeit des Fensters existiert nicht. Und wenn ich hierher kommen und Var Speed Adler sagen würde, sagen wir 5000. Also kopiere diesen Code und aktualisiere die Seite und ich werde diesen Code einschlagen. Und jetzt sehe ich 5000. Wie ich 5000 mit dem Grund sehe, ist, weil wir jetzt eine globale Variable namens Geschwindigkeit erstellen. Diese Punktgeschwindigkeit entspricht diesem Punkt ist Fensterpunktgeschwindigkeit Also Fenster Geschwindigkeit die globale Geschwindigkeit ist 5000. Also in diesem Fall erhalten wir einen Wert , der gut ist. Aber die ursprüngliche Frage bezog sich nicht auf eine globale Geschwindigkeitsvariable. Also in diesem Fall online 28 diese Startgeschwindigkeit oder Fensterpunktgeschwindigkeit ist undefiniert. Wir haben nie eine Fensterpunktgeschwindigkeit definiert. Und das bedeutet, dass die Warnung auf 28 undefiniert produziert. Es gibt keine Eigenschaft für die Punktgeschwindigkeit des Fensters. 18. Wenn sie die gleiche Sache fühlen - Code Teil 3: Werfen Sie jetzt einen Blick. Am Beispiel D uh, wo es steht, Was ist das im strengen Modus? Also in dieser Situation, ich tue etwas Ihre Online-36 von sagen Verwendung streng. Und das sagt im Grunde zur JavaScript-Engine für die Ausführung dieser Funktion, verwenden Sie den strikten Modus. Und der Unterschied hier ist, dass, während diese Funktion ausgeführt wird, wir uns im strengen Modus befinden, so dass das Verhalten, das Sie sehen, im Konsul anders ist . Kopieren Sie diesen Code. Es ist in Ihrer Konsole eingefügt, und wir erhalten nicht Eigenschaft Geschwindigkeit von undefined wieder. So Geschwindigkeit unter den Geldstrafen. Das bedeutet, dass das Objekt, von dem wir versuchen, eine Speed-Eigenschaft zu erhalten, nicht definiert ist. Also diese Geschwindigkeit ist es nicht, dass dieser Punkt Speedos unter finden ist, dass dies undefiniert ist. Und der Grund ist, dass wir, wenn wir strenge Stimmung und browserbasiertes JavaScript tragen, wenn wir im strengen Modus sind, nicht auf das Fensterobjekt zugreifen können, ähm, von einer globalen Funktion, es ist nur eine von die Eigenschaften des strengen Modus. Also werde ich aus dem strengen Modus fortfahren. Aber ich wollte nur darauf hinweisen, dass es wichtig ist zu wissen, dass Sie, wenn Sie den strikten Modus verwenden , nicht auf das Fensterobjekt zugreifen können, indem Sie dies innerhalb einer globalen Funktion 19. Wenn sie das gleiche Stück ," Code - Teil 4: Okay, schauen wir uns das Beispiel E an . Das mit dem Titel Essen war jetzt ein Konstruktor. So online 49. Ich habe die volle Funktion, aber Sie können feststellen, dass ich das Kapital F verwendet habe, als ich Food nannte, nicht nur Kleinbuchstaben F Oh, sondern Capitol Foo. Nun, das ändert nichts im Wesentlichen, aber es ist eine Konvention, die die meisten Programmierer verwenden, die Sie den ersten Buchstaben einer Funktion Großschreibung machen möchten, wenn Sie möchten, dass sie ein Konstruktor ist. Und ich will gebaut werden, weil online 56 Ich bin nicht nur Lebensmittel ausführen. Ich habe es gehackt. Ich sage, Barbu ist ein neues Essen. Und wenn Sie mit Konstruktionsfunk-Konstruktorfunktionen bei allen Job-Skripts gearbeitet haben, wissen Sie, dass, wenn Sie stattdessen einen Konstruktor gegessen haben, Sie ausgeführt werden, so dass Fu ausgeführt wird. Aber es ist ein bisschen anders, weil die Wertleiste die Instanz der Lebensmittelklasse zu sein . Das Essen wirkte hier im Wesentlichen als eine Klasse, und Bar wird eine Instanz der Klasse bekommen. Also in unserem Konstruktor erstelle ich eine Geschwindigkeitsvariable, die für diesen Konstruktor privat ist, und ich warne diese Punktgeschwindigkeit, also lassen Sie uns diesen Code in unserer Konsole ausführen und wir werden sehen, was passiert. Also warnte ich, und ich werde undefiniert. Warum ist das so? Nun, wenn Sie zurück zum Code gehen, Will, Will, mein erster Gedanke könnte so gut gewesen sein, ich erstelle diese Geschwindigkeitsvariable. Also, wenn ich in Stan bin, isst sie Essen? Sollte die Hinrichtung des Lebensmittelproduzenten nicht eine Instanz von Lebensmitteln sein? Will es sollte. Aber das Problem ist, dass Sie vielleicht denken, dass das Wort, das auf die Instanz von Nahrung verweist , ,und das tut es. Es ist wahres Essen. Die Leiste Dies ist gleich bar, was bedeutet, dass, wenn Sie stattdessen in Form für die Verwendung von bar das Schlüsselwort dieses innerhalb des Konstruktors die Instanz voreinstellt, die zurückgegeben wird, so dass das wahr ist. Aber Geschwindigkeit ist keine Eigenschaft des Konstruktors. Es ist eine Variable, und das ist einer der Bereiche, in denen Scoping-Kontext sich wie das Gleiche anfühlen kann. Aber in diesem Fall sind sie sehr viel nicht das Gleiche. Geschwindigkeit ist eine Variable, wenn Sie Variablen denken, Sie denken, Umfang, aber in diesem Fall versuchen wir, A zu referenzieren. Wir versuchen, die Geschwindigkeitseigenschaft dieser Variablen zu referenzieren, aber dieser Instanz aber die Instanz hat keine Geschwindigkeitsvariable. Es hat eine Geschwindigkeit. Verfügt nicht über eine Geschwindigkeitseigenschaft als Geschwindigkeitsvariable. Eso diese Punktgeschwindigkeit ist im Wesentlichen undefiniert. Wenn ich sagen würde, lass uns sehen, äh, lass uns zurückkehren, um, Geschwindigkeit fünf 1000. Und dann alarmiere ich Bardot Geschwindigkeit. Es sollte funktionieren. Also lassen Sie uns diesen Code kopieren und ihn einfügen und wir bekommen 5000. Der Grund, warum wir 5000 bekommen, ist, weil jetzt die Klasse Essen hat eine Spread Eigenschaft Bar windet mit Speed-Eigenschaft. In der Tat, wenn ich ah zu tun, eine Konsole während ich werde, Ich tippe einfach bar in einem in der Konsole. Ich sehe, ich bekomme ein Objekt mit einer Speed-Eigenschaft. Also in diesem Fall würde es funktionieren. Nun hat die Instanz von Lebensmitteln eine Speed-Eigenschaft. Eine andere Möglichkeit, dies zu tun, wäre, wenn ich die Warnung im Konstruktor behalten wollte. Ich könnte sagen, Food-Dot-Pro-Prototyp Punktgeschwindigkeit entspricht, sagen wir, 10.000, nur um unseren Fall hier zu beweisen. Also werde ich die Seite auffrischen und , hoffte,dass ich nicht nein sagen sollte. Siehst du, da gehst du. Art von. Okay, also lasst uns die Seite aktualisieren. Und jetzt bekomme ich 10.000 Und der Grund ist, dass, obwohl ich beim Erstellen des Konstruktors keine Speed-Eigenschaft deklariere , sobald ich den Konstruktor erstelle, eine Speed-Eigenschaft für das Prototypobjekt erstelle. Prototyping ist wieder das ist das Ah, das ist Treibstoff für eine ganze andere Klasse. Aber der Punkt hier ist, dass ich den Lebensmittelkonstruktor hier erweitere, damit ich ihm einen Prototyp gebe , der Geschwindigkeitseigenschaft auf seinem Prototypobjekt aufbaut, was bedeutet, dass, wenn ich stattdessen aß. Foo Bar wird eine Geschwindigkeitseigenschaft haben, so dass diese Punktgeschwindigkeit auf 10.000 aufgelöst wird. Also, aber die ursprüngliche Frage hatte keinen Prototyp, und es ist der Grund, warum wir undefiniert wurden, weil diese Klasse oder Konstruktor eine Geschwindigkeitsvariable, aber keine Geschwindigkeitseigenschaft hat . 20. Wenn sie das gleiche Stück ," Code - Teil 5: nun schauen Sie sichzum Beispiel an, zum Beispiel an, ob die mit dem Titel Essen nur wieder eine Funktion ist. Also ah Fu ist gerade wieder eine Funktion zu sein. Es ist kein Konstruktor. Ich beflecke nicht. Sie hat es gegessen. Und online 61 Ich warne Geschwindigkeit gleich 100 oder ich sage Geschwindigkeit gleich 100. Und dann auf 63 alarmiere ich diese Punktgeschwindigkeit. Also kopieren Sie diesen Code und aktualisieren Sie die Seite und fügen Sie diesen Code in Ihren Browser ein und wir erhalten 100. Also bis jetzt, in vielen dieser Beispiele haben wir definiert. Aber in diesem Fall bekommen wir 100. Und der Grund ist, wenn Sie sich daran erinnern, dass ich durch Weglassen des Schlüsselworts var mit einem implizierten Global lande. Wieder einmal ist das Auslassen des var Schlüsselworts so ziemlich dasselbe wie dies, was auch genau dasselbe ist wie dies, was auch genau dasselbe ist wie diese Zeile 60 61 62 oder genau das Gleiche . Aber unabhängig von Online 63. Indem ich das Schlüsselwort var weglasse, erstelle ich eine implizite globale und wir erstellen eine Eigenschaft auf dem Fensterobjekt namens Geschwindigkeit, was bedeutet, dass Online 64. Wenn wir auf diese Punktgeschwindigkeit zugreifen, bekommen wir sechs. Wir werden krank, wir bekommen 100, weil wir im Grunde nach Fenster gefragt haben Geschwindigkeit. Dies ist also wieder ein Fall, in dem sich die Linie zwischen dem Bereichskontaktkontext unscharf anfühlen kann , weil wir hier in Zeile 62 eine Variable erstellen. Es gibt keinen Zweifel daran, aber wir erstellen eine implizite globale und implizieren globale Eigenschaften des Fensterobjekts in browserbasiertem JavaScript geworden . Dies ist also, wo sein Anwendungsbereich. Aber in gewisser Weise ist es auch Kontext, weil wir nach der Eigenschaft eines Objekts greifen, und wir können darauf innerhalb dieser Funktion zugreifen und wir können darauf innerhalb dieser Funktion zugreifen und das Fensterobjekt referenzieren. 21. Wenn sie das gleiche Stück "fühlen" - Code Teil 6: im Bereich im Kontext scheint der gleiche Unterordner zu sein. Öffnen Sie den Dateibereichskontext scheint genauso zu sein, wie Sie hier mehrere Male in der Klasse gesehen haben . Wir iterieren alle diese Vertriebsmitarbeiter, und wir verwenden die jeweils Methode für jeden Verbündeten, und wir erstellen einen Verweis auf den jeweiligen Verbündeten oder Listeneintrag. Also tun wir das, indem wir eine Variable namens item erstellen, und das ist gleich diesem. Und wie wir wissen, wird dieser Callback im Kontext des Listenelements ausgeführt. Also macht diese Art Sinn, diese Wrap mit Jake müde zu verwenden und wir setzen einen gleichen Zehengegenstand. Und dann sagen wir Item, finden Sie eine Auswahlschaltfläche und dann richten wir den Klick auf eine Warnung für Klick-Ereignishandler für diese Auswahlschaltfläche ein. Wenn Sie sich also die nächste Datei ansehen, scheinen Umfang und Kontext gleich zu sein. Drei. Wir erreichen dasselbe, wie wir es anders machen. Wo das Erhalten dieses zweiten Arguments, das an die Callback-Funktion namens Dom Element übergeben wird, und wir wickeln es mit Jake müde Sourcing-Element gleich Dom Element Rapid Jake müde. Werfen wir einen Blick darauf, was Dom Element wirklich ist. Also zurück in beiden Webseiten. Führen Sie das Beispiel aus. Scope gut, schießen, wenn Scoping Kontext, fühlen Sie sich das gleiche. Drei. Okay, also bekomme ich eine Reihe von Konsolenausgängen, und es gibt nur fast dasselbe. Aber Sie können seine Verbündeten Verkäufer Null ls Vertriebsmitarbeiter sehen. Man ist auch Mensch zu und so weiter. Also, was passiert ist, ist in jedem dieser Fälle, die ein dom-Element setzen. Der Punkt hier ist also, dass dieses dom-Element, das Sie in der Konsole sehen, jedes der Listenelemente in jedem der salespeople Dom Elemente darstellt , obwohl es durchläuft. Also dieser Rückruf zurück, wenn Sie es jede Nachricht aufrufen. Der Callback empfängt zwei Argumente. Das erste Argument ist Index , der der numerische Index des Elements ist, und das zweite Argument ist das Element selbst. In diesem Fall fühlt es sich so an, dass es irgendwie dort ist, wo sich der Scoping-Kontext wie das Gleiche anfühlt, in wir eine Variable erstellen. Aber was wir die Variable auf setzen, ist das aktuelle dom-Element, über das iteriert wurde , was wirklich eher eine Kontext-Sache ist, weil es so ist, wenn wir das Wort so früher verwenden . Es ist der Kontext dieser Methode. Aus dieser Funktion ist der dominante Moment, über den wir iterieren, was dom-Elemente ist. Dies ist also eine Situation, in der es eine Art von Umfang im Kontext in der gleichen Zeile online 10 Element ist definitiv eine Variablen, die Umfang, aber dann setzen wir gleich einem Objekt, das der Kontext von dem oder Kontext ist, auf dem diese Funktion ausgeführt wird. Nun, wenn Sie sich den Dateibereich im Kontext in den gleichen vier ansehen, machen wir hier unten etwas anderes. Wenn Sie schauen, schauen wir uns noch einmal drei an und schauen wir uns an, wie wir, äh, die Umschaltklassenmethode ausgeführt haben. Wir haben gesagt, Vertriebsmitarbeiter Unterstrich Plus-Index wird eine Variable indizieren, so dass wir hier den Bereich verwenden, um das aktuelle Element zu erhalten. Also Verkäufer Null sagt, dass die Person will, dass diese Person auf so weiter. Um, aber im Beispiel, Nummer vier, sagen wir nur, dass Element die von uns verwendete Elementmethode verwendet, erscheint, was auch variabel ist. Aber in gewisser Weise ist es so, als ob Kontext-Bereich diese Fuzzy-Linie haben, weil wir die Variable gleich dem Kontext setzen , in dem diese Funktion ausgeführt wird. In gewisser Weise verwenden wir hier gleichzeitig Umfang und Kontext. Es ist ein Variablenelement ist variabel, aber dieses Element mit variabler Elementvariable wird auf den Kontext gesetzt, in dem diese Funktion ausgeführt wird . 22. Better Entscheidungen machen – Diskussion: Eines der Hauptziele dieses Kurses war es, bessere Entscheidungen über unseren Code mit unserem Wissen über Umfang und Kontext treffen zu können . Also, da gibt es wahrscheinlich ein paar Fragen, die Ihnen zuerst in den Sinn kommen könnten. Zum Beispiel, wann sollte ich den Umfang nutzen und wann sollte ich den Kontext nutzen? Nun, bevor Sie diese Fragen wirklich beantworten können, müssen wir über eine wichtigere Frage nachdenken, was ist? Was ist das Problem, das Sie lösen möchten, wenn Sie Ihren Code zu einem bestimmten Zeitpunkt planen? Worin besteht das Problem, oder was? Was versuchst du zu erreichen? Und wahrscheinlich werden Sie versuchen, Probleme zu lösen, die sich auf die Art von Dingen beziehen , , die wir in diesen großartigen Büchern lernen, die wir Antimuster lesen, Dinge wie sich wiederholenden Code oder hartcodierte Werte oder aufgeblähte Funktionen. Dies sind nur Beispiele für die Arten von Problemen, auf die wir nicht stoßen möchten, wie Sie planen und unseren Code. Also zu jedem Zeitpunkt, wenn Sie sich darüber klar sind, das Problem, das Sie zu lösen versuchen, dann können Sie über die Beantwortung dieser Frage gehen, was ist das richtige Werkzeug für diesen Job. Und natürlich gibt es viele verschiedene Arten von Werkzeugen. Es gibt Werkzeuge für jeden Job, aber Sie müssen herausfinden, was das richtige Werkzeug für den Job ist, den Sie zur Hand haben. Und sobald Sie das richtige Werkzeug ausgewählt haben, können Sie mit der Planung Ihres Codes beginnen. Und die Entscheidung sollte den Geltungsbereich nicht nutzen. Ich sollte Leverett Kontext für dieses spezielle Problem. Lassen Sie uns also einen Schritt weiter gehen und tatsächlich einige Codebeispiele betrachten, um , ah, wirklich zu verstehen, was das bedeutet. 23. Bessere Entscheidungen machen – Demonstration: in Ihrem Ordner Examples. Öffnen Sie den Planungsunterordner und werfen Sie einen Blick auf Planungsbeispiel eins. Sie haben also einen Code, der Ihnen vertraut aussehen sollte. Um, über die Vertriebsmitarbeiter zu iterieren, und ich habe eine Reihe von Click-Ereignishandlern eingerichtet. Du wirst es bemerken. Ich sage, dass ich einen wiederholten Mantel habe. Lassen Sie uns also eine Suche nach dem Code machen, den ich sage, dass er zu diesen beiden Instanzen wiederholt wird. Also gibt es zwei Orte in meinem Code hier in Zeile 27 Zeile 47, wo ich die Länge all dieser ausgewählten Verkäufer möchte . Was das bedeutet, ist, dass, ähm, wenn Sie die Beispielmethodenverkettung ausführen, genau das ist, wo der Apfel, der ganze Code funktioniert. Also, wenn ich Vertriebsmitarbeiter auswähle, wenn ich hierher gehe und auf die Schaltfläche „Ausgewählte löschen“ klicke, die alle eigenenlöscht , die alle eigenen , alle Vertriebsmitarbeiter, die ausgewählt sind, und ich weiß, dass, wenn ich eine von diese bestimmten Verbündeten, können Sie sehen, dass es die Klasse ausgewählt hat. Dieser hat eine Klasse ausgewählt, und wenn ich diese Klasse entfernen würde, würde er nicht mehr ausgewählt erscheinen. Also hier war zu sagen, Verkäufer, Ally wählte Länge die Länge all dieser Elemente. Es gibt also zwei Fälle, in denen ich die Länge der Verbündeten ausgewählten Elemente wissen möchte oder wie Maney Verbündete ausgewählte Elemente dort sind. Aber das Problem hier ist, dass wir wiederholten Code haben. Ich tippe buchstäblich Zitate, Pfund Verkäufer, Leerzeichen l ich Punkt zweimal ausgewählt. Und was passiert, wenn ich das Element des Vertriebsmitarbeiters ändere? Verkäufer, die ich Teoh wissen Sie, Verkäufer. Alles, was sagt, es ist nur , weißt du, ich werde aus irgendeinem Grund den Namen der Siebener ändern. Ich muss zu jedem von ihnen gehen, und ich muss so gehen, und das ist chaotisch. was wollen wir nicht machen. Es ist extrem schwer zu verwalten. Und es könnte Dutzende oder Hunderte von Dateien in unserem Code geben, wo das ist oder dass das Literal, das ich d gesetzt hat. Das wollen wir nicht. Ein anderer Weg zu Ansätzen wäre also auch, wenn Sie sich das Beispiel erklären, um eine Variable Salespeople setzen. Also stellt dieses variable Dollarzeichen salespeople das Live-Dom -Element dar. Dieses Element diese Variable hier stellt dieses Element direkt hier dar. Die Idee von Vertriebsmitarbeitern. Also, jetzt haben wir einen Verweis auf dieses Element. Also müssen wir das nicht ständig neu eingeben. Und wenn wir das hier umbenennen, bin ich in unserem Zeichen bis zu ah, wissen Sie, Verkaufspersonen alle Bindestriche. Dann könnten wir diese Änderung hier nur einmal vornehmen und kleine Kaskade zu unserem Code. Das klappt also besser. Denn jetzt sagen wir nur Dollarzeichen Verkäuferinnen und Vertriebsmitarbeiter, die ich ausgewählt habe. Und dasselbe hier ist das ein bisschen effizienter, aber wir haben immer noch einen wiederholten Code. Wurden immer noch buchstäblich tippen l i Punkt ausgewählt und l ich wurde ausgewählt. Und was ist, wenn wir diese Verbündeten dazu bringen? Oder was, wenn wir die ausgewählte Klasse zu ändern, ich bin ausgewählt, so dass s'more retyping, ähm , , ich, ähm, ausgewählt und ich muss diese Änderung nehmen und ich werde es hier unten schaffen, und das ist wieder chaotisch Geschäft. was wollen wir nicht machen. Also denke ich, es gibt einen besseren Weg, das zu tun. Wenn wir gehen, um Pflanze Beispiel drei. Sie können sehen, dass wir unser Dollarzeichen haben. Sehr vertriebsmitarbeiter Variable. Und dann haben wir eine Methodenfunktion namens get salespeople length und die die Länge aller ausgewählten Vertriebsmitarbeiter zurückgibt . Also sagen wir, gestohlenes Zeichen Vertriebsmitarbeiter Punkt finden die Find-Methode dieses Objekts verwendet, das einen Verbündeten übergibt . Und ah, eigentlich, eigentlich, das ist, dass alle Verkaufspersonen sich nicht langziehen. Wie viele Verkaufspersonen gibt es? Und dann wollen wir herausfinden, wie viele ausgewählte Vertriebsmitarbeiter es gibt. Also sagen wir, Verkäufer finden L. Ich wurde ausgewählt. Also, hier ist es nur eine Punktlänge zu finden . Hier finden Sie l einen Punkt ausgewählte Länge, aber in beiden Fällen wurden eine Funktion auf diese Weise ausgeführt. Wenn wir die Anzahl der Vertriebsmitarbeiter wissen wollen, rufen wir einfach die Funktion an, bekommen Verkäufer Länge, es ist einfach. Und dann wollen wir die Anzahl der aktuell ausgewählten Vertriebsmitarbeiter wissen. Wir rufen nur die Funktion auf, erhalten ausgewählte Vertriebsmitarbeiter Länge. Wir tun das zweimal, und auf diese Weise, wenn sich irgendetwas in unserem Code ändert, wenn wir diese Idee zu Vertriebsmitarbeitern ändern, ist es egal. Wir machen diese Veränderung direkt dort, und das war's. Wir machen uns keine Sorgen. Und wenn wir die, ähm, die Alliierten ändern ähm, würden, die die Vertriebsmitarbeiter haben. Wir könnten diese Änderung dort vornehmen, und wir müssen es an keinen anderen Ort schaffen. Oder wenn wir benannt haben. Wenn wir so genannt wurden. Wenn wir die Klasse umbenannt haben, die darauf hinweist, dass etwas ausgewählt ist, ich bin ausgewählt, machen wir diese Änderung hier einfach und das war's. Jeder ruft nur diese Funktion an. Sie machen sich keine Sorgen darüber. Sie nennen diese Funktion Dysfunktionen, kümmert sich darum, wie dieser Satz, so dass Sie Faktor den ganzen Tag wieder können. Und wir könnten wirklich all diese String-kleinen Regeln loswerden, die wir mit unserem Co verwenden weil wir eine ganze Reihe von ihnen haben. Und das ist alles wieder eine Art chaotisches Geschäft, denn das sind die Luftsaiten, die wir meine Hand ändern müssen , wenn sich eine dieser Definitionen ändern. Der Hauptpunkt, den ich hier mache, ist, dass wir es wollen. Jetzt, da wir den Unterschied im Umfang im Kontext verstehen, können wir Dinge tun, wie das Erstellen eines Variablenbereichs, den wir in unserem Code verwenden können. Oder wir können Dinge tun, wie zum Beispiel Methoden für Objekte zu erstellen, Kontext, um einen Code oder Planer-Code in einer Weise zu faktorieren, die intelligenter und einfacher zu verwalten ist. 24. Ein etwas mehr über den Kontext: Lassen Sie uns ein bisschen mehr über den Kontext sprechen. Ich ließ das Cover zwei Dinge zuerst, wechselte den Kontext und dann zweitens dies gegen das mit Jake Weary eingewickelt. 25. Kontext ändern: Lassen Sie uns herausfinden, was es bedeutet, Kontext in JavaScript zu wechseln. Früher haben wir gelernt, dass Kontext sich auf das Objekt bezieht, zu dem eine Methode gehört, aber manchmal möchten wir eine Methode denken lassen, dass sie zu einem anderen Objekt gehört. Zum Beispiel, wenn die linke Seite des Bildschirms, Ich habe ein Objekt halten Lebensmittel auf der rechten Seite des Bildschirms. Ich habe ein Objekt namens Bar. Jedes dieser Objekte hat eine Grußeigenschaft, und jedes dieser Objekte hat auch eine griechische Eigenschaft. Jetzt noch einmal und JavaScript, wenn eine Eigenschaft eine Funktion ist, wird es eine Methode genannt. In jedem Fall die griechische Methode diesen Aktiengruß zurück. Also, wenn ich Essen Punkt Gier hinrichten würde, würde ich bekommen, dass ich voll bin. Und wenn ich Bardot Greet ausführen würde, würde ich bekommen, ich bin Bar, und in jedem Fall interagiert die griechische Methode direkt mit der Begrüßungseigenschaft dieses Objekts. Jede Begrüßungsmethode wird im Kontext ihres Objekts ausgeführt. Food dot Gier wird im Kontext der Nahrung ausgeführt, und Bardot Greet wird im Kontext der Bar ausgeführt Nun, es gibt einen Weg, der Sprung in schwächen und wir können den Kontext jeder Methode ändern. Es wird Kontext-Umschaltung genannt, so dass wir die Food Dot Greet Methode machen können. Denken Sie, es gehört zu Bar und wir könnten die Bardot-Greet-Methode machen. Denken Sie, es gehört zu Lebensmitteln, weil Sie hier sehen können Essen zustimmen, ist jetzt auf der rechten Seite. Es hat die blaue Schachtel. Und wenn ich Nahrungsmittel Punkt Gier ausführen, bekomme ich, ich borge mir einen. Führe Bardot-Gier aus. Ich verstehe, ich bin Essen. Dies mag ein wenig verwirrend erscheinen, ein wenig seltsam, also lasst uns in einen Code springen und wir können sehen, wie das wirklich funktioniert. In Ihrem Ordner Examples. Öffnen Sie den Kontext des Ordners und öffnen Sie dann den Dateikontext Kohle und gelten für ich habe zwei Objekte hier, voll und bar, und beide Objekte haben eine Begrüßungseigenschaft, und beide Objekte haben in beiden Fällen eine Greet-Methode -Vereinbarung, die den Wert dieser Objekte die Begrüßungseigenschaft zurückgegeben hat. Also, wenn ich Essen Punkt Griechisch ausführen würde, sollte ich bekommen, dass ich Essen bin. Und wenn ich Bardot Griechisch exekutieren würde, sollte ich kriegen, dass ich Bar bin. wir sicher, dass dies so funktioniert, wie wir es erwarten. Kopieren Sie also beide Objekte. Payson, Sie JavaScript-Konsole und jetzt werde ich Essen Punkt grün ausführen und ich bekomme, ich bin Essen. Und wenn ich hinführe, Bardot-Gier ausführen, verstehe ich, dass ich Gitter bin. Das ist so ziemlich das, was wir hier unten in Zeile 17 erwarten. Kopieren Sie diesen Code und führen Sie ihn in Ihrer JavaScript-Konsole aus. Also ist hier etwas ziemlich Seltsames passiert. Ich habe Essen hingerichtet, Doc grüßt und ich bin Bar, was nicht wirklich Sinn ergibt, aber hier ist ein bisschen mehr los, sagte ich. Lebensmittel-Grad Dot Call Bar. Was passiert ist, ist, dass ich die Call-Methode verwende, um den Kontext des Food-Dokuments zu wechseln. Tolle Methode. Also die Sündensteuern. Es ist Objektpunktmethode dot rufen neuen Kontext auf. Also Essen Dockery Anruf, aber tun Sie es in der Ausfahrt im Kontext der Bar. Und wenn ich sagen würde, Bar Dockery Dot rufen, äh, Essen, das ich bekommen würde. Ich bin Essen. Ich exekutiere Bardot Griechisch, aber ich gehe auf Essen, weil ich sage, dass Bardot zustimmt. Rufen Sie im Kontext von Lebensmitteln auf, so dass es mit der Aufrufmethode passiert, ist, dass Sie vorübergehend eine Methode nehmen und sie in den Kontext eines anderen Objekts verschieben. Es ist nicht buchstäblich, was passiert, aber es ist effektiv, was passiert. Also, wenn ich sage Essen Essen vereinbart Eine Call Bar, die diese Methode ausführt. Aber ich schaffe es. Denken Sie, es gehört zu diesem Objekt. Und wenn ich sage, dass Bardot Griechisch foo anrufen, mache ich einen Barabschluss, aber ich schaffe es. Denken Sie, es gehört nur für den Moment zum Essen. Also, wenn Sie diese Zeile 20 hier kopieren, ist es eigentlich Zeile 18. Wenn ich diese Datei wieder geöffnet Also Zeile 18 und ich laufen, dass ich das Gleiche bekomme. Wenn ich ausführen Essen Punkt Greet, gelten und bar Ich bekomme ich bin Bar, weil ich den Kontext von Essen gewechselt. Stimmen Sie zu, jetzt die Anruf-und Anwenden-Methode zu balken, tun Sie genau das gleiche. Der einzige Unterschied besteht darin, Argumente zu übergeben. Nehmen wir an, dass die Nahrungsmittelvereinbarung, die Argumente A und B erwartet und ich diese übergeben wollen Nun, wenn ich das mit Aufruf tun wollte, würde ich die Argumente in einer kommagetrennten Liste übergeben. Und wenn ich das mit apply machen wollte, habe ich die Argumente als Array übergeben. Also mit dem Essen vereinbart einen Anruf. Ich übergebe es den Kontext des neuen Kontakts. Wir nur Bar Komma und dann alle meine Argumente und mit Essen vereinbart, dass gelten. Ich übergebe es Bar und dann ein Array von Argumenten. In beiden Fällen können Sie jedoch mit den Aufruf- und Anwenden-Methoden den Kontext wechseln, in dem eine Methode ausgeführt wird. 26. Method – Diskussion: Also in JavaScript ist ein Konzept namens Methodenverkettung. Es ist eigentlich nicht spezifisch das Java-Skript. Sie werden feststellen, dass dieses Muster in einer Reihe von Sprachen, aber es ist etwas, das sehr gut zu beachten ist, und es kann Ihnen auch helfen, Code zu schreiben, der ein wenig ausdrucksvoller ist. Also auf der linken Seite der Seite habe ich dieses Objekt namens APP, und dieses APP-Objekt hat drei Methoden und es wird gestartet und eingerichtet. Uns ist es egal, was sie tun. wir so, als würden sie etwas Magisches und Erstaunliches tun. Aber die Hauptsache ist, dass wir ein Objekt mit drei Methoden haben, und auf der rechten Seite der Seite führe ich diese Methoden aus, indem ich App-Dot-Start und App-Punkt-Einrichtung sage. Damit alles vollkommenen Sinn macht. Scheint ein ziemlich guter, solider Weg zu sein. Aber was, wenn neben dem Funk tun, diese Methodenneben dem Funk tun,was auch immer sie tun? Was wäre, wenn sie alle einen sehr spezifischen Wert zurückgeben würden? Was, wenn sie das alle zurückgeben? Nun, wir wissen, dass in JavaScript die Tat dieses Schlüsselwort bezieht sich auf das Objekt, zu dem eine Methode gehört Also in jedem dieser Fälle bei der Rückgabe von APP, Unit Methode gibt app zurück, die Startmethode gibt AP und eine Reihe von -Methode gibt die App zurück. Das bedeutet also, auf der rechten Seite könnte ich die Art und Weise ändern, wie ich meinen Code schreibe. Ich könnte so etwas tun, wo ich sage App-Punkt darin Punkt Startpunkt einrichten. Und der Grund, der funktioniert, ist, dass jedes Mal, wenn ich eine dieser Methoden ausführe, es eine App zurückgibt, die es mir ermöglicht, direkt eine andere Methode für dieses Objekt auszuführen. Also, wenn ich sage, dass es richtig ist, kommt das direkt zurück, was es mir erlaubt, Punktstart zu sagen und dann gibt die Startmethode App zurück, die es mir erlaubt, dot eingerichtet zu sagen Also eine andere Möglichkeit, dies zu betrachten, wäre Denken Sie über die direkte Verbindung zwischen diesem und der App. Weißt du, in der Unit-Methode gebe ich das zurück, was bedeutet, dass ich die App zurückgebe, die mir erlaubt, die Startmethode direkt aufzurufen. Und dann, als ich eine Startmethode anrief, gebe ich dies zurück, was mir erlaubt, die Einrichtungsmethode aufzurufen, und das erlaubt mir, ich könnte sogar vielleicht Shane eine andere Methode auf hier und erstellt eine Methode kaltes Essen und dann, Ähm, ethische Bar und ich bin ethischer Topaz und ich könnte mich den ganzen Tag ändern. Aber dieses Muster, wenn man sich den Code auf der rechten Seite anschaut, sieht etwas anders aus, als apt out zu sagen, nicht wahr? App Dot Start-App, die den Code vielleicht ein wenig ausdrucksvoller einrichtet. Und wenn Sie wirklich kreativ sind, können Sie Code schreiben, der vielleicht sogar einfacher zu verwalten ist. Also, wenn nicht obligatorisch, dass Sie Methodentraining tun. Es ist einfach ein Muster, das gut zu beachten ist, und es könnte eine Zeit sehr hilfreich sein. Mal sehen, ob wir ein besseres Verständnis der Methodenverkettung bekommen können, wenn wir uns tatsächlich einige Codebeispiele ansehen . 27. Method - Demonstration: im Ordner Examples öffnen Sie den Kontext-Unterordner und schauen Sie sich die Datei Method Chaining an. Jetzt hier habe ich die gesamte Anwendung, aber ich habe den Code dramatisch geändert. Ähm, wo ist früher? Wir hatten gerade Ah Art Jaco Rico, nur in einer prozeduralen Art und Weise angelegt. Hier habe ich ein Objekt namens APP erstellt und dann verschiedene Methoden erstellt, die darin aufgerufen werden und Start und Dom eingerichtet und etcetera. Der Code ist also viel objektorientierter. Es ist ein wenig sauberer, leicht zu lesen Benutzer zu verwalten, aber ich habe hier unten etwas getan, dass es ein Muster ist, das ich nur diskutieren möchte. Für ein paar Minuten. Ich mache etwas namens Method Training, also rufe ich die Dom-Einrichtungsmethode auf. Die Methode Bindung, Reload Page Ereignishandler, die Bindung, die Lead ausgewählte Ereignishandler-Methode und die Käufer-Benutzerelemente Ereignis Taylor Methode. Aber in jedem Fall sage ich nicht, dass App Dot diese Methode, wie Sie es erwarten würden. Ich sage nur, app dot app dot dom einrichten dot kaufen nachladbar blah dot bond glaubwürdig, uh dot Bind. Also rufe ich die App auf, aber dann rufe ich nur verschiedene Methoden in der App auf. Wie kommt es also, dass ich jedes Mal mit App Dot App Dot apt überspringen kann? Nun, lassen Sie uns einen Blick auf jede dieser Methoden werfen. Schauen wir uns die dom-Einrichtungsmethode hier unten an. Also Dom einrichten hat eine interessante Linie. Es macht eine Reihe von Sachen, über die wir uns jetzt nicht wirklich Sorgen machen, aber es gibt das zurück Und wenn wir uns erinnern, was ist das Java-Skript? Dieses Schlüsselwort bezieht sich auf das Objekt, zu dem eine Methode gehört, und die Dom-Einrichtungsmethode gehört zur App. Objekte dieser Methode gibt diese oder gibt App zurück. Also, wenn ich diesen Code hier in London 21 ausführe, komme ich mit der App, so dass ich einfach umdrehen und die Binds Reload Page-Ereignisbehandlungsmethode aufrufen konnte . Und dann, wenn diese Methode den Kauf von Reload-Seite Ereignishandler ausführt, habe ich dies zurückgegeben. Da die Ausführung dieser Funktion App zurückgibt, kann ich mich umdrehen und den ausgewählten Ereignishandler kaufen löschen und so weiter. Wenn also jede Methode das App-Objekt zurückgibt, bedeutet das, dass ich mich umdrehen und eine andere Methode für dieses Objekt aufrufen kann. Dies wird Methodenverkettung genannt und es ändert Ihren Code nicht effektiv in Bezug auf das, was Ihr Mantel tut. Aber es ermöglicht Ihnen, Code zu schreiben, der leichter zu lesen und ein wenig ausdrucksvoller . Denn wenn ich jemand anderes diesen Code schrieb und ich ihn geerbt habe, hat das erste, was ich bei Method Seeiso würde, eine Reihe von dieser App. Objekt hat eine Reihe von Methoden und ich rufe sie alle hier auf. Und all diese Methoden haben das App-Objekt zurückgegeben, das ist sicher. Es gibt keinen Zweifel in meinem Kopf, weil ich weiß, dass du das nicht schaffst. Sie konnten Shane nicht so verarbeiten, wenn diese Methoden die App nicht zurückgeben, Objekt- und Methodenverkettung ist wirklich einfach. Es müssen Sie nur das Objekt zurückgeben, zu dem diese Methode von jeder der Methoden gehört , mit der Sie Methoden einer einzigen Referenz auf ein Objekt verketten 28. "this" vs $(this): Lassen Sie uns einen Moment Zeit nehmen, um den Unterschied zwischen diesem gegenüber dieser Wrapped with Jay Query zu besprechen . Nun, wenn Sie kein Interesse an Jake haben, wo Sie sich frei fühlen könnten, diesen Vortrag zu überspringen, aber ich denke, die meisten Front- und Web-Entwickler, die ich mit J Query zu einem gewissen Grad gearbeitet habe und wahrscheinlich regelmäßig mit arbeiten. Es lohnt sich auf jeden Fall eine Minute zu nehmen, um den Unterschied zwischen diesen beiden sitzenden Rios und einigen der Probleme zu besprechen , die Sie in Ihrem Examples Ordner laufen können. Öffnen Sie den Kontext-Unterordner und öffnen Sie dann die Kontext-Datei im Vergleich zu diesem. Also hier iteriere ich über jedes der Verkaufspersonen don Elemente oder die Listenelemente in einer neuen Generation der einzelnen Methoden. Ich erstelle einen Klick-Ereignishandler und im Klick auf einen Handler sage ich, dass dieser Punkt ausblenden. Also lasst uns zuerst den Code ausführen und sehen, was wir bekommen. Also gehen Sie, um Beispiele und Kontext zu zeigen. Dieser Ansturm ist dieser hier. Also, jetzt habe ich den Code ausgeführt und klicke auf die Auswahlschaltfläche und ich bekomme einen Fehler, dieser Punkt Ausblenden ist keine Funktion. Alles klar, was ist das Problem? Wir werden sehen, ob wir es herausfinden können. Also das erste, was ich tun möchte, ist, dass ich Nummer fünf deaktivieren oder kommentieren möchte. Da das einen Fehler auslöst, es uns nicht wirklich helfen. Und dann füge ich in die Konsolenverzeichnisanweisungen ein. Die erste ist, dass ich das Job-Skript inspiziere. Dieses Schlüsselwort in der 2. 1 ist, dass ich das Job-Skript erwarte, dieses Schlüsselwort mit Jay Query umschlossen ist. Also lassen Sie uns diese Datei speichern und dann aktualisieren wir einfach die Seite und klicken Sie auf die Auswahlschaltfläche, und ich denke, Sie trösten ihre Aussagen. Schauen wir uns die 1. 1 Die 1. 1 ist ein dom-Element. Es ist ein rohes JavaScript-dom-Element, und die 2. 1 ist ein dom-Element, das mit Jake müde eingewickelt ist. Der Unterschied ist also, die 2. 1 ist die 1. 1, die mit Jake Weary Hope eingewickelt ist, was Sinn macht. Aber für die 1. 1 lassen Sie uns ein wenig nach unten scrollen und wir können sehen, dass es eine Stil-Eigenschaft gibt , und diese Stil-Eigenschaft hat eine Anzeigeeigenschaft auf dem Display. , Es kräht, auf eine leere Schnur gesetzt. Okay, also werden wir in einer Sekunde darüber reden. Die kurze Antwort ist also, dass dies das rohe Dom-Element ist, das derzeit iteriert wird , über das in diesem Fall geklickt wurde. Wo ist das Stellt dieses dom-Element mit Jake Weary gewickelt. Also ist es, ähm es ist, als würde man sich selbst nehmen und sich in einen Mantel stecken. Du bist immer noch, aber du bist mit einem Mantel umwickelt. , ähm Schauen wir uns die, ähm, wenn Sie sich die Akte ansehen, kontaktieren Sie das gegen das, was ich tun werde, ist zu sagen, dass dieser Punkt gestylt hat, der Display gleich keiner ist. Wenn Sie also den Kontext im Vergleich zu diesem ausführen und dann auf die Auswahlschaltfläche klicken, können Sie sehen, dass die Schaltfläche verschwindet. Und wenn ich auf andere Schaltflächen klicke, verschwinden sie einfach. Warum ist das so? Nun, wenn Sie sich daran erinnern, dass wir den Konsul Punkt dir dies getan haben Wir sahen, dass diese Jobs gehen Schlüsselwort, das ein Dom-Element ist, hat eine Stil-Eigenschaft und eine Stil-Eigenschaft hat eine Anzeige-Eigenschaft, und wir setzen es nur auf Nonnen. Der Punkt, den ich hier mache, ist nur zu veranschaulichen, dass das JavaScript dieses Schlüsselwort innerhalb dieses Click-Ereignishandlers nur ein rohes DOM-Element ist. Es hat nichts mit Jay Query zu tun. Wenn wir das gegen diese drei kontaktieren, ist etwas anderes, sagen wir, dass das mit Jake eingewickelt ist. Müde Punkt-Stil Punktanzeige gleich Nonnen Mal sehen, wie das funktioniert. Also, wenn wir gehen, um Codebeispiele Kontext zu zeigen, ist dies gegen drei und dann klicken wir auf die Auswahlschaltfläche. Wir erhalten einen Fehler kann die Eigenschaftenanzeige von undefined nicht gesetzt werden. Und das liegt daran, dass dieser Rapper Jay Query keine Stileigenschaft hat. Denken Sie daran, es ist das JavaScript, dieses Schlüsselwort oder es ist das rohe dom-Element, aber es ist mit J. Crew eingewickelt , also hat es verschiedene Eigenschaften und Methoden. Wenn Sie den Kontext öffnen, ist dies gegen vier. Der Unterschied ist, dass wir jetzt diesen Punkt hoch sehen. Also, wenn Sie Kontext ausführen, ist dies Versace vier und wählen Sie dann die Schaltfläche. Es verschwindet und es gibt keinen Fehler. Und das liegt daran, dass Jake Weary oder dieser schnelle Jake Weary eine Versteckmethode hat. Die Hauptsache ist also, dass das JavaScript, dieses Schlüsselwort von selbst, dieses Schlüsselwort von selbst, geneigt innerhalb eines Click-Event-Handlers ist nur das rohe, äh, äh, Javascript-DOM-Element. Und es hat eine bestimmte Reihe von Eigenschaften und Methoden. Wo ist dieses Floß mit Jay Query? Das ist ein J-Abfrageobjekt und es nimmt im Grunde dieses Objekt und umschließt es innerhalb von J Query, was ihm verschiedene Eigenschaften und Methoden gibt. Also denken Sie vielleicht, Nun, Nun, ich benutze eine Abfrage und ich benutze diesen Rapper Jay Query, und es ist in Ordnung. Nun, es gibt einige Situationen, in denen Jake das zurückgeben wird. Und du denkst, es wird dieser Rap mit Jake müde sein, wie wenn du einen J Coury Plug in kreierst . Es gibt einige knifflige Szenarien, also 99,9% der Zeit, Sie werden mit diesem Entwurf mit Jay Query zu tun haben, und das ist alles in Ordnung. Aber zwei Dinge. Eins. Es ist wirklich gut, den Unterschied zu verstehen und es wird kommen. Es wird eine Zeit geben, in der du denkst, du bekommst deine eine und du bekommst die andere oder du willst eins zum anderen umwandeln, und das ist alles in Ordnung. Aber du kannst diesen Weg nur hinuntergehen, wenn du den Zahn wirklich verstehst. Der Unterschied zwischen diesen beiden Dingen 29. Ein etwas mehr über Fehlerbehebung: zuvor diskutierten wir, wie wichtig es ist, einen anderen routinemäßigen Umfang und Kontext in Bezug auf die Fehlerbehebung zu verstehen . Nun, da wir ein wirklich solides Verständnis des Unterschieds zwischen den beiden haben, lassen Sie uns dieses Wissen und einige Codebeispiele anwenden und sehen, wie es uns helfen kann, Probleme zu lösen . 30. Problemlösung eines HandlungsProblem mit a: im Ordner Examples. Öffnen Sie den Unterordner zur Fehlerbehebung und schauen wir uns ein Beispiel für die Fehlerbehebung an. Also hier werde ich über all diese Verkaufspersonen Listenelemente wiederholen, und ich mache es irgendwie bin eine Art alte Schule Art und Weise und dass ich eine Augenvariable erstellen und einen Verweis auf den Verkauf setzen. Die Listenelemente in der Liste der Verkäufer dom Elemente mit dem Dokument eine Abfrage Selektor alle. Es ist nicht besonders schick, aber es gibt einen Grund, warum ich es so mache. Also habe ich eine Vier-Schleife erstellt, die wieder nur eine Art Art Art ist, etwas zu iterieren. Und in dieser Vier-Schleife suche ich nach dem Ersteller-Verweis auf den Vertriebsmitarbeiter. Also sage ich var Artikel gleich Verkäufer Augen. Also zuerst wird Vertriebsmitarbeiter Null Verkäufer, ein Vertriebsmitarbeiter zu und so weiter sein. Und dann sage ich Element, finde, dass diese Auswahlschaltflächen eine Auswahlschaltfläche für diesen Artikel finden. Und dann richte ich einen Click-Ereignishandler für dieses Element ein. Also am Ende des Benutzers klickt auf diese Schaltfläche auswählen, werde ich diese Ah, feine Variable als Elementvariable verwenden, um die de select-Schaltfläche zu finden und es zu zeigen, werde ich zuerst die Auswahltaste verbergen, die eine Abneigung Schaltfläche zeigte. Schaltet eine ausgewählte Klasse um. Mal sehen, wie wir hier draußen machen. Ich werde Beispiele zeigen und zum Fehlerbehebungsbeispiel Nummer eins gehen. OK, also führen Sie diesen Code aus. Und dann habe ich auf das erste Stück geklickt. Erste Schaltfläche auswählen. Also der Diesel es ist löscht wie der Knopf zeigt die ausgewählte die Auswahltaste, und ich klickte einen weg. Aber ich sehe nicht die De-Select-Schaltfläche für jedes Listenelement, und es wird nicht umgeschaltet. Die ausgewählte Klasse der linken Seite wird nicht grün, wie ich erwartet habe Wenn wir also etwas verkleinern, möchte ich Ihnen etwas wirklich Seltsames zeigen. Das passiert hier. Da ich beobachten konnte, was passiert, klicke ich auf jede Auswahlschaltfläche. Das letzte Listenelement wird umgeschaltet. Es wird grün und nicht grün grün, und sie sind nicht grün. Aus irgendeinem Grund, jedes Mal, wenn wir auf eine Auswahlschaltfläche e mit ein paar Problemen klicken, und das Hauptproblem ist, dass wir nicht sehen, die de Selekt-Schaltfläche für dieses Element, und das letzte Element in der Liste ist umschalten, was nicht das ist, was wir wollen. Wir wollen, dass ich bin, dass wir anklicken, um Tongling zu sein. Es schläft also. Finden Sie das Problem heraus. Nun, die erste Frage, die wir uns stellen müssen, ist Ist das ein Umfangsproblem oder ein Kontextproblem? Immer die wichtigste Frage. Also denke ich über Dinge nach, und ich denke, Nun, die flippige Sache, die passierte, war das letzte Element in der Liste war Kleinkinder, aber keiner der anderen war, und ich iteriere über eine Liste Ich verwende eine Variable, die zählt. Ich begann Null und geht auf den Wert der Verkaufspersonen, die Länge oder sagt Ihnen ohne Länge minus eins. Also denke ich, dass gut, wenn der letzte Wenn ich inkrementell bin und nur das letzte Element umgeschaltet ist, dann gibt es vielleicht ein Problem mit I. Und ich bin, ähm, ist variabel, das ist für Sicher. Also, wenn ich Variablen denke, denke ich Umfang. Warum machen wir das nicht? Lasst uns eine Konsole setzen. Ah, Ratserklärung, Insider-Klick-Event-Handler ging aus. Setzen Sie den Wert von I. Also denke ich, dass ich es bei jedem Klick zeigen sollte, wenn ich auf das erste Element in der Liste klicke. Ich sollte sehen, dass Sie wissen, dass ich gleich Null ist. Wenn ich auf die zweite Element-Agentur klicke, die ich gleich eins klicke Wenn ich auf das neunte Element bei U C klicke, entspricht ich neun und so weiter, weil dieser schnelle Ereignishandler referenziert, wissen Sie, ich haben dieses Item-Objekt erstellt, indem ich Verkäuferinnen und Verkäufer verweise. müssen auf jeden Fall wissen , dass wir den richtigen Wert von I für jeden Klick bekommen. Also lasst uns die Seite aktualisieren und sehen, wie wir es machen. Also werde ich anfangen zu klicken und wenn ich auf jeden Put klicke und ich bemerkte, dass es nur sagt, dass ich gleich 10 Jedes Mal, wenn ich gleich 10 bin, denke ich, ich sollte sagen, dass ich gleich Null ist. Ich bin gleich eins. Ich bin gleich zwei gleich drei. Aber nur ich gleich 10. Und es ist eine Art von Linie mit dem, was wir sehen, was das letzte Element in der Liste ist umschalten, nicht das Element wurde mit dem letzten Element in der Liste klicken . Also denke ich, dass ich nicht das ist, was wir denken, es iss und es stellt sich heraus, dass das richtig ist, denn was passiert ist, obwohl, wo wir iterieren, ich gehe von 0 zu 9. Das Problem ist, dass dieser Click-Ereignishandler auftreten könnte. Wissen Sie, die Anbetung geschieht in , Mikrosekunden,aber Millisekunden, aber der Klick auf die Verbesserung des Benutzers könnte in einer Minute, 10 Minuten oder 10 Stunden auf die Schaltfläche klicken. Aber diese Referenz toe ich nicht Augen nicht mit jeder Generation dieser Liste eingelöst. Sie alle feuern ab, und wenn Sie mit dem Klicken auf die Schaltflächen beginnen, ist ich 10. Also brauchen wir eine Möglichkeit, I zu schützen oder eine Bereichsversion von I zu erstellen . Wenn wir also auf die Seite zurückgehen und Fehlerbehebungsbeispiel Nummer zwei ausführen und anfangen, herumzuklicken , denke ich, Sie werden feststellen, dass alles genau wie erwartet funktioniert. Wenn Sie auf ein Element klicken, wird die Schaltfläche de Select angezeigt und Tacos grün und das letzte Element verhält sich nur so, wenn Sie darauf klicken. Also bekommen wir das Verhalten, das wir erwartet haben. Die Frage ist, warum? Nun, der Grund, der passiert ist, ist, weil, wenn Sie sich die Fehlerbehebung für das, was wir getan haben wir einen sofort aufgerufenen Funktionsausdruck oder eine sofortige Funktion hier verwendet haben, und wir bekommen diesen Artikel, wir übergeben es in die Funktion, und dann haben wir unseren Code. Im Grunde erhält unser Code eine private Version von diesem Element, und das behält bei, dass, wenn das Element auf die Auswahlschaltfläche tatsächlich geklickt wird. Wir haben ich Null I eins ich zwei oder drei jetzt will ich nicht wirklich zu viel in unmittelbare Funktionen und Schließungen bekommen , weil das definitiv Zeug ist, dass wir eine ganze Klasse haben könnten. Aber der Punkt, den ich hier mache, ist, dass wir uns die Frage gestellt haben. Ist dies ein Umfangsproblem oder ein Kontextproblem? Und durch ein wenig Logik haben wir festgestellt, dass es sich um ein Umfangsproblem handelte und das uns ermöglichte, schnell einen Drilldown durchzuführen und herauszufinden , wo das Problem passierte und wie es zu lösen ist, auch wenn wir nicht die Antwort darauf hatten, wie wir es lösen können es jetzt, zumindest herauszufinden, was das Problem ist. Es war kein Kontextproblem. Es war ein Umfangsproblem. Und das ist die Sache, die in diesem Fall wirklich wichtig ist, war festzustellen, dass dies für dieses Beispiel ein Bereichsproblem war, und es wurde gelöst, indem die richtig bereichsbezogene Version von I oder diesem Elementobjekt erstellt wurde, in das wir übergeben wollten unseren Click-Event-Handler 31. Kontext beheben: Öffnen Sie die Datei Problembehandlung Beispiel. Drei. Also hier habe ich ein Objekt namens App erstellt, und dieses APP-Objekt hat zwei Eigenschaften. Die 1. 1 ist eine Methode namens Show Delete ausgewählt und das zeigt nur, dass die ausgewählte ah Schaltfläche löschen . Und die zweite Methode heißt Verkäufer Ally es Belüfter. Und das wird als iterierter er für jeden Vertriebsmitarbeiter Verbündeten verwendet. Also hier unten unter Hinweis auf die einzelnen Methoden auf Vertriebsmitarbeiter. Verbündete. Das passiert also 10 mal, und jedes Mal, wenn es passiert, wir übergeben es App, dass Verkäufer es Belüfter. Das wird also 10 Mal ausgeführt. Und wenn es bei jeder Ausführung ausgeführt wird, die wir einrichten. Ah, klicken Sie auf Ereignishandler für diese Listenelemente wählen Sie die Schaltfläche. Also lassen Sie uns Beispiel Nummer drei laufen und sehen, wie wir machen so Fehlerbehebung Beispiel Nummer drei. OK, also haben wir den Code ausgeführt und dann wähle ich eine der Schaltflächen aus und ich bekomme einen Fehler. Okay, also lassen Sie uns einen Blick auf diesen Fehlertyp werfen er, dieser hat gestoppt. Zeigt an, dass der ausgewählte Lead keine Funktion ist. Nun, was ist die erste Frage, die wir uns stellen wollen, wenn wir Probleme beheben? Wir werden uns nicht fragen. Ist es ein Umfangsproblem? Oder ist es ein Kontextproblem? Und ich muss sagen, dass ich, wenn ich das JavaScript sehe, dieses Schlüsselwort in einem Fehler, ziemlich das Gefühl habe, dass es ein totes Werbegeschenk ist. Es ist sehr unwahrscheinlich. Es ist kein Kontextproblem, weil ich das Wort dieses sehe. Also nein, es könnte Umfang sein. Aber ich werde mit Kontext auf diesem gehen, weil ich sehe, dass dieses Schlüsselwort Also, ähm, wo ich anfangen soll, denke ich, ich werde diesen Code einfach kopieren. Und wenn ich dann zu unserem Code gehe, werde ich nicht tun, ist nach diesem exakten Code zu suchen und zu sehen, wohin es uns führt, und es dauert uns die Zeile 22. Also denke ich, da fängt unser Problem zumindest dort an. Warum kommentiere ich also nicht diese Codezeile aus, verhindere das Problem, und was ich dann tun werde, ist, dass ich denke, wenn das Problem ist, haben sie aufgehört. Löschen ausgewählt anzeigen. Wir müssen mehr darüber wissen. Was ist das? Online 22. Nun, ich werde hier einen Konsul Dreck machen, und wir können das inspizieren, nur um herauszufinden. Ist das wirklich, was wir denken, es ISS Und denken Sie daran, wenn wir das Schlüsselwort sehen, denken wir Kontext, so ist der Kontext. Was wir denken, es ist online. 22. Speichern Sie das und gehen Sie zurück und aktualisieren Sie die Seite und klicken Sie dann auf die Schaltfläche Auswählen. Und ich sehe etwas hier in der Konsole usw. usw. Aber nicht auswählen. So sieht das für mich wie ein dom-Element aus. Ich meine, ich sehe Eigenschaften wie Kind kennt und Kinder und Klassenliste und, ähm, diese Stil-Eigenschaft. Das ist also ein Domino für ihn. In der Tat ist es das Element, das gerade angeklickt wurde. Das bedeutet, dass ich online 22 denke, dass dies der Kontext dieses App-Objekt ist. Und ich könnte dieses Stunt-Schulterkabel wählen. Aber es stellt sich heraus, dass diese Online-22 tatsächlich auf die Schaltfläche aufgelöst wird, die gerade angeklickt wurde . Diese Schaltfläche hier und das macht durchaus Sinn, da dies der Click-Ereignishandler ist und der Click-Ereignishandler im Kontext des Moments ausgeführt wird, auf den geklickt wurde. Es stellt sich also heraus, dass dies nicht das ist, was wir angenommen haben. Der Kontext ist anders, als wir dachten. Wir haben das herausgefunden, indem wir Ratsdreck gemacht haben, also müssen wir das in Ordnung bringen. Also lassen Sie uns einen Blick auf die Fehlerbehebung Beispiel. Nummer vier. zuerst Lassen Sie unszuerstlaufen und sehen, wie es funktioniert. Also, wenn Sie das Beispiel zur Fehlerbehebung gehen, Nummer vier führen Sie diesen Code aus und wir klicken Sie auf Auswählen. Und in jedem Fall, wenn wir auf die Auswahlschaltfläche klicken, verschwindet die Auswahlschaltfläche. De select zeigt und das Element es die ausgewählten Klassen umschaltet. Alles funktioniert, wie wir es erwartet haben. Lasst uns herausfinden, warum. Nun, was ist mit meiner Nummer passiert? An bei der Fehlerbehebung? Beispiel Fours Online 22. Anstatt zu sagen, dass diese Gedankenshow löschen ausgewählt, sagten wir, APP sollte nicht löschen ausgewählt zeigen. Und der Grund, der funktioniert, ist, dass APP eine globale Variable auf wegen lexikalischer ist. Scoping diese Funktion ist Callback-Funktion hat Zugriff auf die Variablen außerhalb davon definiert . Es kann außerhalb von sich selbst sehen. Also verweisen wir nur auf App statt dieser und wir sagen App, die Löschen ausgewählt zeigt und es funktioniert gut. Nun, ein Teil der Art und Weise, wie wir das beheben, ist, wenn Sie sich an ein Beispiel erinnern. Nummer drei. Wir haben gerade eine Referenz-toe-App übergeben, die Vertriebsmitarbeiter es Belüfter an jede Iteration von Vertriebsmitarbeitern Verbündeten übergeben. Aber hier Beispiel vor einer der Dinge, die wir auch getan haben, ist, dass wir hier eine Callback-Funktion übergeben und dann führen wir an diesem Salespeople iteriert. Und das ist auch eine Möglichkeit, das Problem zu lösen. Weil jetzt App, dass Vertriebsmitarbeiter es Belüfter nicht im Kontext der Schaltfläche ausgeführt wird , wird gerade ausgeführt. Also und was klingt seltsam? Ich will nicht zu tief in das hineinkommen. Aber der Punkt, den ich hier mache, ist, dass wir den Kontext ändern, in dem App, die Vertriebsmitarbeiter, es Belüfter ausgeführt wird. Und wir verweisen auch einfach nur auf die App globale Variable erscheinen Teoh lösen unser Problem. Nun, wenn Sie ein Beispiel in fünf schauen, gibt es einen anderen Weg, wie wir es tun könnten, was? Wir setzen einen Verweis darauf, indem wir eine Variable namens me und hier unten in Zeile 21 haben wir mich referenziert. Was passiert ist, ist wieder einmal, dass wir den Kontext geändert haben, in dem die App, die Vertriebsmitarbeiter jetzt ausgeführt werden, im Kontext der App ausgeführt wird. Also, das bedeutet hier oben haben wir Verweis auf die app um Variable, aber wir können es durch diese referenzieren, zum Beispiel, von Ich war zu einem Rat Durst Erklärung erscheinen in dieser Zeile auf Zeile 17. Wir können sehen, was das bei jeder Ausführung von Dysfunktion ist. Also werde ich zum Beispiel zur Fehlerbehebung gehen. Nummer fünf. Führen Sie das aus und ich bekomme 10 Objekte meiner Konsole und jedes Objekt ist identisch. Es ist das App-Objekt. Es muss die ausgewählte Methode löschen und die iterierte Methode des Verkäufers anzeigen. Sie sind jedes Mal dasselbe Objekt. Und der Grund, warum wir das sehen, ist, weil, wenn wir ihre Zeit ausführen, jedes Mal, wenn seine Funktion ausgeführt wird, diese online 17 löst sich auf App. Und das ist gut. Wir mögen das, weil dann können wir einen Verweis auf diese setzen, die ich Variable erstellen ist. Und diese Funktion kann außerhalb von sich selbst sehen, weil lexikalische Scoping. So können wir mir sagen, dass gezeigt löschen ausgewählt. Das ist ein bisschen hacky. Und wenn Sie ECC rescript 2015 entdeckt haben, können Sie mittlerweile wissen, dass fette Pfeilfunktionen im Wesentlichen Hilfe bei der Lösung dieses Problems gesucht haben. Ähm , das ist definitiv Thema für eine ganze andere Klasse. Wir können in das Feuer von Funktionen kommen. Aber im Moment versuche ich darauf hinzuweisen, dass wir Schwierigkeiten haben wollen, unsere Probleme zu lösen. Way wollte. Ermitteln Sie zuerst, ob es sich um ein Umfangsproblem oder ein Kontextproblem handelt. Und wenn wir die Antwort auf diese Frage kennen, können wir eine Art Drilldown und verschiedene Techniken verwenden, um das Problem zu lösen. Aber zu wissen, welche Art von Problem es ist, macht wirklich einen großen Unterschied darin, herauszufinden , wie werden Sie herausfinden, wo das Problem begonnen hat und wie Sie es lösen können ? 32. Kursprojekt: Bevor wir gehen, würde ich mir gerne einen Moment Zeit nehmen, um über unser Klassenprojekt zu sprechen. Dieses Klassenprojekt besteht aus zwei Teilen. Teil eins besteht darin, das Acme Travel Vertriebsteam dynamisch aufzubauen, und Teil zwei ist das Beispiel Wieder Faktor. Web-Seiten-Code. Reden wir über Teil eins. Zuerst, den Akt auszubauen. Wir reisen das Verkaufsteam dynamisch. Also im Moment die Beispiel-Webseite, die Sie für die letzte Stunde gesehen haben, hat HTML für das Travel Acme Travel Sales Team, dass HTML hart codiert theatralischen Index dot html Datei hat immer Markt, dass Sie auf der linken Seite sehen, und dass -Markup wird in der U I gerendert, wenn die Seite geladen wird. Ich bin nicht allzu begeistert von diesem Ansatz, denn wenn wir einige Änderungen vornehmen wollten, würde es das Graben in den HTML beinhalten. Und ich denke, das ist irgendwie chaotisch für eine Job-Skript-Anwendung. Ich würde gerne alles mit Java-Skript kontrollieren. Also, was ich für Sie suchen, ist hacken Sie diesen Ansatz und konvertieren Sie die Akne-Reise-Verkaufsteam Informationen zu Jason Data und dann führen Sie, dass Jason Data durch einen JavaScript-Code und Ihr JavaScript würde dann füllen und in der Bestellliste und dann Rendern, dass eine nicht geordnete Liste auf der Webseite. Das mag wie eine Herausforderung erscheinen, aber ich denke, wir haben viel Zeit damit verbracht, den Unterschied zwischen Umfang im Kontext und JavaScript zu diskutieren , und Sie können dieses Wissen nutzen, um diese Aufgabe zu erfüllen. Ich denke, du hast die Werkzeuge, die du brauchst, um es zu erledigen. Teil zwei unseres Klassenprojekts beinhaltet das Wieder Factoring des Beispiel-Webseiten-Codes. Was ich speziell meine, ist, dass ich nach Ihnen suche, um sich wiederholenden Code zu beseitigen, hartcodierte Werte im Java-Skript zu entfernen und dann aufgeblähte Funktionen zu beschneiden. Also, wenn wir in einen Code springen, kann ich Ihnen genau zeigen, was ich hier mit beiden Teilen des Klassenprojekts bekomme, Werfen Sie einen Blick auf den Dateiindex dieses Altersteams. Nun, ganz unten in dieser Datei, sehen Sie einen Verweis auf App dot Js. Schauen wir uns in Js Schrägstrich ap dot Js Also in Jazz-App dot Js Dies ist der Code, den wir diesen Code in dieser Klasse nicht besprochen haben , aber es ist der Code, der hinter den Kulissen läuft, der einfach diese Anwendung aufbaut . Es bietet vor allem diese Funktionen. Es ermöglicht Ihnen, die Beschichtung zu laden, den Code auszuführen, Beispiele direkt von der Seite. Das war's meistens. Ähm, aber was ich tue, ist, dass ich zu diesem Start in einer App laufe, die ich anrufe, Apt-Upload-Beispiele. Jason. So treffend. Laden Sie Beispiele hoch. Jason, ich mache einen Ajax-Anruf für diese Akte. Also lassen Sie uns das kopieren und schauen Sie sich die Datei an. Und wenn ich den Rest einfach raushacke und hierher gehe, siehst du, dass das der eigentliche Jason ist, den ich bekomme. Dieser Jason steht für das, was du hier im Dom siehst. Alle diese Beispiele sind diese Liste, lassen Sie diese eine Liste von Beispielen angeordnet. Code-Links werden dynamisch im laufenden Betrieb generiert. Und ich benutze ah, Js Beispiele dot Jason. Dieser Code, den Sie hier sehen, ist genau das, was Sie hier sehen. Okay, was passiert ist, dass ich, ähm, ich lade diesen Jason. Und wenn das gelingt, wird diese Methode aufgerufen, und ich habe die Beispiele von Beispielen im Jason iteriert und für jedes Beispiel erstelle ich eine Liste, die ich bin, und ich kann dies beweisen, indem ich hier vielleicht nur eine Zeichenfolge abhänge wo ich sage Beispiel Punktname . Und wenn wir die Seite aktualisieren, werden Sie feststellen, dass ich das Wort Holo nach jedem Artikel hier bekomme. Also, ähm, der Punkt hier ist, dass ich nur das zeigt Ihnen, dass hier diese Liste von Beispiellinks erstellt wird. Und wie ich jedes Listenelement erstelle ich an Sie l Punkt Beispiel Sophie angehängt, wir inspizieren die Seite, Sie werden sehen, es gibt eine UN bestellt eine Liste mit den Klassenbeispielen. Dies ist Ul Dot Beispiele hier, also baue ich es hier. Ihr Projekt, Ihr erstes Projekt, wäre also Ihr erstes Projekt, , genau dasselbe mit der Liste der Vertriebsmitarbeiter zu tun. Also dieses Markup, richtig? Uh, hier auf der Seite, all diese Verkaufspersonen, die Sie sehen, die im HTML tatsächlich hart codiert sind. Wenn Sie auf den Index, diesen HTML-Code zurückblicken , beginnt dies Ihre Liste der Vertriebsmitarbeiter direkt hier online. 29. Also Verkäufer Null sagt Person Warnungen und so weiter. Aber das sind die Verkäufer. Hier ist ein spezieller Vertriebsmitarbeiter, Bobby Carney. Und wenn ich die erste Person ansehe, ist es Bobby Carney. Ihr Projekt wäre also, diesen Markt zu nehmen, was wirklich, ähm, es ist chaotisch, richtig? Denn wenn ich die Art und Weise ändern möchte, wie diese Listenelemente erstellt werden, muss ich jede dieser Listeneinträge im Markup ändern. So hart codiertes Markup ist in solchen Situationen nicht wirklich gut. Es ist besser. Es ist normalerweise besser, es dynamisch zu tun, damit Sie mehr Kontrolle haben. Sehen Sie also, ob Sie einen Weg finden können, den exakt gleichen Ansatz zu verfolgen. Nimm diese Listengegenstände, die Daten und diese Listenelemente zuerst in Jason. Möchten Sie diese Informationen direkt hier für jeden Vertriebsmitarbeiter konvertieren? Sie möchten diese Informationen in Jason umwandeln, die in ähnlicher Weise formatiert ist. Und dann willst du diese Jagd nennen und genau wie wir es hier tun und wenn du das Jason mit Ajax anrufst , dann willst du die Verbündeten für jeden Verkäufer aufbauen, dann willst du die Verbündeten für jeden Verkäufer aufbauen, und du willst es auf die Seite schieben, damit du zuerst mit Dieser hier. Bestellte eine Liste und du leerst sie aus. Wer das mag. Wenn ich das jetzt speichere, laden Sie die Seite neu. Wir kriegen keine Verkäufer, also ist es die Lippen rausgezackt. Also möchten Sie diese Liste heraushacken und Sie möchten dies nehmen, um diese Markierung aufzulisten und Sie möchten das in Jason konvertieren und dann möchten Sie es in die Seite ziehen, die dynamisch konstruiert ist. Es sollte nicht zu schwierig sein, aber es erfordert, dass Sie das Verständnis von Umfang und Kontext, das Sie in dieser Klasse gewonnen haben, nutzen , um die Job-Gruppe aufzubauen, die dynamisch diese Liste von Vertriebsmitarbeitern in Ihrem Beispiele Ordner, öffnen Sie den Kontakt einige Ordner und wählen Sie dann eine Dateimethode Verketten Jetzt, wie ich bereits erwähnt, diese, uh, Datei enthält eine Re-Factor-Version von all unserem Code, den wir in dieser Klasse angesehen haben, und es ist ein bisschen klarer und, meiner Meinung nach, einfacher zu ah, zu lesen. Aber ich verwende diese spezielle Datei, weil sie den vollständigen Anwendungscode enthält. Also, wenn wir diese Datei in diesem Beispiel in der Seite Methodentraining ausführen, erlaubt es uns, alles zu tun. Wir können einen Vertriebsmitarbeiter auswählen und einen Vertriebsmitarbeiter auswählen, mehrere Vertriebsmitarbeiter auswählen, schwächen, jeden Vertriebsmitarbeiter einzeln löschen, oder wir können mehrere Vertriebsmitarbeiter auswählen und die ausgewählten löschen. Und wenn wir Vertriebsmitarbeiter löschen, nimmt die Gesamtzahl des Vertriebsteams ab. Und zu jeder Zeit können wir die Seite neu laden. Also, aber es gibt zwei Dinge in diesem Code, die ich denke, wirklich nutzen könnte, um zu verbessern. Zuallererst gibt es viele hart beschichtete Saiten. Zum Beispiel haben wir Vertriebsmitarbeiter Verbündeter und Gesamtverkäufer Container. Ich meine, das sind nur Saiten. Und wenn ich diese Referenz ändern möchte, wenn ich die I. D-Vertriebsmitarbeiter ändern möchte , nun, wie oft erscheint das in meinem Code? Es erscheint fünfmal in meinem Code. Wenn ich also den Dummen und vielleicht in unserem Markup kam, änderten wir, wissen Sie, wissen Sie, Vertriebsmitarbeiter zu Team Nun, dann muss ich herausfinden, wie oft in meinen Code-Verkäufen, die Verkaufspersonen tritt auf und ich muss jeden von ihnen in Team ändern, und das ist wirklich mühsam. Und das wollen wir nicht tun. Ich wünschte, wir könnten so etwas tun. Ändern Sie es einfach hier und boom. Es ändert jeden anderen Ort oder jeden, der auf dieses Element verweist. Nur das bekommt dieses eso wir wollen nicht wir wollen Wir wollen diese hartcodierten String-Werte hier nicht haben . Wir wollen einen besseren Weg finden, dies zu tun. Und die zweite Sache ist, dass wir auch einen wiederholten Code haben, wenn es darum geht, ähm, wir haben Funktionen, die wirklich groß sind, die wiederholten Code wie Binden von Benutzerelementen, Ereignishandlern haben. Nun, das geht von Linie 74 Abschlepplinie, ein Zwanziger. Das sind fast 50 Codezeilen für eine Funktion, was ziemlich viel ist. Und eine Menge davon ist, dass wir sehen Herbst, das Element, das etwas auf Klick-Element finden, das etwas anderes auf Klick und Element, das etwas anderes finden auf Klick. Also denke ich, dass jeder von ihnen in eine Unterfunktion se ausgebrochen werden könnte, und dann könnte dieser in eine Unterfunktion ausgebrochen werden, und dann könnte dieser in eine Unterfunktion ausgebrochen werden. Und in jedem Fall brauchen alle diese Funktionen definitiv Argumente. Sie müssen also, ah, einen Weg finden, jede Funktion zu übergeben, die Argumente, die sie tun muss, was sie tun muss. Aber das ist so viel einfacher zu lesen. Ich meine, diese Bindung Benutzerelemente, Ereignishandler Methode hat jetzt 14 Codezeilen im Gegensatz zu 50. Es ist ein großer Unterschied, dass es auch einfacher zu lesen ist. Und wenn wir beschlossen haben, dass wir die Art und Weise ändern wollten, wie der Code zusammengesetzt ist, könnten wir das einfach tun. Aber es ist einfach so viel einfacher zu betrachten und zu verwalten. Die beiden Dinge, die Sie in Ihrem zweiten Projekt tun möchten, sind, alle hartcodierten String-Liberalen in unserem Code zu entfernen . Sie können sie als Variablen oder Eigenschaften eines Objekts festlegen, das vollständig Ihnen überlassen ist. Es gibt mehr als einen Weg, um es zu gehen, und wir waren auf der Suche ist, wie Sie entscheiden, dass Sie Toe re Faktor den Code von all diesen hartcodierten String Liberalen loswerden wollen . Und die zweite Sache ist, dass wir alle großen Funktionen wie diese neu faktorieren wollen, so dass der Code innerhalb von in kleinere Funktionen aufgeteilt wird. Aber Sie werden definitiv Ihr neues Verständnis für den Unterschied zwischen Umfang im Kontext nutzen müssen , um diesen Funktionen die Argumente bereitzustellen , die sie benötigen, um die Arbeit zu erledigen, die Sie sie bitten, mit dem Klassenprojekt. Ich freue mich sehr darauf, zu sehen, was du dir einfällt. Wenn Sie irgendwelche Fragen haben oder Sie das Gefühl haben, dass Sie irgendwo stecken bleiben, wenden Sie sich bitte an uns. Und ich werde dir folgen und alles tun, was ich tun kann, um dir zu helfen. 33. Vielen Dank!: vielen Dank für die Anmeldung in dieser Klasse, in der wir über den Unterschied zu Teams, Umfang und Kontext in JavaScript gelernt haben . Ich hoffe, das war hilfreich für Sie. Begleiten Sie mich bei Blogger dot kevin Chisholm dot com, wo Sie Tonnen von Artikeln und Editorials über viele verschiedene Web-Entwickler-Themen finden . Danke nochmals vom Rollen, und ich werde dich das nächste Mal sehen, wenn wir schulden.