Mit Objekten und Eigenschaften arbeiten

Ein komplexes Objekt kann einen beliebigen zulässigen JavaScript-Wert enthalten. Im folgenden Code erstelle ich eine Objekt() Objekt aufgerufen meinObjekt Fügen Sie dann Eigenschaften hinzu, die die Mehrheit der in JavaScript verfügbaren Werte darstellen.


Komplexe Objekte

Beispiel: sample29.html

 

Das einfache Konzept, das Sie hier lernen sollten, besteht darin, dass komplexe Objekte alles enthalten können, was Sie in JavaScript nominell ausdrücken können. Sie sollten nicht überrascht sein, wenn Sie dies sehen, da alle nativen Objekte mutiert werden können. Dies gilt sogar für String (), Nummer(), und Boolean () Werte in ihrer Objektform, d. h. wenn sie mit dem erstellt werden Neu Operator.


Komplexe Objekte programmatisch sinnvoll einkapseln

Das Objekt(), Array (), und Funktion() Objekte können andere komplexe Objekte enthalten. Im folgenden Beispiel demonstriere ich dies, indem Sie einen Objektbaum mit verwenden Objekt() Objekte.

Beispiel: sample30.html

 

Dasselbe kann mit einem gemacht werden Array () Objekt (aka multidimensionales Array) oder mit einem Funktion() Objekt.

Beispiel: sample31.html

 

Das Hauptkonzept, das hier weggenommen werden soll, besteht darin, dass einige der komplexen Objekte dazu entworfen wurden, andere Objekte auf programmatische Weise zu kapseln.


Eigenschaften eines Objekts mit Punktnotation oder Klammernotation abrufen, festlegen und aktualisieren

Wir können die Eigenschaften eines Objekts entweder über Punktnotation oder Klammernotation abrufen, festlegen oder aktualisieren.

Im folgenden Beispiel demonstriere ich die Punktnotation, die durch Verwenden des Objektnamens gefolgt von einem Punkt und dann von der Eigenschaft zum Abrufen, Setzen oder Aktualisieren (z., objectName.property).

Beispiel: sample32.html

 

Punktnotation ist die gebräuchlichste Notation zum Abrufen, Einstellen oder Aktualisieren der Eigenschaften eines Objekts.

Bracket-Notation wird, sofern nicht erforderlich, nicht wie gewöhnlich verwendet. Im folgenden Beispiel ersetze ich die Punktnotation, die im vorherigen Beispiel verwendet wurde, durch Klammernotation. Auf den Objektnamen folgen eine öffnende Klammer, der Name der Eigenschaft (in Anführungszeichen) und dann eine schließende Klammer:

Beispiel: sample33.html

 

Bracket-Notationen können sehr nützlich sein, wenn Sie auf einen Eigenschaftsschlüssel zugreifen müssen und mit denen Sie arbeiten müssen, eine Variable, die einen Zeichenfolgenwert enthält, der den Namen der Eigenschaft darstellt. Im nächsten Beispiel demonstriere ich den Vorteil der Klammernotation gegenüber der Punktnotation, indem ich sie für den Zugriff auf die Eigenschaft verwende foobar. Ich verwende dazu zwei Variablen, die, wenn sie verbunden werden, die String-Version des darin enthaltenen Eigenschaftsschlüssels erzeugen foobarObject.

Beispiel: sample34.html

 

Außerdem kann die Klammernotation hilfreich sein, um Eigenschaftsnamen zu ermitteln, bei denen es sich um ungültige JavaScript-Bezeichner handelt. Im folgenden Code verwende ich eine Zahl und ein reserviertes Schlüsselwort als Eigenschaftsnamen (gültig als Zeichenfolge), auf die nur die Klammer-Notation zugreifen kann.

Beispiel: sample35.html

 

Weil Objekte andere Objekte enthalten können, cody.object.object.object.object oder cody ['object'] ['object'] ['object'] ['object'] kann manchmal gesehen werden. Dies wird als Objektverkettung bezeichnet. Die Einkapselung von Objekten kann unbegrenzt weitergehen.

