Mastering JavaScript 5: Kritische Grundlagen der Objekte

1. Einführung: Wir haben bereits einen Abschnitt über wichtige Grundlagen abgeschlossen . In diesem Abschnitt möchte ich jedoch wichtige objektspezifische Fundamentaldaten behandeln . In diesem Abschnitt werden wir uns nach einem kurzen Überblick die Natur von Objekten in JavaScript über die Natur von Objekten in JavaScript hauptsächlich mit dem Konzept von Prototypen befassen. , Prototypen in JavaScript zu verstehen Es ist absolut wichtig, Prototypen in JavaScript zu verstehen. Manche sprechen über Prototypen als eine Säule von JavaScript und das macht wirklich sehr viel Sinn. Prototypen sind Objekten zugeordnet. Und wie wir bereits besprochen haben, gibt es Objekte in JavaScript überall. Das macht auch überall Prototypen. Wenn wir uns mit Prototypen befassen, werden wir zunächst untersuchen, was sie sind und wie sie sich auf Objekte auswirken. Wir werden die Vorteile von Prototypen, die Prototypenkette und Möglichkeiten behandeln , wie wir mit den Eigenschaften und Methoden arbeiten können , die von Prototypen bereitgestellt werden. Ich glaube nicht, dass ich überschätzen kann, wie wichtig es ist, Prototypen in JavaScript zu verstehen. Selbst wenn Sie Meinung sind, dass Sie dieses Thema gut verstehen, würde ich Sie dennoch ermutigen, diesen Abschnitt zur Überprüfung durchzugehen . In Ordnung, das sind genug einführende Informationen. Lass uns einsteigen und loslegen. 2. Die Art der Objekte: Wenn Sie bereits ein gründliches Verständnis der Natur von Objekten in JavaScript haben, können Sie dieses Thema überspringen. Ich habe es aufgenommen, weil bevor ich anfange, über Prototypen zu sprechen , sicherstellen möchte, dass die Natur von Objekten verstanden wird. Dies ist besonders wichtig für diejenigen, die möglicherweise aus einer anderen Sprache zu JavaScript kommen . In diesem Kurs haben wir Objekte bereits mehrfach verwendet. Es mag also etwas seltsam erscheinen , die Natur von Objekten zu behandeln. Jetzt. Es gibt jedoch viele, die mit Objekten in JavaScript arbeiten, ohne sie vollständig zu verstehen. Manchmal ist es besser, etwas Erfahrung mit Objekten zu haben , bevor wir uns mit der wahren Natur von Objekten befassen, was wir in diesem Abschnitt tun. Einfach ausgedrückt ist ein Objekt ein zusammengesetzter Wert. Es führt mehrere Datenstücke, Primitive oder andere Objekte unter einer einzigen Referenz zusammen. Ein Objekt ist eine ungeordnete Sammlung von Eigenschaften, und jede Eigenschaft hat einen Namen und einen Wert. Der Name der Eigenschaft ist normalerweise eine Zeichenfolge, sie kann aber auch assembliert werden. Der Wert kann ein beliebiger in JavaScript verfügbarer Datentyp sein. Wir sprechen also davon, dass Eigenschaften Name-Wert-Paare haben. nun, bevor wir weitermachen, Lassen Sie mich nun, bevor wir weitermachen, mit der Erstellung eines Objekts beginnen. Manche deklarieren die Variable. Dann definiere ich dieses Objekt mit einem Objektliteral. Also erster F-Name, ich werde einfach Informationen über mich hier in dieses Objekt einfügen. Im Grunde haben wir im Moment zwei Eigenschaften und eine F-Namen-Eigenschaft und eine Alanin-Eigenschaft. Und beachten Sie, dass jede dieser Eigenschaften einen Namen und einen Wert hat. Bei diesen beiden handelt den Werten um Zeichenketten. Wenn Sie nun ein Objekt definieren, muss jede Eigenschaft durch ein Komma getrennt werden , was ich hier gemacht habe. Jetzt wird der Name manchmal als Schlüssel bezeichnet. Wir sprechen also auch über Eigenschaften als Schlüsselwertpaar. Nun, um einen anderen Datentyp einzugeben. Hier ist eine Eigenschaft , die eine Nummer speichert. Der Name ist also Score, der Wert ist 90. Und eine Eigenschaft, die einen booleschen Wert speichert. Jetzt haben wir gesagt, dass der Wert einer Eigenschaft jeder Datentyp sein kann , der in JavaScript verfügbar ist. Wir können also einen anderen Objekttyp verwenden, z. B. ein Array. Also, wenn ich hier Quizfragen mache und das dann als Array einrichte und es nur ein paar Quizinformationen enthält, im Grunde Quizfragen, die abgenommen wurden, so etwas. Da habe ich ein Array. Ein anderer Objekttyp könnte jedes der integrierten Objekte sein , die in JavaScript verfügbar sind. Eines dieser natürlich, bis heute existierenden Objekte. Dieses Objekt wird also erstellt am Ich erstelle einfach ein neues Datumsobjekt und das wird der Wert dieser Eigenschaft. Dann können wir natürlich einfach ein Standardobjekt haben, sagen wir, eine Adresse hier drin haben. Und das ist ein Objekt und es enthält Eigenschaften. Mal sehen, 45 Main und dann City. Da haben wir also verschiedene Datentypen Eigenschaften zugeordnet sind. Das einzige, was wir noch nicht hinzugefügt ist, dass wir einer Eigenschaft keine Funktion hinzugefügt haben. Und wenn der Wert eine Funktion ist, nennen wir das eine Methode. Also im Grunde eine Objekteigenschaft , die auf eine Funktion als Methode verweist. Jetzt können Methoden auf zwei verschiedene Arten eingerichtet werden. Nehmen wir an, ich wollte eine FullName-Eigenschaft und dies wird eine Methode sein , die auf eine Funktion verweist. Also hier ist eine Möglichkeit, es einzurichten. Das ist, das ist der traditionelle Weg. Wir definieren hier einfach eine Funktion. Jetzt verwende ich das, um auf das Objekt zurückzuverweisen. Ich schnappe mir FName und verkette das nur mit dem Namen Helen. Also benutze ich das wieder. Wie gesagt, es gibt zwei Möglichkeiten, eine Methode zu definieren , um eine Funktion an eine Eigenschaft anzuhängen. Das ist der traditionelle Weg. Aber in einer kürzlich erschienenen Version des Ekman-Skripts haben sie dies vereinfacht, sodass ich dieselbe Methode wie diese definieren kann . Viel einfacher zu machen. Nun, hier haben wir ein Objekt mit einem Objektliteral erstellt . So nennen wir das. Es gibt jedoch mehrere Möglichkeiten , Objekte in JavaScript zu erstellen. ZB jedes Mal, wenn wir eine Funktion erstellen, wird ein Objekt mit dem Funktionskonstruktor erstellt. Und das ist nur ein besonderer Objekttyp. Jedes Mal, wenn wir ein Array erstellen, wird ein Objekt mit dem Array-Konstruktor erstellt, bei dem es sich um einen speziellen Objekttyp handelt. Also viele verschiedene Möglichkeiten, Objekte zu erstellen. Aber selbst wenn wir ein Standardobjekt erstellen , wie ich es hier gemacht habe. Dafür gibt es mehrere Möglichkeiten. Und wir werden uns mit vielen dieser verschiedenen Möglichkeiten befassen , wenn wir uns den Abschnitt zur Strukturierung von Code mithilfe von Objekten und objektorientierten Prinzipien ansehen den Abschnitt zur Strukturierung von Code mithilfe von Objekten und objektorientierten , wie sie auf JavaScript angewendet werden. Deshalb werden wir einige dieser verschiedenen Arten der Erstellung von Objekten behandeln , weil diese zu Mustern werden. Wenn Sie Ihren Code mithilfe von Objekten strukturieren. Lassen Sie uns nun dieses Objekt speichern und es uns ansehen. Das in ein bisschen und öffne die Konsole hier. Und mach einfach OBJ. Und dort sehen wir das Objekt und all seine verschiedenen Eigenschaften, die Namenswertpaare, die wir in diesem Objekt sehen. Um nun auf einen Wert zuzugreifen , der mit einer Eigenschaft verknüpft ist, verwenden wir traditionell die Punktsyntax. Also kann ich so auf F9 zugreifen und es zeigt den Wert für diese bestimmte Eigenschaft an. Wir sind jedoch nicht nur auf die Punktsyntax beschränkt. Wir können auch eckige Klammern verwenden. Und das wird sehr nützlich , wenn wir bestimmte Dinge programmgesteuert erledigen müssen. Wenn ich also z. B. eine Zeichenkettenadresse innerhalb von eckigen Klammern übergebe , wird die OBJ-Punktadresse und der Wert für diese Eigenschaft zurückgegeben, wie wir dort sehen können. Dies kann nun auch verwendet werden , wenn einem Objekt Werte zugewiesen werden. Lassen Sie mich den Visual Studio-Code hier zurückspringen. Und hier oben werde ich zuerst ein paar Variablen definieren. Einer ist der Datenname. Ich werde das einem Zeichenkettenfinale gleichsetzen. Und dann der andere. Lass uns einfach gehen, Data Val. Und setzen wir das auf 80. Jetzt verwenden wir diese Werte, um eine weitere Eigenschaft für das OBJ-Objekt zu erstellen. Jetzt könnten wir das innerhalb dieses Objekts wörtlich machen. Wir könnten es so machen. Ich setze eckige Klammern und dann den Datennamen, das ist was ich will. Ich möchte, dass final der Name des Namenswertpaars ist. Also habe ich es mit eckigen Klammern umgeben. Dann setze ich den Dickdarm so ein. Und dann kann ich den Wert einfach damit verknüpfen. Lassen Sie uns das jetzt speichern und uns das Objekt ansehen. Stellen Sie sicher, dass wir das tatsächlich sehen. Also, wenn ich dieses Objekt öffne und wir das Finale haben und es ist 80, und das hat für uns funktioniert. Nun, eine andere Möglichkeit hätte darin bestehen können, es hier zuzuweisen. Ich könnte OBJ machen. Dann innerhalb der eckigen Klammern Datenname. Sie können gerade sehen, dass der Wert abgerufen wird, sodass wir ihn zum Abrufen oder zum Festlegen verwenden können. Wenn ich es auf 90 setze. Was passiert? Groß- und Kleinschreibung beachten. Da haben wir's. Der Spielstand liegt jetzt bei 90. Etwas anderes, das uns zeigt, ist, dass Objekte veränderbar sind, was bedeutet, dass sie verändert werden können. Selbst wenn wir dieses Objekt mit dem Schlüsselwort const definiert hätten , wäre es so, dass wir dieser Variablen keinen weiteren Wert zuweisen könnten. Das ist alles, was passieren würde. Wir könnten immer noch alle Eigenschaften innerhalb des Objekts ändern , da Objekte veränderbar sind. Die Verwendung von const wird uns also nicht daran hindern Eigenschaften innerhalb eines Objekts zu ändern. Nun gibt es einige Befehle, die uns helfen, Objekte so zu gestalten , dass sie unveränderlicher sind , sodass wir sie nicht ändern können. Um das einzuführen, müssen wir uns bewusst sein, dass jede Eigenschaft Attribute enthält. Attribute sind mit jeder Eigenschaft eines Objekts verknüpft , und diese Attribute bestimmen, was wir mit dieser Eigenschaft machen können. Lassen Sie mich einfach die drei Hauptmerkmale durchgehen. Einer ist beschreibbar. Das beschreibbare Attribut bestimmt also , ob der Wert geändert werden kann oder nicht. Wenn also ein schreibbares Set standardmäßig den F-Namen verwendet, kann ich diesen Wert nicht ändern. Es wird mir nicht erlauben, es zu ändern. Okay, es gibt auch ein, ein Attribut, das konfiguriert werden kann. Und das konfigurierbare Attribut bestimmt zwei Dinge. Erstens bestimmt es, ob wir die Eigenschaft aus dem Objekt löschen können oder nicht . Wenn es also falsch ist, können wir es nicht löschen. Die andere Sache, die bestimmt, ist, ob wir die Attribute für diese Eigenschaft ändern können . also Attribute einmal gesetzt sind und Wenn also Attribute einmal gesetzt sind und wir konfigurierbar auf false setzen, können wir diese Attribute nicht mehr ändern. Daran wird es uns hindern. Jetzt gibt es eine Einschränkung. Wenn wir konfigurierbar auf Fehler setzen, können wir writable auf false ändern. Javascript-Engine erlaubt das, aber das ist das einzige Szenario, in dem wir tatsächlich eine Änderung von konfigurierbar vornehmen könnten , wenn falsch. Jetzt ist das letzte Attribut, das ich erwähnen muss, aufzählbar. Jetzt bestimmt das Enumerable-Attribut , dass die Eigenschaft durch bestimmte Aktionen zurückgegeben wird. Zum Beispiel zeigt eine For-In-Schleife keine Eigenschaft mit einem Attribut mit unzähligen Standardwerten an, sie wird einfach nicht angezeigt. Für dieses Objekt, das wir hier erstellt haben, sind diese standardmäßig alle auf true gesetzt. Und das können wir mit einem einfachen JavaScript-Befehl sehen. Lass mich einfach speichern, was ich dort gemacht habe. Dies ist eine statische Methode des Objektkonstruktors. Es ist ein Eigenschaftsdeskriptor, er ist ziemlich lang. Wenn wir also OBJ übergeben und dann die Eigenschaft übergeben , für die wir seine Attribute sehen möchten. Lass uns einen F-Namen machen. Es wird die Informationen dazu zurückgeben. Der Wert ist also, dass Steve es uns zeigt und dann writeable auf true gesetzt wird, unnumerable auf true gesetzt und configurable auf true gesetzt, sodass wir sehen können, was sie sind. Und standardmäßig wird das jeder Eigenschaft zugewiesen, true, true und true. Nun, wie könntest du das ändern? Nun, lassen Sie uns weitermachen und eine neue Immobilie definieren. Lassen Sie mich weitermachen und das in Visual Studio Code tun, damit Sie eine Aufzeichnung davon haben. Definiertes Eigentum. Und dann noch einmal, dies ist eine statische Methode, also eine objektpunktdefinierte Eigenschaft. Und dann geben wir das Objekt weiter. Und dann geben wir das Grundstück weiter. Wir wollen weitermachen. Ich werde ein neues erstellen. Also werde ich BD zum Geburtstag machen. Der dritte Parameter ist nun ein Objekt. Und dieses Objekt enthält die Attribute, die wir definieren wollen. Einer ist Wert. Ich stelle das auf 25 ein. Dann können wir die beschreibbaren, konfigurierbaren und unzähligen Eigenschaften erstellen, über die wir gesprochen haben. Also lass uns beschreibbar machen. Und setzen wir das auf falsch. Ich werde diese Standardwerte für all diese festlegen, da dies der Fall ist, da true die Standardeinstellung ist. In Ordnung, lass uns weitermachen und das speichern. Und jetzt schauen wir mal, was wir bekommen. Also schauen wir uns OBJ an. Wir können es öffnen und wir können sehen, dass es jetzt ein B-Date-Objekt gibt und es auf den 25. Mai eingestellt ist . Können wir es anzeigen? Obj Punkt? Sicher. Wir können es anzeigen. Können wir es ändern? Nun, lass es uns versuchen. Es. Wird j Punkt v. Lass uns das auf den 25. Juni setzen. Es sieht so aus, als ob es sich ändert. Und das ist meiner Meinung nach ein Problem damit. Es sieht so aus, als ob es sich ändert. Aber wenn wir OBJ erneut anzeigen und öffnen, oder wenn wir uns die BD-Eigenschaft von OBJ ansehen die BD-Eigenschaft von OBJ ist sie immer noch auf ihren ursprünglichen Wert gesetzt, sodass wir das nicht ändern können. Was ist nun mit der konfigurierbaren Eigenschaft? Versuchen wir erneut, dieselbe Eigenschaft zu ändern . Ich werde denselben Befehl kopieren. Lass uns versuchen, es erneut einzurichten. Und setzen wir writeable auf true. Wenn ich nun die Eingabetaste drücke und feststelle, dass wir einen Fehlertyp erhalten oder eine Eigenschaft nicht definieren können, können wir das nicht tun. Nun noch eine Sache, die ich nur für in Loop zeigen möchte. Also lass es uns machen. Und dann machen wir einfach console.log. Das gefällt mir. Es gibt also eine For-In-Schleife , die alle Eigenschaften des Objekts in Schleife durchläuft . Wenn wir das jetzt durchschauen, sehen wir kein BD, weil es nicht aufzählbar ist. Lass uns noch etwas versuchen. Hier ist eine weitere statische Methode. Und das wird die Schlüssel abrufen. Die Schlüssel der Schlüsselwertpaare. Der Schlüssel der Immobilie. Wir nennen diesen Namen auch, aber ich habe erwähnt, dass er auch Schlüssel genannt wurde. Wenn wir das also anzeigen, erzeugt das im Grunde ein Array. Beachten Sie jedoch, dass der B-Tag fehlt, und das liegt daran, dass das Enumerable-Attribut auf false gesetzt ist. Jetzt gibt es einen ähnlichen Befehl, object dot values, der die Werte abruft und sie in ein Array wie dieses einfügt. Also ein paar nette statische Methoden, die Sie beachten sollten. Grundsätzlich verwenden wir diese verschiedenen Befehle , um Ihnen die Natur von Objekten zu zeigen, welche Objekte in JavaScript ähnlich sind. Und mit dieser Grundlage sind wir bereit, über Prototypen zu sprechen, ein sehr wichtiges Konzept, wenn es um Objekte in JavaScript geht. Also lass uns weitermachen. 3. Was ist ein Prototyp und warum?: Wenn wir uns mit Prototypen befassen, müssen wir zunächst darüber sprechen, was ein Prototyp ist und warum er wichtig ist. Also zuerst, was ist ein Prototyp? Mittlerweile ist fast jedem JavaScript-Objekt ein zweites Objekt zugeordnet. Dieses zweite Objekt wird Prototyp-Objekt genannt. Und das JavaScript-Objekt kann Eigenschaften von diesem Prototyp-Objekt ausleihen . Bevor wir nun näher darauf eingehen, indem Beispiele im tatsächlichen Code ansehen, lassen Sie uns über die Leistungsfähigkeit dieses Konzepts nachdenken. Nehmen wir an, wir hatten vier Benutzerobjekte, wie wir hier zeigen. Benutzer eins, Benutzer, zwei, Benutzer, drei, Benutzer für sie haben jeweils eine F-Nameneigenschaft, N- und L-Nameneigenschaft. Und sie haben unterschiedliche Werte für diese Eigenschaften, wie wir sehen können, weil ihre Namen unterschiedlich sind. Aber nehmen wir an, dass jedes dieser Objekte eine Methode mit vollständigem Namen benötigt. Eine Methode mit vollständigem Namen, die den Vornamen in Verbindung mit dem Nachnamen zurückgibt . Wir können also weitermachen und für jedes dieser Objekte eine falsche Methode definieren . Aber das scheint nicht sehr effizient zu sein. jedes Objekt anziehen, das mehr Speicher verbraucht , wiederholen wir uns. Es gibt ein paar Dinge, die das einfach ineffizient machen. Der ideale Weg besteht also darin, diese Methode auf dem Prototyp-Objekt zu platzieren. Mit der Methode auf dem Prototyp-Objekt kann sich jedes Benutzerobjekt diese Methode ausleihen , wann immer es möchte wann immer es sie benötigt. Und es ist nur an einem Ort. Wenn wir dann eine Änderung daran vornehmen müssen, nehmen wir eine Änderung am Prototyp-Objekt vor, die für alle Objekte verfügbar ist, die dieses Objekt als Prototyp-Objekt verwenden . Es gibt also viele Vorteile. In diesem Beispiel zeige ich nun die Ausleihe einer Methode, einer Funktion, die mit einer Eigenschaft verknüpft ist. Also eine Methode, wenn ich user one dot fullname eingebe und diesen in meinem Code aufrufe. Wenn der Code ausgeführt wird, sucht die JavaScript-Engine zuerst auf dem Benutzer nach einem Objekt. Es wird nach einer Eigenschaft mit vollständigem Namen suchen , die es aufrufen und als Methode verwenden kann . Wenn es es nicht findet. Es wird auf dem Prototyp des Objekts aussehen. Der erste Ort, an dem es aussehen wird. Und wenn es es dort findet, schnappt es es sich und ruft es auf. Auf diese Weise leihen sich Objekte Eigenschaften aus dem Prototyp-Objekt. Die JavaScript-Engine schaut zuerst auf das Objekt selbst, kann es nicht finden. Es wird dann auf dem Prototyp aussehen. Aber was wäre, wenn der Prototyp eine Eigenschaft hier oben in unserem Prototyp-Objekt hätte ? Was wäre, wenn ich eine Eigenschaft von f, fname und lname hätte? Was würde dann passieren? Würde das Objekt seine eigene Nachmittagsimmobilie und die Eigenschaft L-Name verwenden ? Und die Antwort lautet ja, natürlich würde auf der Grundlage dessen, was wir beschrieben haben JavaScript-Engine auf der Grundlage dessen, was wir beschrieben haben , diese Eigenschaft anhand eines Objekts finden . Es muss es nicht aus dem Prototyp-Objekt ziehen. Dies ist also ein weiteres leistungsstarkes Merkmal von Prototypen. Wir können Eigenschaften für das Prototyp-Objekt haben und wir können sie für die einzelnen lokalen Objekte überschreiben. Das bietet die Flexibilität, nach der wir suchen. Nun, ich sagte, dass fast jedes JavaScript-Objekt ein Prototyp-Objekt hat , dem es Eigenschaften entlehnt. Es gibt also Situationen , in denen wir ein Objekt ohne Prototyp-Objekt haben können . Damit das passiert, müssten Sie als Entwickler es jedoch erzwingen. Also jedes Objekt, das auf reguläre Weise erstellt wurde, verknüpfen wir mit einem Prototyp-Objekt. Das bedeutet Arrays, Daten, Funktionen, reguläre JavaScript-Objekte, diese haben alle Prototyp-Objekte. Und im nächsten Thema werden wir anfangen, uns einige davon anzusehen und uns die tatsächlichen Prototypen anzusehen und zu sehen, was sie für diese Objekte bieten. Also lass uns weitermachen. 4. Prototype sind überall vorhanden: Da fast jedes Objekt einen Prototyp hat, schauen wir uns einige Objekte an. Schauen Sie sich den Prototyp an und was das Objekt von diesem Prototyp profitiert. Lassen Sie uns nun weitermachen und mit einem Array beginnen. Jetzt mache ich das alles an der Konsole, weil das nur ein paar einfache Befehle sein werden und ich werde sie eingeben. Also werden wir es hier machen. Lassen Sie mich zunächst damit beginnen , ein Array zu erstellen. Also ein sehr einfaches Array, das einfach drei Zahlen enthalten wird, wie folgt. Ich werde weitermachen und die Eingabetaste drücken. Lassen Sie mich nun einen Blick auf das Array hier auf der Konsole werfen. Wir können die Array-Elemente sehen. Aber beachten Sie, dass wir hier unten etwas haben wie eine Eigenschaft aussieht, unterstreichen, unterstreichen. Unterstreichen, Unterstreichen wird. Dies ist ein Link zum Prototyp-Objekt. Wenn wir das also öffnen, können wir sehen, was der Prototyp für Arrays bietet. Bei Arrays mit diesem spezifischen Objekttyp gibt es nun eine Reihe von Dingen, die vom Prototyp bereitgestellt wurden. Sie können sehen, dass alle Methoden, die wir erhalten die mit einem Array verwendet werden können, hier enthalten sind. Nehmen wir zum Beispiel an, wir wollten diesem Array einen Wert hinzufügen. Also ordne es an, drücke. Lassen Sie uns weitermachen und diesem Array eine Vier hinzufügen. Wenn wir uns jetzt die Rate ansehen, haben wir dort jetzt einen weiteren Artikel. Woher kam diese Push-Methode nun? Wie kommt es, dass wir das benutzen können? Nun, Sie sehen zweifellos, wohin das führt. Es stammt aus den Prototyp-Objekten. Wenn wir hier also weit genug nach unten scrollen, können wir Push sehen. Deshalb können wir Push verwenden. Somit hatte jedes Array, das erstellt wurde , Zugriff auf diese Methode. Und jedes Array muss nicht Speicherplatz für all diese Methoden beanspruchen. Sie werden alle auf dem Prototyp-Objekt gespeichert, und dann erhalten sie Zugriff auf sie. Sie können sie sich bei Bedarf ausleihen . Ordnung, schauen wir uns nun einige andere Möglichkeiten an , den Prototyp anzuzeigen. Ich habe gerade das verwendet, was mit dem Chrome-Browser bereitgestellt und wie er Dinge anzeigt. Und ich kann es öffnen und dann das Prototyp-Objekt sehen. Aber wir könnten das auch tun. Das Ding, das aussieht wie eine Immobilie , von der ich gesprochen habe. Zwei Unterstriche proto, zwei Unterstriche, die auch zur Darstellung des Prototyps verfügbar sind . Und wir können sehen, dass das ähnlich aussieht. Was ich mir vorher angesehen habe. Nun, bevor du verrückt wirst mit diesem Unterstrich, Unterstrich, Unterstrich, Unterstrich. Lassen Sie mich nur diese spezielle Art des Zugriffs erwähnen. Der Prototyp sollte nicht verwendet werden. Ich zeige es hier nur, weil Sie sich einen Prototyp auf verschiedene Weise ansehen können, aber er sollte nicht verwendet werden. Es war nie Teil der ursprünglichen Ekman-Skriptspezifikation. Es wurde gerade von Browsern hinzugefügt und wurde im Laufe der Jahre immer beliebter. Und wurde dann später zur Spezifikation hinzugefügt. Aber es wurde immer noch entmutigt. Verwenden Sie es, daher ist es ratsamer, den Object Dot Get-Prototyp zu verwenden Object Dot Get-Prototyp , den wir uns ansehen werden. Und später, wenn wir uns mit dem Einrichten des Prototyps befassen, werden wir uns bald die Befehle dazu ansehen. Mit Object Dot Get Prototype von können wir uns also auch die Prototypen ansehen. Also lass uns das machen. Innerhalb der Klammern. Dies ist eine statische Methode. Also der Prototyp des Objekts die Gap innerhalb der Klammern. Wir platzieren das Objekt, in diesem Fall das Array, das wir erstellt haben. Und wenn wir das öffnen, können wir dieselben Dinge sehen, die wir zuvor gesehen haben, als Sie sich den Prototyp ansehen. Das ist also eine andere Art, den Prototyp eines Objekts zu sehen. Und beachten Sie all die Funktionen, die wir aufgrund des Prototyps zu einem Array hinzugefügt haben. Okay, lass uns einen anderen machen. Lass uns ein Date machen. Also deklariere ich eine Datumsvariable und erstelle dann einfach ein neues Datum für das heutige Datum. Aufgrund der Art und Weise, wie Daten eingerichtet sind, kann ich einfach kein solches Datum eingeben und kann den Prototyp sehen, der im Grunde nur die toString-Methode verwendet , um das Datum anzuzeigen ein Zeichenkettenformat. Das ist es, was das für mich bedeutet. Aber ich kann ein Konsolenpunkt-DIR machen. Und dort kann ich mich öffnen und mehr darüber erfahren. Also hier ist unser Proto, der auf das Prototyp-Objekt zeigt. Und Sie können sehen dass Datteln auch die verschiedenen Methoden haben. Es gibt eine Menge von ihnen. Es ist also sinnvoll, dass sich diese auf dem Prototyp-Objekt befinden und nicht an jedem einzelnen Datum. Aufgrund des Prototyps, wiederum aufgrund dieses Prototyp-Objekts, können wir Datum, Punkt, Datum abrufen und im Grunde den Tag des Monats abrufen. Wir können jede der verfügbaren Methoden verwenden. Alle integrierten JavaScript-Objekte, die Teil von JavaScript sind, haben also JavaScript-Objekte, die Teil von JavaScript sind, alle Prototypen mit ihnen. Wir haben uns nur zwei angesehen, aber sie haben alle Prototypen. Du kannst damit experimentieren, du kannst das versuchen. Und ich ermutige Sie, einige Zeit damit zu verbringen, einige der verschiedenen verfügbaren integrierten Objekte zu erstellen der verschiedenen verfügbaren integrierten Objekte und sie einfach zu öffnen. Schauen Sie sich den Prototyp an und sehen Sie, was auf dem Prototyp verfügbar ist. Was ist nun mit einfachen JavaScript-Objekten? Das möchte ich mir als Nächstes ansehen. Lassen Sie mich also nur einfache JavaScript-Objekte erstellen. Ich werde einen Immobiliennamen haben. Ich habe das gerade erst erstellt. Und es ist kein eingebautes JavaScript-Objekt, also wird es mit einem Prototyp geliefert, wenn ich es so erstelle? Nun, lass es uns herausfinden. Lass uns das öffnen. Wir sehen uns das Grundstück an und tatsächlich hat es auch einen Prototyp. Und wenn ich das öffne, erhalte ich einige Dinge als Teil eines einfachen JavaScript-Objekts. Beachten Sie, dass es eine Methode gibt, bei der ein Prototyp läuft. diese Weise kann überprüft werden, ob ein Objekt ein Prototyp eines anderen Objekts ist. Es gibt also einige Dinge, die wir mit dem Prototyp-Objekt erhalten , das mit einem einfachen JavaScript-Objekt geliefert wird . In einem davon ist der Wert von. Dort bekommen wir den Wert. Lassen Sie uns jetzt einfach das verwenden, das hier ein eigenes Eigentum hat. Und lassen Sie uns sehen, was für einen Wert von zurückgegeben wird. Das ist Mathematik, die wir einfach verwenden. Es ist falsch, also ist es kein eigenes Eigentum von OBJ. Dies ist eine weitere Möglichkeit, darauf hinzuweisen, dass etwas, das wir verwenden, kein Teil des Prototypobjekts ist. Weil diese Methode oder diese Eigenschaft, die eine Methode ist, keine eigene Eigenschaft von OBJ ist. Es stammt vom Prototyp. Nun noch eine Sache, die ich zeigen möchte, bevor wir hier weitermachen. Wenn ich mir das Array noch einmal ansehe, komme ich hier runter zum Prototyp-Objekt. Ich habe das geöffnet und scrolle ganz unten nach unten. Schau, hier ist noch einer. Und das ist Objekt. Das ist ein Array, was wir erwarten würden. Dieser ist ein Objekt. Also, was ist hier los? Nun, das ist die Prototypenkette. Das ist es, worüber wir im nächsten Thema sprechen werden. Prototyp-Objekte können auch Prototypen haben. Lass uns weitermachen und wir werden darüber sprechen. 5. Prototype: Wir haben festgestellt, dass Objekte konserviert wurden und in den meisten Fällen über einen Prototyp verfügen, von dem dieses Objekt Eigenschaften übernehmen über einen Prototyp verfügen, von dem dieses Objekt oder inhärente Eigenschaften besitzen kann. Da ein Prototyp-Objekt auch ein Objekt ist, es sinnvoll, dass es auch ein Prototyp-Objekt haben kann. Dadurch entsteht eine sogenannte Prototypenkette. Objekte, die wie eine Kette miteinander verbunden sind. Schauen wir uns das zuerst im Code an und dann schauen wir uns eine grafische Darstellung an, um sicherzustellen, dass wir verstehen, wie diese Objekte alle zusammenfressen, und eine Prototypkette. Okay, für dieses aktuelle Dokument habe ich ein Array, ein einfaches Array und auch ein Objekt erstellt , um beide zu haben , damit wir sie uns in der Konsole ansehen können. Und dann mache ich noch ein paar Dinge hier in der Codedatei und schaue einfach, was passiert. Also, als Erstes werden wir die Konsole öffnen, damit wir uns diese ansehen können . Okay, schauen wir uns zuerst das Array an. Wenn ich das nun öffne, wie wir es in der Vergangenheit getan haben, sehen wir, dass ein Prototyp daran angehängt ist, der zufällig vom Array-Konstruktor stammt. Wenn wir dies jedoch weiter öffnen und dann nach unten scrollen, sehen wir uns jetzt das Objekt an , das der Prototyp dieses Arrays ist. Und wir gehen in diesem Objekt weiter nach unten, wir können alle Methoden sehen , die für Arrays verfügbar sind. Aber weiter unten haben wir auch einen Link zu einem anderen Objekt, dem Prototyp des Prototyps. Das ist also unsere Prototypenkette , über die wir hier sprechen. Wir können das also hier im Browser dargestellt sehen. Lassen Sie uns den Get-Prototyp von zwei verwenden und uns das auch ansehen. Also, wenn ich ein Objekt mache, hol dir den Prototyp eines Enters, das Array. Dies ist das Objekt , das der Prototyp ist. All diese Methoden sollten Ihnen bekannt vorkommen. Es gibt Methoden. sind Methoden, die auf Arrays verfügbar sind. In Ordnung, jetzt gehen wir noch einen Schritt weiter. Also werde ich Object Dot Get Prototype von machen. Und dann werde ich wieder ein Objekt hineinlegen, von dem ich einen Prototyp bekommen habe. Also bekommen wir hier zuerst den Prototyp des Arrays und dann den Prototyp dieses Prototyp-Objekts . Es sollte uns den dritten zeigen, den wir uns angesehen haben. Also, wenn ich das öffne, beachten Sie, was wir hier haben, der Konstruktor auf der Eigenschaft hat , ist der Eigenschaftswert von all dem. Wenn wir also runter und runter gehen würden und dann noch einmal, das ist im Grunde das, was wir hier sehen. Es ist also der Prototyp des Prototyps, der eine sogenannte Prototypenkette erzeugt . Nun, in diesem Code hatte ich auch ein Objekt erstellt. Also das möchte ich ganz schnell zeigen. Wenn ich also OBJ eingebe und das dann öffne, der Prototyp genau wie der ist der Prototyp genau wie der Prototyp des Array-Prototyps. Mit einem Array. Wenn wir ein Array erstellen, erhält es einen Prototyp, der vom Array-Konstruktor stammt. Nun, dieser Prototyp erhält einen Prototyp, er stammt vom Objektkonstruktor, und das ist dasselbe Objekt, das wir hier sehen. Wenn Sie also in der Prototypenkette nach oben gehen, werden alle Objekte zum selben Ende, dem Prototyp, gelangen. Und das ist der Prototyp, der an den Objektkonstruktor angehängt ist . Und so haben alle Objekte Zugriff auf den Wert der Methode, z. B. I. Kann ARR-Punktwert von eingeben. Und es funktioniert. Es sucht zuerst nach dieser Methode im Array, kann sie dort finden. Also sucht es auf dem Prototyp-Objekt danach. Ich kann es dort nicht finden. Also sucht es auf dem Prototyp des Prototyp-Objekts danach und findet es schließlich dort. Wenn es es nun nicht auf dem endgültigen Prototyp-Objekt finden kann dem endgültigen Prototyp-Objekt , das sich in der Prototypkette befindet, würde es undefiniert zurückgeben oder es würde eine Fehlermeldung geben, die besagt, dass dies keine Methode ist, es kann nicht irgendwas damit. In Ordnung, jetzt gehen wir hier noch ein bisschen weiter. Lassen Sie mich weitermachen und ein weiteres Objekt erstellen. Ich nenne es OBJ to. Dieses Objekt wird eine einzige Methode haben. Es wird einfach voll sein. Name ist die Methode. Was wird diese Methode bewirken? Es wird im Grunde diesen Punkt F zurückgeben und ihn mit einem Leerzeichen verketten. Und dann dieser Punkt L-Name. Das wird es zurückgeben. Okay? Was wir jetzt tun werden, ist, daraus einen Prototyp eines anderen Objekts zu machen . Weil ich nicht nachschauen möchte, was passiert wenn wir den Prototyp eines Objekts erstellen. Sehen Sie nach, ob wir noch die Prototypkette haben , über die wir gesprochen haben. Also lass uns weitermachen und J3 einrichten. Hier ist ein Befehl, der verwendet wird , um ein Objekt zu erstellen, das gleichzeitig einen Prototyp anhängen kann das gleichzeitig einen Prototyp anhängen , heißt Object.Create. Es ist eine statische Methode im Objektkonstruktor. Und was wir tun, ist in Klammern, hier übergeben wir das Objekt , das wir wollen, als Prototyp-Objekt für dieses Objekt, das wir erstellen. OBJ Three wird dies also als unmittelbaren Prototyp haben. Also OBJ, komm her. Wenn ich das jetzt speichere und mir OBJ 3 auf der Konsole ansehe, das Objekt nichts, aber es hat einen Prototyp. Beachten Sie, was im Prototyp enthalten ist, die Methode mit dem vollständigen Namen. Und dann geht das auch in der Prototypenkette weiter nach oben. Lassen Sie uns nun etwas zu OBJ Three hinzufügen. Fügen wir einen F-Namen und eine L-Namen-Eigenschaft hinzu. Also OBJ-F-Name mit drei Punkten. Es gibt den Vornamen, LBJ, drei L-Namen, und das wird unser Nachname sein. Da haben wir's. Jetzt haben wir beide drin. Also lass uns das jetzt speichern. Lass uns wieder zur Konsole springen. Wenn ich dieses Mal OBJ three, vollständiger Name, eingebe, was passiert dann? Es wird auf OBJ Three danach suchen. Es kann es dort nicht finden. Also sucht es auf seinem Prototyp-Objekt, es findet es dort, tut, was erforderlich ist, und gibt den vollständigen Namen für uns zurück. Jetzt haben wir gerade über den Wert gesprochen, dessen Wert sich auf dem endgültigen Prototyp-Objekt befindet , wenn wir eine Prototypkette nach oben bewegen, die hier für uns in diesem selbstdefinierten JavaScript-Objekt verfügbar ist hier für uns in diesem selbstdefinierten JavaScript-Objekt verfügbar . Und im Grunde gibt es den Wert aus, den es braucht , um in der Prototypenkette nach oben zu kommen , um das herauszufinden. Es kann es also nicht finden OBJ drei, es kann es nicht auf seinem Prototyp-Objekt finden, das diesem hier OBJ ist. Ich kann es dort nicht finden. Wo es es endlich findet, ist es auf dem Objekt Punkt Prototyp, Prototyp. Dort findet es ihn endlich, den Prototyp des Objektkonstruktors. Also haben wir aus der Codeperspektive darüber gesprochen. Schauen wir uns an, wie das anhand eines Bildes dargestellt wird damit ich sicherstellen kann, dass dies in Ihrem Kopf konkret ist. Dies ist ein wichtiges Konzept, das es zu verstehen gilt. Schauen wir uns also eine Grafik an, die das verdeutlicht. Also hier haben wir OBJ dargestellt drei hat die Eigenschaften fname und lname. Und dann haben wir sein Prototyp-Objekt, das OB J2 dargestellt wird. Und dann haben wir den Prototyp davon, nämlich den Prototyp, der dem Objektkonstruktor zugewiesen wurde, den Objektpunkt-Prototyp. Das ist hier oben, dort wird Wert gefunden. Wenn ich also den Dreipunktwert OBJ eingebe , sucht es zuerst im OBJ-Objekt, kann es dort nicht finden. Geht also zu seinem Prototyp, kann ihn dort nicht finden. Geht zu seinem Prototyp, findet ihn dort und er würde die Prototypenkette hinauf fortsetzen. Dies ist zufällig das Ende der Prototypenkette. Wenn es es also hier nicht finden würde, würde es einen Fehler geben, der anzeigt, dass es diese Funktion nicht finden konnte diese Funktion nicht finden oder dass der Wert von keine Funktion ist. Auf diese Weise wird die Prototypkette von der JavaScript-Engine verwendet , um Eigenschaften aus dem Prototyp eines Objekts zu übernehmen. Und dies zeigt , dass es nicht nur der erste Objektprototyp ist, sondern dass es der Prototyp des Prototyps sein kann. Es kann in der Prototypenkette nach oben gehen , um diese Eigenschaften zu finden und auszuleihen. In Ordnung, lass uns zum nächsten Thema übergehen. 6. Objekteigenschaften haben Vorrang: Bevor wir das Thema Prototypen verlassen und beginnen, sie zu verwenden, möchte ich einen Punkt hervorheben , den Sie vielleicht schon herausgefunden haben, aber ich möchte sicherstellen, dass er bekannt ist. Das heißt, eine Methode oder Eigenschaft eines Objekts überschreibt immer die Methode oder Eigenschaft demselben Namen in einem Prototyp-Objekt. Mit anderen Worten, wenn die JavaScript-Engine nach einer Methode oder einer Eigenschaft sucht, sucht sie zuerst nach dem Objekt. Wenn das Objekt es hat, verwendet es diese Version und ignoriert alles, was in der Prototypkette gefunden werden könnte. Schauen wir uns ein kurzes Beispiel an, das auch aus anderen Gründen hilfreich sein könnte. Also werde ich hier ein sehr einfaches Objekt erstellen. Obj nennen wir es. Und ich werde eine F-Name-Eigenschaft haben. Oder hey, wir machen den Namen F und dann gebe ich ein Alter von 45 Jahren an . Das ist alles, was wir jetzt in diesem speziellen Objekt haben werden . Lass mich weitermachen und das speichern. Ich werde das nur ein bisschen verkleinern. Und wir gehen hier zur Konsole. Und als Erstes möchte ich tun, da ist unser Objekt. können wir ziemlich leicht sehen. Und was passiert, wenn ich Wert darauf mache , mir das Objekt als Objekt zeigt. Damit ich das durchstehen kann. Ich kann den Prototyp sehen. Woher kommt dieser Wert von Eigentum oder dieser Wert der Methode, er stammt aus dem Prototyp. können wir genau hier sehen. In Ordnung? So können wir auch überprüfen, ob es nicht zum Objekt gehört, indem wir eine eigene Eigenschaft haben. Und dann innerhalb dieses Werts wie dieser, und das ist falsch. Wir wissen also, dass der Wert der Methode keine Eigenschaft eines Objekts ist. Das ist an dieser Stelle ziemlich offensichtlich. Wir wissen aber auch, dass wir darauf zugreifen können , weil es es in der Prototypenkette findet und es auf diese Weise ausdruckt. Lass uns jetzt etwas ganz schnelles machen. Lass uns ein OBJ mit fünf plus machen. Beachten Sie, was ausgedruckt wird. Woher kommt das? Nun, das kommt von der Zwei-String-Methode. Wenn ein Objekt in einen primitiven Wert konvertiert werden muss, verwendet es im Allgemeinen einen primitiven Wert konvertiert werden muss, den Wert der Methode, um dies zu tun. Im Fall einer Zeichenfolge, einer Zeichenkettensituation, werden jedoch zwei Zeichenketten verwendet , um diese Konvertierung durchzuführen. Wenn value of etwas zurückgibt, das zu einer Zeichenfolge gezwungen werden könnte, wird der Wert up verwendet. Aber im Moment kann der Wert von nicht in eine Zeichenfolge umgewandelt werden . Also verwenden wir die toString-Methode. Lassen Sie uns hier einfach ein paar Änderungen vornehmen. Gehen wir zurück zu diesem Objekt. Und ich werde zuerst eine ToString-Methode ausführen. Und wir lassen es diesen Punkt-F-Namen zurückgeben. Und das werden wir haben. Die Methode mit zwei Zeichenketten kehrt zurück. Hoppla, ich habe dort eine Periode gesetzt. Da haben wir's. Lassen Sie uns das jetzt speichern. Und lass uns rausspringen und denselben Befehl noch einmal ausführen. Und beachten Sie, was wir erhalten, weil wir die toString-Methode überschrieben haben die toString-Methode überschrieben , die sich in der Prototypkette befindet , also auf dem Prototyp des Objekts. Wir erhalten jetzt den Wert, der von der toString-Methode für das Objekt selbst festgelegt wurde. Ordnung, lassen Sie uns jetzt einen Wert der Methode hinzufügen. Und das kann sehr hilfreich sein, wenn Sie ein Objekt benötigen , um es in eine Zahl konvertieren zu können. Lass uns einfach weitermachen und Wert von machen. Und dafür lasse ich mir eine Zahl zurückgeben , die dem Alter entspricht. Lassen Sie uns das jetzt speichern. Lass uns rausspringen. Lass uns das Gleiche noch einmal machen. Und jetzt schau, was passiert. Nun, weil das eine Zahl ist. Es wird versuchen, mit dem Wert von first einen primitiven Wert aus dem Objekt zu erhalten , da der Wert von eine Zahl zurückgibt, dann wird er wie eine Zahl behandelt und addiert diese beiden Dinge im Grunde. Was würde nun passieren, wenn wir eine Schnur hätten? Lass uns, lass uns so etwas machen. Objekt plus OBJ. Nun, es greift auf den Wert der Methode zu. Es versucht immer zuerst darauf zuzugreifen, wenn es es in einen primitiven Wert konvertieren muss. Wenn es zu einer Zeichenfolge zwingen kann, wird es das tun. 45 kann zu einer Zeichenfolge gezwungen werden, und das tut es auch, und es gibt hier eine Zeichenfolge zurück. Aber da es sich standardmäßig um eine Zahl handelt. Wenn wir es mit der Nummer verwenden, wird die Nummer zurückgegeben. Es wird sich wie eine Zahl verhalten, wie wir es hier gesehen haben. Da haben wir also die Eigenschaften, die Methoden, die sich auf dem Prototyp eines Objekts befinden, eines Objekts, das wir erstellen, überschrieben Methoden, die sich auf dem Prototyp eines Objekts befinden, eines Objekts, das . Es ist Teil des Objektkonstruktors. Und das ist ToString und der Wert von Wir haben diese überschrieben. Dieses Objekt verwendet jetzt also diejenigen, die lokal vorhanden sind , anstatt die in der Prototypkette. Jetzt haben wir viel über Prototypen behandelt. Und mit diesem Wissen können wir beginnen, sie anzuwenden , ohne das Geheimnis von Prototypen Zu viele Menschen beginnen mit Objekten in JavaScript zu arbeiten und verstehen nicht wirklich , was passiert hinter den Kulissen. Es ist viel besser zu verstehen, warum Dinge auf eine bestimmte Weise funktionieren und warum Prototypen die Dinge tun, die sie in JavaScript tun. Und das ist wichtig zu wissen, da Prototypen in JavaScript verwendet werden. In Ordnung, lass uns weitermachen. 7. Was kommt als Nächstes?: Sie sind am Ende der Abschnitte über wichtige Grundlagen und Konzepte zur Beherrschung von JavaScript angelangt. Also, was kommt als Nächstes? Nun, der nächste Abschnitt zum Mastering von JavaScript wird sich mit Modulen befassen. Ich würde jedoch empfehlen, dass Sie zuerst oder gleichzeitig mit Modulen einige andere Themen angehen. Diese anderen Themen sind in einigen meiner anderen Kurse enthalten und deshalb möchte ich auf sie hinweisen. Zunächst einmal denke ich, dass ein kritisches Konzept, ein kritisches und kritisches Muster in JavaScript objektorientiertes Design ist. Und das finden Sie in den JavaScript-Themen für Fortgeschrittene in diesem Kurs. Es ist einer der Teile dieses Kurses. Deshalb würde ich empfehlen, wenn Sie das noch nicht durchgemacht haben und die verschiedenen Muster lernen, die für objektorientierte Programmierung verfügbar sind . Dann ist auch funktionale Programmierung letzter Zeit ein fester Bestandteil von JavaScript geworden. Und das ist noch etwas anderes , das ich für entscheidend halte. Das ist ein weiteres Muster, von dem ich denke, dass es wichtig ist , es zu verstehen. Ich habe dazu einen ganzen Kurs, funktionale Programmierung in JavaScript, einen praktischen Leitfaden. Dies ist wirklich ein praktischer Ansatz für funktionale Programmierung. Selbst wenn Sie nicht ständig das Paradigma der funktionalen Programmierung verwenden , können Sie die dort gelehrten Konzepte anwenden. Und ich denke, es ist wichtig, sie zu verstehen. Und schließlich ist es sehr wichtig, asynchrone Muster in JavaScript zu verstehen. Und das ist auch ein ganzer Kurs. Das ist in asynchronem JavaScript-Deep Dive. Ich würde also empfehlen, diese gleichzeitig oder bevor Sie Module in Angriff nehmen. Ordnung, lerne weiter und danke, dass du diesen Kurs mit mir gemacht hast.