de.hideout-lastation.com
Objektorientiertes JavaScript (OOJS): 3 Möglichkeiten zum Erstellen von Objektinstanzen
Wenn es in einer Programmiersprache nur um Objekte geht, müssen wir als erstes lernen , Objekte zu erstellen . Das Erstellen von Objekten in JavaScript ist ziemlich einfach: Ein Paar geschweifte Klammern erledigt die Aufgabe, aber das ist weder die einzige Möglichkeit, ein Objekt zu erstellen, noch die einzige Möglichkeit, die Sie jemals brauchen werden.
In JavaScript werden Objektinstanzen aus integrierten Objekten erstellt und werden beim Ausführen des Programms erstellt. Zum Beispiel ist Date ein eingebautes Objekt, das uns Informationen über Daten liefert. Wenn wir das aktuelle Datum auf einer Seite anzeigen möchten, benötigen wir eine Laufzeitinstanz von Date, die Informationen über das aktuelle Datum enthält.
JavaScript erlaubt uns auch, eigene Objekte zu definieren, die zur Laufzeit eigene Objektinstanzen erzeugen können. In JavaScript ist alles ein Objekt und jedes Objekt hat einen ultimativen Vorfahren namens Object . Die Erstellung einer Objektinstanz wird Instanziierung genannt .
1. Der new Betreiber
Eine der gebräuchlichsten und bekanntesten Methoden zum Erstellen einer neuen Objektinstanz ist die Verwendung des new Operators .
Sie benötigen einen Konstruktor, damit der new Operator funktioniert. Ein Konstruktor ist eine Methode eines Objekts, die eine neue Instanz dieses Objekts zusammenstellt . Die grundlegende Syntax sieht folgendermaßen aus:
neuer Konstruktor ()
Ein Konstruktor kann Argumente akzeptieren, die zum Ändern oder Hinzufügen von Eigenschaften zu der Objektinstanz, die er konstruiert, verwendet werden können. Der Konstruktor hat denselben Namen wie das Objekt, zu dem er gehört.
Im Folgenden finden Sie ein Beispiel zum Erstellen einer Instanz des Date() Objekts mit dem new Schlüsselwort:
dt = neues Datum (2017, 0, 1) console.log (dt) // So Jan 01 2017 00:00:00 GMT + 0100
Date() ist der Konstruktor zum Erstellen eines neuen Date Objekts. Verschiedene Konstruktoren für ein Objekt verwenden unterschiedliche Argumente, um dieselbe Art von Objektinstanzen mit unterschiedlichen Attributen zu erstellen.
Nicht alle in JavaScript integrierten Objekte können wie Date instanziiert werden. Es gibt Objekte, die nicht mit einem Konstruktor kommen : Math, JSON und Reflect, aber sie sind immer noch gewöhnliche Objekte.
Unter den integrierten Objekten, die Konstruktoren haben, kann Symbol im Konstruktorstil nicht aufgerufen werden, um eine neue Symbol Instanz zu instanziieren. Es kann nur als Funktion aufgerufen werden, die einen neuen Symbolwert zurückgibt.
Unter den integrierten Objekten, die Konstruktoren haben, müssen nicht alle ihre Konstruktoren mit dem new Operator aufgerufen werden, um instanziiert zu werden. Function, Array, Error und RegExp können auch als Funktionen aufgerufen werden, ohne das new Schlüsselwort zu verwenden, und sie werden eine neue Objektinstanz instanziieren und zurückgeben.
2. Das Reflect Objekt
Back-End-Programmierer sind möglicherweise bereits mit Reflection-APIs vertraut. Reflection ist eine Eigenschaft von Programmiersprachen, um einige der grundlegenden Entitäten wie Objekte und Klassen zur Laufzeit zu überprüfen und zu aktualisieren .
In JavaScript konnten Sie bereits einige Reflektionsoperationen mit Object ausführen. Aber auch in JavaScript wurde eine echte Reflection API entwickelt .
Das Reflect Objekt verfügt über eine Reihe von Methoden zum Erstellen und Aktualisieren von Objektinstanzen . Das Reflect Objekt hat keinen Konstruktor, daher kann es nicht mit dem new Operator instanziiert werden und genau wie Math und JSON kann es auch nicht als Funktion aufgerufen werden.
Reflect hat jedoch ein Äquivalent des new Operators : die Reflect.construct() -Methode.
Reflect.construct (target, argumentsList [, newTarget])
Sowohl das newTarget als auch das optionale newTarget Argument sind Objekte mit eigenen Konstruktoren, während argumentsList eine Liste von Argumenten ist, die an den Konstruktor von target .
var dt = Reflect.construct (Datum, [2017, 0, 1]); console.log (dt); // So Jan 01 2017 00:00:00 GMT + 0100
Der obige Code hat denselben Effekt wie die Instanziierung von Date() mit dem new Operator. Obwohl Sie immer noch new, ist Reflection ein ECMAScript 6-Standard . Sie können auch das newTarget Argument verwenden, was einen weiteren Vorteil gegenüber dem new Operator darstellt.
Der Wert des Prototyps von newTarget (um genau zu sein, ist der Prototyp des newTarget von newTarget ) wird zum Prototyp der neu erstellten Instanz .
Ein Prototyp ist die Eigenschaft eines Objekts, dessen Wert ebenfalls ein Objekt ist, das die Eigenschaften des ursprünglichen Objekts enthält. Kurz gesagt, ein Objekt erhält seine Mitglieder von seinem Prototyp.
Hier sehen wir ein Beispiel:
Klasse A {Konstruktor () {this.message = function () {console.log ('Nachricht von A')}}} Klasse B {Konstruktor () {} Nachricht () {console.log ('Nachricht von B') } data () {console.log ('Daten von B')}} obj = Reflect.construct (A, [], B) console.log (obj.message ()); // Nachricht von A console.log (obj.data ()); // Daten von B console.log (obj instanceof B) // true Durch die Übergabe von B als drittem Argument an Reflect.construct() wird der Prototypwert des obj Objekts als der Prototyp von B Konstruktor (mit den Eigenschaften message und data ) erstellt.
Somit kann obj auf die message und die data zugreifen, die an ihrem Prototyp verfügbar sind. Aber da obj mit A, hat es auch seine eigene message es von A .
Obwohl obj als ein Array obj ist, ist es keine Instanz von Array, da sein Prototyp auf Object .
obj = Reflect.construct (Array, [1, 2, 3], Objekt) console.log (obj) // Array [1, 2, 3] console.log (obj instanceof Array) // false
Reflect.construct() kann nützlich sein, wenn Sie ein Objekt mit mehreren Blaupausen erstellen möchten.
3. Die Object.create() -Methode
Sie können auch ein neues gewöhnliches Objekt mit einem bestimmten Prototyp über Object.create() . Auch dies mag der Verwendung des new Operators sehr ähnlich sein, ist es aber nicht.
Object.create (O [, EigenschaftenObjekt))
Das O Argument ist ein Objekt, das den Prototyp für das neue Objekt bereitstellt, das erstellt wird. Das optionale propertiesObject Argument ist eine Liste von Eigenschaften, die Sie dem neuen Objekt hinzufügen möchten.
Klasse A {constructor () {} message () {console.log ('Nachricht von A')}} var obj = Object.create (neu A (), {data: {writable: true, konfigurierbar: true, value: function () {return 'data from obj'}}} console.log (obj.message ()) // Nachricht von A console.log (obj.data ()) // Daten von obj obj1 = Object.create ( new A (), {foo: {beschreibbar: true, konfigurierbar: true, value: function () {return 'foo von obj1'}}} console.log (obj1.message ()) // Nachricht von Eine Konsole. log (obj1.foo ()) // foo von obj1 Im obj Objekt ist die hinzugefügte Eigenschaft data, während es in obj1 foo . Wie Sie sehen, können Eigenschaften und Methoden zu einem neuen Objekt hinzugefügt werden .
Dies ist ideal, wenn Sie mehrere Objekte der gleichen Art, aber mit verschiedenen zusätzlichen Eigenschaften oder Methoden erstellen möchten. Die Object.create() erspart das Object.create() sie alle separat zu codieren.
Wie man besseres CSS mit Leistung im Verstand schreibt
In der heutigen Post werden wir uns Gedanken über die Code-Optionen machen, die wir in CSS für eine verbesserte Website-Leistung treffen können. Bevor wir jedoch auf diese Möglichkeiten eingehen, wollen wir zunächst einen kurzen Blick auf den Workflow der Webseitenwiedergabe werfen, um uns auf das Thema zu konzentrieren problematische (performance) Bereiche, die über CSS lösbar sind. Hier
Interaktive Verpackung: 15 clevere Beispiele, die Sie auschecken sollten
Unsere Verpackungsauswahl wird ständig weiterentwickelt. Heute herrscht jedoch mehr Kreativität als je zuvor . Die Menschen verlangen etwas anderes, entweder durch Aktivität, einzigartige Aussagen oder Humor.Hier kommt interaktive Verpackungen ins Spiel. Interaktive Verpackungen sind nicht nur im visuellen Bereich gut gestaltet, sondern dienen auch einem Zweck wie Unterhaltung oder Funktionalität . Wi