Objekte sind in JavaScript veränderbar. Dies bedeutet, dass das Abrufen, Einstellen oder Aktualisieren von Objekten zu jedem Zeitpunkt ausgeführt werden kann. Durch Verwendung der Klammernotation (z., cody ['Alter']) können Sie assoziative Arrays in anderen Sprachen nachahmen.

Wenn eine Eigenschaft in einem Objekt eine Methode ist, müssen Sie nur die () Betreiber (z., cody.getGender ()), um die Eigenschaftsmethode aufzurufen.


Löschen von Objekteigenschaften

Das löschen Operator kann verwendet werden, um Eigenschaften vollständig aus einem Objekt zu entfernen. Im folgenden Codeausschnitt löschen wir das Bar Eigentum aus dem foo Objekt.

Beispiel: sample36.html

 

löschen löscht keine Eigenschaften, die in der Prototypkette gefunden werden.

Löschen ist die einzige Möglichkeit, eine Eigenschaft tatsächlich aus einem Objekt zu entfernen. Festlegen einer Eigenschaft auf nicht definiert oder Null ändert nur den Wert der Eigenschaft. Die Eigenschaft wird nicht aus dem Objekt entfernt.


Wie Verweise auf Objekteigenschaften gelöst werden

Wenn Sie versuchen, auf eine Eigenschaft zuzugreifen, die nicht in einem Objekt enthalten ist, versucht JavaScript, die Eigenschaft oder Methode anhand der Prototypkette zu finden. Im folgenden Beispiel erstelle ich ein Array und versuche, auf eine aufgerufene Eigenschaft zuzugreifen foo das ist noch nicht definiert worden. Vielleicht denkst du das so myArray.foo ist kein Eigentum des myArray Objekt wird JavaScript sofort zurückkehren nicht definiert. Aber JavaScript wird an zwei weiteren Stellen aussehen (Array.prototyp und dann Objektprotokoll) für den Wert von foo bevor es zurückkehrt nicht definiert.

Beispiel: sample37.html

 

die Eigenschaft. Wenn es über die Eigenschaft verfügt, wird der Wert der Eigenschaft zurückgegeben. Es findet keine Vererbung statt, da die Prototypkette nicht mit einem Hebel versehen wird. Wenn die Instanz nicht über die Eigenschaft verfügt, sucht JavaScript in der Konstruktorfunktion des Objekts danach Prototyp Objekt.

Alle Objektinstanzen haben eine Eigenschaft, die eine geheime Verbindung ist (aka __proto__) an die Konstruktorfunktion, mit der die Instanz erstellt wurde. Diese geheime Verbindung kann genutzt werden, um die Konstruktorfunktion zu übernehmen, insbesondere die Prototypeneigenschaft der Konstruktorfunktion der Instanzen.

Dies ist einer der verwirrendsten Aspekte von Objekten in JavaScript. Aber lasst uns das rausfinden. Denken Sie daran, dass eine Funktion auch ein Objekt mit Eigenschaften ist. Es ist sinnvoll, Objekten zu gestatten, Eigenschaften von anderen Objekten zu erben. Genauso wie gesagt: "Hey Objekt B, ich möchte, dass Sie alle Eigenschaften von Objekt A freigeben." JavaScript verbindet dies standardmäßig für native Objekte über die Prototyp Objekt. Wenn Sie Ihre eigenen Konstruktorfunktionen erstellen, können Sie auch die Verkettung von Prototypen nutzen.

Wie genau dies durch JavaScript erreicht wird, ist verwirrend, bis Sie es als das sehen, was es ist: nur ein Satz von Regeln. Erstellen wir ein Array, um das zu untersuchen Prototyp Eigentum näher.

Beispiel: sample38.html

 

Unsere Array () Instanz ist ein Objekt mit Eigenschaften und Methoden. Da wir auf eine der Array-Methoden zugreifen, wie z Beitreten(), fragen wir uns: Ist die myArray-Instanz aus der Array () Konstruktor haben einen eigenen Beitreten() Methode? Lass uns nachsehen.

