>> Alles klar, so heute, Ich werde reden
über JavaScript und wie es ist unterscheidet sich von anderen Sprachen
dass Sie vielleicht verwendet werden, um PHP mögen.
So in der letzten Vorlesung auf Montag, sprachen wir ein wenig
über das, was ist ähnlich, was ist zwischen JavaScript vertraut
und PHP oder Python oder Ruby oder C oder anderen Sprachen
dass Sie bereits sind vertraut mit.
Aber es eigentlich JavaScript hat eine wirklich einzigartige nehmen
auf dem Objektmodell, das macht es ist irgendwie ganz anders
als die meisten Sprachen, Sie gehen zu bewältigen.
So Funktionen sind eine Art
von unterschätzt Konzept in JavaScript.
Sie sind viel stärker als sie sind in anderen Sprachen
weil sie es können in - aus einem Grund,
sie sind in der Lage zu sein, als Werte gesetzt.
Also hier haben wir var x gleich Funktion
und es ist ein First-Class- Wert, der übergeben werden können
um als Argument.
Sie brauchen also nicht zu haben, erklären Funktion x
und verwenden Sie nur x in diesem Umfang.
Sie können den Wert von x geben überall im ganzen, wissen Sie,
als Argument in eine andere Funktion
wo Sie den Export-Modul als David in Knoten genannt.
Also das nächste Punkt ist,
dass eine Funktion ist Objekt in JavaScript.
So können Sie tatsächlich eingestellt Eigenschaften Werte
auf eine Funktion und nur behandeln es mögen es eine Aufgabe ist.
Also, wenn Sie mit der Arbeit jQuery, wissen Sie, dass die Dollar-
und dann können Sie weitergeben ein Wähler in sie
und rufen Sie es als eine Funktion.
Aber dann haben Sie auch dot AJAX-Dollar haben.
Und das nicht irgendwie Sinn machen, wenn Sie denken,
einer Funktion nur als etwas, das man aufrufen kann
oder anrufen.
Aber JavaScript können Sie eingestellten Eigenschaften auf Funktionen
als statische Eigenschaften mit nur x dot someProp
wie ich darauf hingewiesen dort.
Der nächste Punkt, den wir werde in ein wenig mehr gehen
in der Tiefe ist, dass Funktionen behandelt werden
als Klassen in JavaScript.
So gibt es das Konzept dieser neuen Betreiber
welche eine neue Instanz erzeugt die Funktion zusammen mit einer Art
der wie Klasse artigen Körper die zusammen mit ihm kommt
und wir werden gehen in sie ein wenig mehr,
es heißt der Prototyp.
Und es ist, was macht JavaScript-sehr einzigartig im Vergleich
zu anderen Sprachen welcher Klasse basieren,
JavaScript ist ein Prototyp basiert.
Und dann nur bei der Boden dort,
Funktion kann nur aufgerufen werden deutlich, wie wir es gewohnt sind.
Also das ist nichts Neues.
Eine andere Sache, die einzigartig ist
dass Arrays sind eigentlich Objekte.
Sie sind nicht wie sie in PHP
wo Sie gerade erstellen ein neues Array.
Dies ist eigentlich eine Abkürzung zu sagen neues Array.
Und Array ist eigentlich ein Unterklasse eines Objektes.
Also das ist etwas, anders und ich werde gehen
in einem ein wenig mehr Detail auf die.
Und die Debugging-Funktionen
mit JavaScript sind wirklich unübertroffene soweit ich gesehen habe.
Dies ist ein Screenshot des Chrome-Inspektor
, die wir zu gehen werden mit für den Rest
der Präsentation heute.
Und um diese nur bekommen, können Sie gehen Sie zu Datei-Entwickler-Tools
und offene Chrome Inspector oder Sie können rechts klicken
und klicken Sie auf Showelement I denke, es ist auf HTML-Seite
oder ich denke, es ist Befehl J Option eröffnet sich.
Aber wir werden in diese gehen und Sie tatsächlich Haltepunkte
wie Sie durch laufen der JavaScript-Code und Art
von bewerten, was die lokale Variablen sind, was den Wert
dieser ist es, und es macht Weg leichter zu debuggen Code.
Und tun nicht - das ist nicht browserseitigen Code eingeschränkt
aber man kann tatsächlich führen Sie eine Instanz
dieser Chrome-Inspektor für Ihre Service-Seite Code
was wirklich nett ist, weil Sie kann durch die Linie durch die Leitung Schritt
wie eine Anforderung kommt Ihr in Server und sehen, was passiert
und mit den Variablen spielen in der Konsole hier unten.
Also wie ich bereits erwähnt, JavaScript ist ein Prototyp-basierte Sprache
was bedeutet, dass es einen Satz von Standardwerten, die Art sind
der für jede Funktion versteckt
in der Objektpunkt prototype-Eigenschaft.
Also ist es eine Art von Hash nur verschiedene Standardwerte
dass, wenn Sie rufen ein funktionieren mit dem neuen Schlüsselwort
diese werden durch gesetzt Funktionen wie die Standard
die verfügbar sind, auf der Instanz.
Also das ist eigentlich wirklich effizient für die -
es ist eine effiziente Möglichkeit, Erstellen von Objekten Speicher weise
weil der JavaScript Laufzeit hat nur den Überblick zu behalten
der Prototyp des Objekts.
Sie verweist auf eine Art, dass
wenn Sie eine neue cretae Instanz einer Klasse.
Und Sie können auch imitieren Vererbung ist bekannt
in klassenbasierten Sprachen wo Sie Art haben
der wie eine dieser erstreckt, dass sich, dass Sie nachahmen können
dass in JavaScript durch, was heißt das
Prototypkette.
Und wir werden sehen, Beispiele darüber.
Also, wenn Ihr - jQuery-Plugins tatsächlich sie empfehlen jQuery
Autoren-Dollar-Punkt verwenden fn, um die Funktionalität hinzufügen
auf die jQuery-Bibliothek.
Und wir sind tatsächlich zu springen, um - Also, auf dieser Seite,
wir haben den Dollar - Ich jQuery enthalten.
Und wenn Sie tun Dollar dot in der Konsole
die ich erwähnt bringen Sie über die Befehls Verschiebung J
oder einfach nur zu sehen, Entwickler, Entwickler-Tools
und gehen auf die Registerkarte Quellen.
[Inaudible Bemerkung]
Oh, sicher. Also, als ich begann auf den Typ in eine Variable,
Für mich ist es automatisch vervollständigt was da ist, zur Verfügung.
Also tippte ich in Dollar und ich kann Ich denke, siehe Chrome hat einige
Einbau-Dollar, Dollar und Dollar-x.
So jetzt möchte ich nur Dollar und ich in einem Punkt.
Und dann zeigt er mir Alle Eigenschaften
die verfügbar sind, auf dem jQuery-Objekt.
Aber wenn ich zu tun Dollar dot Prototyp
Ich sehe jetzt, alle Methoden dass ich der Verwendung verwendet
wenn ich den Dollar, Wahl und dann die Kette aus, dass ich mit,
Sie wissen, Klasse hinzufügen oder anhängen oder Unschärfe oder einen dergleichen.
Das sind alles eigentlich am Prototyp
was unter der Haube die jQuery erzeugt eine neue Instanz selbst
und es irgendwie blendet alle diese Angaben von Ihnen.
So ist der Punkt, dass ich was hier wieder über
mit der Funktion, sie Prototyp tatsächlich vor Ihnen zu verbergen
und gerade Alias ​​es Dollar dot fn.
So sind die meisten Menschen tatsächlich nicht erkennen,
dass es einen Prototyp unter der Motorhaube that -
dass Sie anzapfen können und zusätzliche Funktionen hinzufügen
zu jedem jQuery-Instanz , wenn Sie möchten.
So ist die "neue" Betreiber ist wirklich eine Art schwer
auf den ersten zu verstehen.
Wenn Sie eine Funktion aufrufen mit "neuen",
es ist eine ganz andere Art der Aufruf der Funktion
als ob Sie gerade genannt es klar und deutlich.
So ist das "neue" Betreiber erstellt eine sogenannte neue Instanz
eines Objekts oder einer neuen Instanz, die Sie denken können
des Objekts als eine Klasse.
Und wenn dies geschieht, wird der Wert Dies kann die vertraut sein
mit von jQuery, sie setzen diese Art von
zu was auch immer ist bequem zu der Zeit.
Sie sind meist mit den eingestellten aktuellen DOM-Knoten, der du bist
auf, wie Sie gerade durchmachen wie jedem oder so ähnlich.
Sie - Dieser Wert soll Um den Wert der Instanz sein
dass Sie mit "neuen" erstellt, das beinhaltet alles, was
auf der Prototypkette und alle der Methoden, die Sie finden möchten
als Prototyp Eigenschaften.
Also es hängt davon ab, wie eine Funktion aufgerufen wird,
was der Wert ist.
Und es ist wirklich verwirrend Wenn Sie neu in JavaScript.
Aber jede Funktion, die aufgerufen hat einen - hat bei diesem Wert.
Also selbst wenn Sie nicht erstellt haben eine neue Instanz von etwas,
Dies wird angenommen, dass global sein.
Oder Sie können eine Funktion aufrufen mit der Call-Methode
wo die Methode anwenden in JavaScript.
Sie können die Funktion und angeben, was das sein sollte.
So können Sie es dynamisch, das ist wirklich mächtig ist
sondern auch können Sie tun Dinge, die irreführend sein kann
und verwirrend andere Entwickler
wenn sie nicht zu verwenden, um der Tatsache.
Und jQuery, würde ich behaupten, macht es noch verwirrender
indem es bequem und wenn er
der aktuellen DOM-Knoten.
Aber die einfache Regel zu erinnern was der Wert ist
wenn Sie suchen
bei einem Funktionsaufruf ist was ist der Punkt links.
Also, wenn Sie ein Objekt haben
und es ist etwas Punkt etwas, ist die Funktion
Sie rufen dann sind die erste Wert ist, was den Wert
dieser ist.
Also hier ist ein Code-Beispiel
wo ich die Schaffung ein neues Objekt wörtliche
Das ist nur das Objekt mit den geschweiften Klammern erstellt
und ich habe die Einrichtung Namen Bob
und dann habe ich eine sayName Verfahren hier der -
so in diesem sayName wenn ich x dot sayName,
Der Wert dieser gleich ist x, weil die linke
der Punkt x ist. Also, wenn Ich nenne es x dot sayName,
es würde sagen, Hallo Bob.
Und dann ein weiteres Beispiel
wo ich bin eigentlich zuweisen x dot sayName die Funktion
der Variablen Y, die, wie ich bereits erwähnt
Sie in JavaScript können Funktionen zuweisen
Variablen, wann immer Sie wollen, es ist wirklich flexibel, dass Art und Weise,
aber jetzt, wenn ich rufe Y, es ist der Kontext von x verloren.
So ist dies nun global oder wenn Sie im strikten Modus sind,
Ich glaube, es ist null oder undefiniert.
Aber - so y ist nicht, was du bist erwarten Sie hier, wenn Sie schauen,
bei x und du gehst zu sayName nennen,
Sie erwarten, diesen Namen soll Bob sein.
Aber wenn du es durchgezogen das Objekt und nannte es
von selbst, das ist jetzt global.
Und das ist, was ich erwähnens wenn Sie sehen, diese dot-Dollar,
Sie haben oft nicht denken , was tatsächlich vor sich geht.
Aber jQuery Art hat ihre eigenen domänenspezifischen Sprache
für den Umgang mit diesem und es ist nicht, was Sie gewohnt sind
um in JavaScript.
Und ich weise darauf hin, weil es wirklich wichtig ist
für das Schreiben von gut strukturierten objektorientierten Code
in JavaScript, um wirklich ein gutes Verständnis und Gespür
wie das funktioniert und wie Das Objektmodell Arbeiten
und wie der neue Betreiber funktioniert.
Andernfalls werden Sie am Ende Spaghetti mit jQuery
wo alles ist eine Art von ganz über dem Platz
und nur den Umgang mit dem DOM.
Wenn Sie tatsächlich JavaScript schreiben
in einer strukturierten Art und Weise, es macht es viel einfacher
zu arbeiten, zu sortieren der Trennung der Anliegen
der Umgang mit der Aktualisieren des DOM und der Umgang
mit der tatsächlichen Logik und Code.
Werfen wir also einen Blick auf ein Einige Beispiele rund um die.
Also ich habe hier einige Beispiele.
Also das ist nur ein einfaches Beispiel der Verwendung eines JavaScript-Objekt
und das Hinzufügen von ein paar Funktionen um es zu sortieren und dann die Schaffung
der wie ein Miniatur-Anwendung.
So ist es sehr einfach eigentlich.
Das einzige, was sie tut, ist es zunächst aufgefordert, Ihren Namen ein.
Also werde ich Tim sagen und dann können Sie können Ihren Namen Bob ändern.
Und das ist alles Anwendung tut.
Aber was ich möchte darauf hinweisen, Sie ist, wie sie es tut.
So habe ich diesen Namen Generator Objekt, das eine Start-Methode hat
die den Benutzer fragt, für ihren Namen
nur durch den Aufruf dieser askForName
was es hier unten Ist die Eingabeaufforderung
wenn der Name nicht vergeben wurde dann fragt er nach wieder
durch den Aufruf dieser askForName.
Und dann, wenn es bekommt den Namen, die es dieses Update Namen ruft.
Also das setzt dann die Name des Benutzers in der h1-Tag.
Und wenn der Name nicht eingestellt, wird ein Fehler wirft es.
[Inaudible Bemerkung]
Oh, sicher. So setzt der Name des Benutzers in h1-Tag
indem SetDisplayName die die HTML setzt
in der JS Namen Behälter und Ich Voran alle meine HTML
mit JS-Selektoren, nur weil es ist eine gute Angewohnheit, zu bekommen
in nur um es ist nicht so verwirrend
wenn Sie mit Selektoren wie ID oder Klassen
für Stil und für die Logik
JavaScript in Ihrem Front-End-Anwendungen.
Denn wenn Sie verschiedene haben Gruppen von Menschen, die
auf der Code-Basis und Sie haben ein Wahl es
dass der Designer entscheidet zu ändern, weil es-ist -
sieht nicht so groß, so sie wollen, in einer neuen Klasse setzen und sich zu
aus Ihnen und Sie angewiesen sind, darauf JavaScript Zwecke
dann bricht Code.
Es ist gut, Präfix und sortieren
wie der Namensraum fast die JavaScript bezogenen Klassen
oder Attribute mit ein Präfix von JS.
Das ist also ziemlich einfach und Sie können sehen
in all diesen Fällen bin ich Aufruf zurückkehren dies am Ende.
Das ist also eine gute Angewohnheit,
Sie ihm einen zu geben gültig Rückgabewert.
In askForName Ich bin nicht weil das macht Sinn
dass Sie Namen wieder bekommen würde.
Aber was ermöglicht, dass Sie dann zu tun
Wenn Sie dieses Update zurück nennen, es ist die Rückgabe des Werts
von SetDisplayName was Rücksendung der Wert dieser.
Und das können Sie sortieren der Kette, wie Sie es gewohnt sind
in jQuery durch Rücksendung der Wert dieses jedes Mal.
Dies bezieht sich auf die aktuellen Objekte
so können Sie diese Punkt nennen askForName dot SetDisplayName
und es würde das halten Wert dieser und ermöglichen Ihnen
, eine schöne Kette dort zu haben.
Und dann - so in Dieses zweite Beispiel.
[Pause]
Gut.
OK. Also lassen Sie uns weitermachen und öffnen Sie die Konsole
und zu meinem Quellen-Registerkarte.
Wir werden dies tatsächlich aus Pop.
So in der Chrome-Entwickler Werkzeuge, die ich erwähnt habe,
gibt es dieses Stück auf der rechten Seite und ein -
Sie können diese Stoppschild zu sehen obwohl standardmäßig, es ist schwarz.
Aber wenn man mit der Maus über sie, es sagt, "auf Ausnahmen dürfen keine Pausen.
Klicken Sie auf die Pause auf Alle Ausnahmen. "
Und wenn Sie darauf klicken wieder, wird es blau.
Und nun zu jeder Zeit, dass gibt es eine Fehlermeldung ausgegeben
in Ihren JavaScript-Code, wird es Stopp an der Stelle, und lassen Sie
zu bewerten, was los ist.
So - Und das ist wirklich eine nützliche Konzept ist etwa darauf hinweisen.
Und dann, wenn Sie auf wieder, lila stellt sich
und dies ist normalerweise was ich halten es in.
Es bricht nur den Code wenn es eine Ausnahme
das hat nicht erwischt worden.
Also eine Menge Zeit in jQuery für Beispiel, sie versuchen Fänge
, ob ein Browser oder nicht testen hat eine Art von Fähigkeit
und von dort weiter.
Dies ist nur dann, wenn da ist ein Fehler
dass war nicht in einem Versuch abgefangen.
Lassen Sie uns also versuchen, und senden ein Name, der leer ist.
So kann ich sehen, dass die Code ist jetzt gestoppt
an der Methode update und ich kann die Maus über Namen
und siehe, es ist leer leer.
Es es ist gleich leer.
Also, wenn nicht nennen werfen ein neues Irrtum und jetzt habe ich einen Schritt zurück
durch die Funktion Spalte und sagen: "OK,
wo hat dieser kommen, "und sehen, was der Wert der Client ist.
So hat es askForName Verfahren,
SetDisplayName Start und update.
Und das ist nur eine wirklich nützliche wie Sie sehen können, haben alle
Variablen, die verfügbar sind in diesem Rahmen auch
wie die Schließung Variablen, so alles, was geschlossen ist
über die von dieser Funktion.
Und so kann ich sehen, dass - was den Wert Client
und was der Wert ist.
Also das, denn wir sind in jQuery ist gleich
der aktuellen DOM-Element.
Aber es ist wirklich nützlich für Debugging-Code
auf Fehler wie diese zu brechen.
Ein weiteres Merkmal der Chrome Inspector ist
, dass an jedem Punkt können Sie klicken Sie auf die verschiedenen Linien
in der Reihe, und es werde brechen an den Stellen,
in dem Sie Haltepunkte gesetzt haben sie als bezeichnet.
Also, wenn ich auf die Linie wird blau.
Also lassen Sie mich auch weiterhin die Ausführung hier, OK, dass brach.
Und nun Satznamen lassen Alice und drücken Sie auf Senden.
So, jetzt habe ich sogar sehen können bevor sie an den Punkt gekommen
der Aktualisierung alles, ist es jetzt hielt direkt hier, damit ich sehen kann
dass mein dieser Name ist Alice und dann kann ich weiter -
lassen Sie mich die Seite neu.
Alles klar, so jetzt, dass es ab Beginn wieder,
es bei dieser aufgehört hat Leitung und ich sehen kann
dieser Name ist derzeit nicht definiert.
askForName ist das es funktionieren ist, so dass es auch oft sinnvoll
wenn Sie Funktionen, die sind, haben aus verschiedenen Dateien
oder verschiedenen Orten in der Code können Sie sehen, wo es ist,
und dann zu springen, es wird sie zu markieren.
Also gut, in der Gewohnheit zu bekommen der Verwendung von Debugging-Tools
sind, die nicht nur trösten Punktprotokoll.
OK, also nehmen wir mal ein Blick auf ein zweites Beispiel
die weitere Nutzung der macht Prototypen, wie ich angedeutet habe.
So dass in diesem Beispiel,
schaffen wir eine neue Funktion namens CS
und das ist aktiviert so die Konvention Standard
JavaScript ist in, wenn ein Funktion soll verwendet werden,
als Konstrukteur, im Gegensatz
nur eine normale Funktion, nutzen Sie es.
Also ich habe Hauptstadt CS und dies eine variable courseId
und die courseTitle I dieser courseId gesetzt,
Diese courseTitle in den Konstruktor.
Und dann habe ich auch Studenten eingestellt und Vorträge als leere Arrays.
Also der Grund, dass Sie -
OK, also der Prototyp Eigenschaften wurden dann definiert
hier unten mit - so Vorlage ist nur eine einfache Unterstrich
Template, ein Unterstrich-Vorlage ein Weg, dass man -
ähnlich den Vorlagen David erwähnt hatte, dass
auf dem Server, können Sie nur ein Script-Tag schreiben
die nicht eine JavaScript Skript, sondern ein Text HTML
und was ich tue mit jQuery ist -
es nicht halten diese offen ist, ja, es wir gehen.
Mit jQuery, es wird die HTML-Wert dieser Vorlage
und dann durch die Lauf es streichen Dienstprogramm Bibliotheken
Template-Engine.
So ist die Dokumentation denn das ist hier unten
unter der Dienstprogrammschablone
aber im Grunde kann man lesen ein bisschen mehr über sie.
Aber es wertet diese Zeichenfolge und wandelt es in einen Funktions
die wir weitergeben können Daten in und dynamisch bezeichnen.
Die nächsten beiden Methoden, die ich haben sind addStudent und addLecture.
Dazu fügen Sie einfach die internen Arrays, die ich habe
im Konstruktor und dann die Render-Methode.
Also, lassen Sie schaffen die neuen Instanz namens CS 164
die diesen Kurs hat Nummer 164 und Titel.
Und dann hat das CS50 CS50 und Intro zu CS1
und fügen Sie ein paar Vorträge Studenten
und rufen Sie dann CS50 machen.
Und wenn ich Code ausführen, so Ich mache das mit Eval.
Man kann nie wirklich verwenden wollen die Eval, aber ich bin einfach irgendwie
übertragen, alle die JavaScript, das ist hier
und das Ausführen auf der Fliege.
Es macht in diesem Vorlage diese neuen Instanzen
des CS-Klasse, die haben die Eigenschaften, so dass wir gegangen sind
durch und getan addLecture addStudent und zu jedem.
Und wie ich bereits erwähnt weil ich diese Rückkehr,
Ich kann eigentlich diese Kette addLecture und addStudent Anrufe
und es wird genauso gut funktionieren.
Die andere Funktion in JavaScript das ist sogar noch nützlicher
auf der Serverseite, wo Sie wirklich zu einem bestimmten Zeitpunkt
wenn Ihre Anwendung wird größer nicht wissen, wo Sie sind
und es ist schwieriger zu setzen diese einzelnen Haltepunkte
erwähnt, dass ich in das Chrome-Inspector ist
um den Debugger Schlüsselwort verwenden.
So ist es nur D-E-B-U-G-G-E-R.
Und wenn Sie einen Debugger setzen Stichwort im Code
und Sie haben die - dort gehen wir zwei Gs.
Wenn Sie den Debugger setzen Stichwort im Code
und Sie läuft ein Debugger sind
wie der Chrome Inspector hier
oder der Server-Seite Chrome Inspector, es sagt JavaScript
auf die Ausführung auf dieser Linie zu stoppen von Code und dann kann es
durch den Rest Schritt der Ausführung des Codes.
Also, wenn ich Laufcode klicken Hier ist es jetzt stoppen
an diesem Debugger Linie und ich kann sehen Sie auf OK, hier ist der Wert der CS50
und es ist eine bekam natürlich Titel, die Kurs-ID,
es hat keine Vorträge, keine Schüler.
Und dann kann ich durch Schritt die ganze addLecture,
Ich kann sehen, dass es drängen an diese Vorträge,
Maus über das, "Hallo Welt".
Ich kann tatsächlich in der Konsole tun dies, damit diese eingestellt ist
auf das aktuelle Objekt dass Sie in.
Diese Vorlesung ist "Hallo Welt".
Und halten Schritt durch so viel wie ich will.
Wenn ich will nicht Schritt
in einem Funktionsaufruf, weil Ich weiß, was das wird
zu tun, gehen in addLecture, gibt es diese Taste hier
, die besagt, "Schritt in den nächsten Funktionsaufruf, "und so kann ich gehen
bis zu dem Punkt waren vielleicht bin ich fragen über etwas.
Wie zum Beispiel 164 zu machen.
Also an dieser Stelle, ist es werde gerendert werden.
Ich kann diese Vorlage zu sehen ist die kompilierte Vorlage.
Ich kann an dieser Stelle sehe ich sollten zwei Studenten haben
und zwei Vorträge.
Und dann ist da noch der Prototyp Kette, die ich mich bezogen.
So eine, die die Standard kommt zusammen mit nur einem Objekt
in JavaScript im Allgemeinen,
es kommt mit zwei String- Wert der Konstruktor.
Und dann die, die Ich habe an mir selbst aufgenommen
mit der addLecture, addStudent und dann werden die Eigenschaften
, die spezifisch für diese sind, Instanz der Klasse
als sie aufgerufen wurde mit dem neuen Schlüsselwort.
So machen wir nur eine Noch ein Beispiel dazu
und dann werden wir einige Schritt weitere interessante Dinge
auf der Server-Seite.
Also lassen Sie uns fortfahren und öffnen Dieses letzte Beispiel ist die -
mal sehen, wo ist der Code?
Ich weiß nicht, wo das ging.
OK, gut, wir überspringen könnte über diesen Code dann tatsächlich -
oh halt, ich glaube, ich verpasst das Stylesheet für den Code.
OK, so machen wir diese ein wenig größer.
In diesem Beispiel zeige ich ein wenig von der Einstellung
bis der Prototypkette,
so die Einrichtung Erbe mit dem JavaScript.
Also in diesem Fall haben wir ein Katalog, die gehen
vermutlich zu halten mehrere Kurse.
Und so ein Katalog ein addCourse Methoden.
So prüft er, ob der Kurs das ist in geben wird, ist eine Instanz
verständlich wie aufgerufen mit dem neuen Schlüsselwort.
Also, wenn Sie versuchen, und senden
in etwas anderes, es wird dich schreien.
Die Render-Methode wird die machen jeden der Kurse
durch die Zusammenstellung seiner Vorlage unten.
Und wir haben den Kurs die Zugang
in diesem Fall ist die Basisklasse für einzelne Abteilung Kurse.
Und statt der Einstellung jeder
des Kurses dot Prototyp-Punkt-Methode
oder Eigentum mit dem verlängern Helfer in der Bibliothek Strich
bis der Anruf sortieren verlängern dieser Prototyp mit allen
dieser Eigenschaften ist die nützlich, ein wenig leichter zu lesen.
Und dann hier unten tun was als Einstellung bekannt
bis der Prototypkette.
Also das ist eigentlich ein wenig schwierig, die Menschen auf den ersten
und sogar noch das getan für eine Weile, es ist eine Art Fest
um den Kopf wickeln um.
Aber lassen Sie sich nicht, dass Sie zu erschrecken.
Also ich habe die Einrichtung eines neuen -
eine völlig neue Klasse Objekt hier, CS.
Und im Konstruktor
Ich sage natürlich gelten diese Argumente.
So Argumente eine spezielle Wert Ich denke, man könnte es
in JavaScript, die Schlüsselwort, das alles hat
der alles, was ist entlang gebene Argumente
diese Funktion zur Verfügung mit die Argumente nennen,
mit den Argumenten Schlüsselwort.
So wie ich rufe mit Kurs dot gelten,
ist dies der aktuelle Kontext , mit der CS wird angerufen.
Also, wenn ich rufen Sie es mit neuen es ist ein - es ist ein Wert von CS ist.
Und ich sage, nennen das Natürlich Verfahren hier oben.
Oh sorry - nennen dies Natürlich Methode hier
aber den Wert dieser zu, was der Wert sein
Dies ist hier richtig.
So ist die Anwendung Schlüsselwort ermöglicht Sie den Zustand irgendwie ändern
dieses ist, wie die jQuery darf der Schalter sortieren
aus diesem auf Sie als Sie durchmachen
und machen ein DOM-Elemente anstelle des jQuery-Objekt.
So, jetzt werde ich gesetzt eine temporäre Funktion
die greifen wird die Prototyp des Kurses.
Und irgendwie ist gesetzt zu dessen Prototyp
und dann den Prototyp eingestellt auf der CS-Funktionsobjekt
auf eine neue Instanz davon.
Also im Grunde bin ich sagen, statt -
wenn ich hier unten habe CS dot Prototyp entspricht neuen Kurs.
Dann wäre es Aufruf alles
in diesem Konstruktor-Funktion,
was würde ich nicht unbedingt wollte.
Also alles, was ich tue, ist Art der Erstellung fast
wie ein Surrogat-Funktion, die die Kurse Prototyp haben
auf sie und Art imitieren den Prototyp -
der Kurs, aber ohne dabei alles im Konstruktor
und eingestellt, dass bis zum Prototyp.
Und dann bin ich einfach nur Hinzufügen so die Abteilung
in diesem Fall ist Computer Wissenschaft für die CS-Objekt.
Und dann habe ich eine Art ein Brücke-Version zu tun.
Es ist nicht in IE9 funktionieren.
Also das ist, warum ich wollte, zu Art, wie zu zeigen -
was dieser tut, unter der Haube.
Aber Sie können es in der gleichen Weise
wo Econ gleich Funktion Natürlich gelten diese Argumente
und dann sagen Econ dot Prototyp Objektpunkt entspricht CreateCourse
dot Prototyp.
Es ist also ein neues Objekt Das ist nur der Prototyp
für den Kurs und dann Einstellung der Waren dort.
So, jetzt lass uns einfach gehen, setzen ein Debugger hier und klicken Sie auf Ausführen.
Dort gehen wir.
So können wir die CS164 sehen Prototypkette wir haben die
Eigenschaften, die waren im Konstruktor gesetzt.
Also diese Werte, die eingestellt wurden und dann auf der Prototypkette
für die CS-Objekt hatte es Abteilung Informatik gesetzt.
Und dann auf der darunterliegenden Prototyp-Kette,
wir haben dann alle Methoden und Eigenschaften
sind, die nur in der Kurs-Objekt.
Und dann haben wir die Basis-Objekte.
Also diese Art von einer schnellen Beispiel der Prototyp-Kette.
Und wie Sie hier sehen können, gibt sind zwei Werte pro Abteilung.
So gibt es Abteilung der Informatik
und dann Abteilung nicht aufgeführt, die ich sagte,
als Standardwert hier.
Also der Prototypkette ist eigentlich nur ein einzeln
Link-Liste.
Und wie es versucht, finden eine Eigenschaft,
es wird am Start Top-Level-Wert.
Also, was ist das in definierten der Konstruktor-Funktion
und dann irgendwie nach unten unterwegs Prototypkette von dort.
Also, weil es gefunden, so dass -
wenn hier, sage ich CS50 dot-Abteilung,
es werde sagen, Informatik.
Aber wenn ich sage, var -
[Pause]
Aber wenn ich sage, Geisteswissenschaften gleich neuen Kurs
und dann sagen, dass ich Geisteswissenschaften dot-Abteilung,
Ich werde sehen, Abteilung nicht aufgeführt denn es ging an die erste -
Ich kann an der Prototyp aussehen Kette hier tatsächlich.
So ging es zunächst zum Kurs Objekt und sah, es gibt nichts,
auf der Prototypkette an dieses Niveau für die Abteilung
oder für den Warenwerten, so dann springt er auf die nächste Ebene,
der Verlauf und Aussehen mitteln es und findet es.
So ist es nur ein bisschen wie unten geht von oben nach unten
und das ist eine Art etwas, das einzigartig ist
JavaScript ist über dass Sie jederzeit ändern,
dieser Werte bei einem bestimmten Zeitpunkt.
Also im Konstruktor oder in einem einzelne Methode für das Objekt
wenn ich diesen Satz Abteilung, um etwas Neues,
oder wenn ich selbst eingestellt eine dieser Funktionen
die bereits existieren
um etwas Neues, Ich bin frei, das zu tun.
So jetzt habe ich CS50 dot addLecture, sieht so aus.
Und wenn ich es eingestellt CS50 addLecture nur gleich
leere Funktion.
Dann jetzt kann ich sehen, dass es nur komplett geändert
die Sie nicht in der Lage sind , weitere Sprachen zu tun
wo Sie eine strengere haben Klasse basierte Vererbung
und alles Art eingerichtet.
JavaScript ist sehr, sehr flexibel in Bezug darauf.
OK, lassen Sie uns zurück zu springen in den Folien.
Also, wenn Sie zum Beispiel würde immer eine Funktion wie
eine bestimmte zu haben, dieser Wert für sie einzustellen.
Sie können Funktions dot binden nennen
und setzen, was den Wert Dies sollte.
Sie können es als zu denken -
"Ich versuche, der eine denken gutes Beispiel aus der Praxis, aber "
Wenn Sie Ihren Code schützen wollen
gegen jemanden potenziell nannte es mit einem Wert
das wäre nicht dafür.
Wie zum Beispiel AJAX Rückruf wie Über oder Fehler.
Diese werden in der Regel nicht aufgerufen
mit einem guten semantische Wert dieser.
Und Sie wie: "OK, ich habe immer sind wollen, dass dies der Wert sein
Ziel des Kurses dass ich arbeite.
Oder die Ansicht, die ich bin Arbeit mit in meinem Code
bedeutet dies, dass DOM-Knoten, können Sie -
Sie Kontext auf diese binden können und dann, wenn es später als
durch jQuery und es muss nicht ein guter Wert dieser, es wird bleiben
zu dem, was Sie mit begrenzt.
Dann gibt es Funktionsaufruf wurden Sie können das Kontext angeben
und geben Sie eine beliebige Variable Anzahl von Argumenten.
Und dann gibt es Funktion gelten, die Sie weitergeben können
in dem Kontext und dann entweder ein Array
oder die Argumente, dass Objekte Ich erwähnte, wie Sie es sehen.
Und die Argumente in einem Funktion, die Sie aufrufen,
du kannst direkt in das Wort "Argumente"
und es werden alle die Argumente.
Es hat eine "Länge" Eigentum
das ist, wie Mai Argumente waren tatsächlich an, dass Methoden übergeben
da in JavaScript Sie können von Call sortieren
mit variablen Zahlen von Argumenten.
Es ist nützlich, zu sagen Wäre dies ein Argument,
folgen Sie dann den Code-Pfad.
Wenn es zwei hatten, könnten Sie wollen, einen anderen Weg zu folgen.
Es erlaubt Ihnen, wirklich dynamische APIs für Ihre Methoden.
Sie können sich denken, dass mit jQuery
wie wenn Sie Dollar-Punkt auf oder binden.
Und es ist irgendwie tut verschiedene Dinge
, ob Sie ein setzen Argument oder zwei oder drei
oder starten Sie es mit einer Funktion.
Es wird unter Verwendung der Argumente Immobilien
und die Argumente Länge in vielen Fällen
um diese Magie haben Funktionalität passieren.
Die Dinge, die Sie nicht mit zu tun Argumente ist es einfach verwenden,
standardmäßig als Array.
So kann man sagen, dass Argumente drei und setzen Sie ihn auf etwas,
wie Sie könnte das Array Aufgabe.
Sie können das - viel Methoden der Unterstrich
entweder für Sammlungen oder für die Arbeit mit Arrays
Sie können Argumente übergeben und es wird klar
dass es ein Argumente Gegenstand und Art
von nehmen das für Sie.
Aber wenn Sie verwenden möchten, die Argumente, die übergeben werden
durch eine Funktion als ein Array,
Sie können Strich verwenden Punkt zwei Array.
Eine der Anzahl von Utility-Funktionen
, die in Bau sind, um zu unterstreichen.