Beispiel: sample39.html

 

Nein, tut es nicht. MyArray hat jedoch Zugriff auf die Beitreten() Methode, als ob es sich um eigenes Eigentum handelte. Was ist hier passiert? Nun, Sie haben gerade die Prototypkette in Aktion beobachtet. Wir haben auf eine Eigenschaft zugegriffen, die zwar nicht im myArray-Objekt enthalten ist, aber von JavaScript an anderer Stelle gefunden werden kann. Das anderswo ist sehr konkret. Wenn der Array () Konstruktor wurde von JavaScript erstellt, dem Beitreten() Methode wurde (unter anderem) als Eigenschaft der hinzugefügt Prototyp Eigentum von Array ().

Um zu wiederholen, wenn Sie versuchen, auf eine Eigenschaft eines Objekts zuzugreifen, das sie nicht enthält, durchsucht JavaScript das Prototyp Kette für diesen Wert. Zuerst wird die Konstruktorfunktion betrachtet, die das Objekt erstellt hat (z., Array) und inspizieren dessen Prototyp (z., Array.prototyp) um zu sehen, ob die Immobilie dort zu finden ist. Wenn das erste Prototypobjekt nicht über die Eigenschaft verfügt, durchsucht JavaScript die Kette am Konstruktor hinter dem ursprünglichen Konstruktor. Es kann dies bis zum Ende der Kette tun.

Wo endet die Kette? Schauen wir uns das Beispiel noch einmal genauer an und rufen die toLocaleString () Methode auf myArray.

Beispiel: sample40.html

 

Das toLocaleString () Methode ist nicht in der definiert myArray Objekt. Daher wird die Prototyp-Verkettungsregel aufgerufen, und JavaScript sucht nach der Eigenschaft in Array Konstrukteure Prototypeneigenschaft (z., Array.prototyp). Es ist auch nicht da, also wird die Kettenregel erneut aufgerufen und wir suchen die Eigenschaft im Objekt() Prototypeneigenschaft (Objektprotokoll). Und ja, es ist dort zu finden. Wenn es dort nicht gefunden worden wäre, hätte JavaScript einen Fehler ausgegeben, der besagt, dass es sich um eine Eigenschaft handelt nicht definiert.

Da alle Prototypeneigenschaften Objekte sind, lautet das letzte Glied in der Kette Objektprotokoll. Es gibt keine anderen Konstruktoreigenschaften, die untersucht werden können.

Vor uns liegt ein ganzes Kapitel, in dem die Prototypkette in kleinere Teile zerlegt wird. Wenn dies für Sie vollständig verloren gegangen ist, lesen Sie dieses Kapitel und kommen Sie zu dieser Erklärung zurück, um Ihr Verständnis zu festigen. Aus dieser kurzen Lektüre der Angelegenheit hoffe ich, dass Sie verstehen, dass eine Immobilie nicht gefunden wird (und als nicht zutreffend betrachtet wird) nicht definiert) Hat JavaScript mehrere Prototypobjekte untersucht, um festzustellen, dass es sich um eine Eigenschaft handelt nicht definiert. Es findet immer ein Lookup statt, und bei diesem Lookup-Prozess werden in JavaScript sowohl die Vererbung als auch einfache Property-Lookups verarbeitet.


Verwenden hasOwnProperty Überprüfen, ob eine Objekteigenschaft nicht aus der Prototypkette stammt

Während im Der Bediener kann nach Eigenschaften eines Objekts, einschließlich Eigenschaften aus der Prototypkette, suchen hasOwnProperty Die Methode kann ein Objekt auf eine Eigenschaft überprüfen, die nicht zur Prototypkette gehört.

Im folgenden Beispiel möchten wir wissen, ob meinObjekt enthält die Eigenschaft foo, und dass es die Eigenschaft nicht von der Prototypkette erbt. Dazu fragen wir, ob meinObjekt hat eine eigene Eigenschaft genannt foo.

Beispiel: sample41.html

 

Das hasOwnProperty Diese Methode sollte genutzt werden, wenn Sie feststellen müssen, ob eine Eigenschaft lokal für ein Objekt ist oder von der Prototypkette geerbt wird.


Prüfen, ob ein Objekt eine gegebene Eigenschaft enthält im Operator

Das im Operator wird verwendet, um zu überprüfen (true oder false), ob ein Objekt eine bestimmte Eigenschaft enthält. In diesem Beispiel überprüfen wir, ob foo ist eine Immobilie in meinObjekt.

Beispiel: sample42.html

 

Sie sollten wissen, dass die im Der Operator prüft nicht nur auf Eigenschaften, die in dem Objekt enthalten sind, auf das verwiesen wird, sondern auch auf Eigenschaften, die über das Objekt erben Prototyp Kette. Daher gelten die gleichen Eigenschaftssuchregeln, und die Eigenschaft wird, sofern sie nicht im aktuellen Objekt enthalten ist, auf der Website gesucht Prototyp Kette.

Dies bedeutet, dass myObject im vorherigen Beispiel tatsächlich ein toString Eigenschaftsmethode über die Prototyp kette (Object.prototype.toString), auch wenn wir keinen angegeben haben (z., myObject.toString = 'foo').

Beispiel: sample43.html

 

Im letzten Codebeispiel befindet sich die toString-Eigenschaft nicht buchstäblich im myObject-Objekt. Es wird jedoch von vererbt Objektprotokoll, und so die im Betreiber schließt daraus meinObjekt hat tatsächlich ein Erbe toString () Eigenschaftsmethode.


Auflisten der Eigenschaften eines Objekts mithilfe von zum im Schleife

Durch die Nutzung für in, Wir können jede Eigenschaft in einem Objekt durchlaufen. Im folgenden Beispiel verwenden wir die für in Schleife, um die Eigenschaftsnamen aus dem Cody-Objekt abzurufen.

Beispiel: sample44.html

 

Das für in Schleife hat einen Nachteil. Es greift nicht nur auf die Eigenschaften des bestimmten Objekts zu, für das eine Schleife erstellt wurde. Außerdem werden alle Eigenschaften (über die Prototypkette), die das Objekt vererbt, in die Schleife aufgenommen. Wenn dies nicht das gewünschte Ergebnis ist und die meiste Zeit nicht ist, müssen wir ein einfaches Ergebnis verwenden ob Anweisung innerhalb der Schleife, um sicherzustellen, dass nur auf die Eigenschaften des jeweiligen Objekts zugegriffen wird, über das wir eine Schleife erstellen. Dies kann mit der hasOwnProperty () Methode, die von allen Objekten geerbt wird.

Die Reihenfolge, in der auf die Eigenschaften in der Schleife zugegriffen wird, ist nicht immer die Reihenfolge, in der sie in der Schleife definiert werden. Darüber hinaus ist die Reihenfolge, in der Sie Eigenschaften definiert haben, nicht unbedingt die Reihenfolge, auf die Sie zugreifen.

Nur die Eigenschaften, die aufzuzählen sind (d. H. Verfügbar sind, wenn ein Objekt mit einer Schleife durchlaufen wird) werden mit der Option angezeigt für in Schleife. Beispielsweise wird die Konstruktoreigenschaft nicht angezeigt. Es ist möglich zu prüfen, welche Eigenschaften mit der angegeben werden können propertyIsEnumerable () Methode.


Hostobjekte und native Objekte

Sie sollten wissen, dass die Umgebung (z. B. ein Webbrowser), in der JavaScript ausgeführt wird, in der Regel sogenannte Host-Objekte enthält. Hostobjekte sind nicht Teil der ECMAScript-Implementierung, stehen jedoch während der Ausführung als Objekte zur Verfügung. Natürlich hängen Verfügbarkeit und Verhalten eines Hostobjekts vollständig davon ab, was die Hostumgebung bietet.

In der Webbrowser-Umgebung werden beispielsweise das Fenster- / Kopfobjekt und alle seine Objekte (mit Ausnahme der von JavaScript bereitgestellten Objekte) als Hostobjekte betrachtet.

Im folgenden Beispiel untersuche ich die Eigenschaften von Fenster Objekt.

Beispiel: sample45.html

 

Möglicherweise haben Sie bemerkt, dass native JavaScript-Objekte nicht unter den Host-Objekten aufgeführt sind. Es ist üblich, dass ein Browser zwischen Host-Objekten und nativen Objekten unterscheidet.

In Bezug auf Webbrowser ist das bekannteste gehostete Objekt die Schnittstelle für die Arbeit mit HTML-Dokumenten, die auch als DOM bezeichnet wird. Das folgende Beispiel ist eine Methode, um alle Objekte aufzulisten, die in der window.document Objekt, das von der Browserumgebung bereitgestellt wird.

Beispiel: sample46.html

 

Ich möchte, dass Sie hier lernen, dass sich die JavaScript-Spezifikation nicht mit Host-Objekten befasst und umgekehrt. Es gibt eine Trennlinie zwischen dem, was JavaScript bietet (z. B. JavaScript 1.5, ECMA-262, Edition 3 und Mozillas JavaScript 1.6, 1.7, 1.8, 1.8.1, 1.8.5) und den Funktionen der Host-Umgebung, und diese beiden sollten nicht durcheinander sein.

Die Hostumgebung (z. B. ein Webbrowser), die JavaScript-Code ausführt, stellt typischerweise das Kopfobjekt (z. B. Fensterobjekt in einem Webbrowser) bereit, in dem die nativen Teile der Sprache zusammen mit Hostobjekten (z., window.location in einem Webbrowser) und benutzerdefinierte Objekte (z. B. der Code, den Sie schreiben, um im Webbrowser ausgeführt zu werden).

Manchmal bringt ein Hersteller eines Webbrowsers als Host des JavaScript-Interpreters eine JavaScript-Version vor oder fügt zukünftige Spezifikationen zu JavaScript hinzu, bevor sie genehmigt werden (z. B. Firefox JavaScript 1.6, 1.7, 1.8, 1.8.1, 1.8 von Mozilla). 5).


Objekte mit Underscore.js erweitern und erweitern

JavaScript 1.5 fehlt, wenn es an der Zeit ist, Objekte ernsthaft zu manipulieren und zu verwalten. Wenn Sie JavaScript in einem Webbrowser ausführen, möchte ich hier mutig sein und die Verwendung von Underscore.js vorschlagen, wenn Sie mehr Funktionalität benötigen, als von JavaScript 1.5 bereitgestellt wird. Underscore.js bietet die folgenden Funktionen beim Umgang mit Objekten.

Diese Funktionen gelten für alle Objekte und Arrays:

  • jeder()
  • Karte()
  • reduzieren()
  • reduRight ()
  • erkennen ()
  • wählen()
  • ablehnen()
  • alles()
  • irgendein()
  • umfassen()
  • aufrufen()
  • zupfen()
  • max ()
  • Mindest()
  • sortiere nach()
  • sortIndex ()
  • toArray ()
  • Größe()

Diese Funktionen gelten für alle Objekte:

  • Schlüssel()
  • Werte()
  • Funktionen ()
  • erweitern()
  • Klon()
  • Zapfhahn()
  • ist gleich()
  • ist leer()
  • isElement ()
  • isArray ()
  • isArguments
  • isFunction ()
  • isString ()
  • ist Nummer
  • isBoolean
  • isDate
  • isRegExp
  • isNaN
  • ist Null
  • ist nicht definiert

Fazit

Ich mag diese Bibliothek, weil sie die neuen nativen Erweiterungen von JavaScript nutzt, sofern sie von Browsern unterstützt werden, aber auch Browser, die dies nicht tun, dieselbe Funktionalität bieten, ohne die native Implementierung von JavaScript zu ändern, sofern dies nicht erforderlich ist.

Bevor Sie mit Underscore.js beginnen, stellen Sie sicher, dass die benötigte Funktionalität nicht bereits von einer JavaScript-Bibliothek oder einem Framework bereitgestellt wird, die möglicherweise bereits in Ihrem Code verwendet werden.