Detaillierte Erläuterung verschiedener Möglichkeiten zum Erstellen von Objekten und Objektmethoden in js

Detaillierte Erläuterung verschiedener Möglichkeiten zum Erstellen von Objekten und Objektmethoden in js

Dieser Artikel ist der zweite Artikel über Objekte in Kapitel 8 des JS Red Book.

Mehrere Modi zum Erstellen von Objekten:

Fabrikmuster:

Fabrik heißt Funktion. Der Kern des Factory-Musters besteht darin, eine Funktion zu definieren, die ein neues Objekt zurückgibt.

 Funktion getObj(Name, Alter) {
  let obj = {}
  obj.name = Name
  obj.age = Alter
  Rückgabeobjekt
 }
 let person1 = getObj("cc", 31)

Nachteil: Unbekannt, um welchen Typ es sich bei dem neu erstellten Objekt handelt

Konstruktormuster:

Holen Sie sich eine Objektinstanz über einen Konstruktor.
Der Unterschied zwischen dem Konstruktor- und dem Factory-Muster ist:
1. Fügen Sie dies zum Konstruktorfunktionskörper hinzu
2. Der Konstruktor hat keine Rückgabe
3. Verwenden Sie beim Aufrufen des Konstruktors das neue Schlüsselwort

 Funktion CreateObj(Name, Alter) {
  dieser.name = Name
  this.age = Alter
 }
 let person1 = neues CreateObj("cc", 31)
 console.log(person1)
 konsole.log(person1.constructor === CreateObj); // wahr
 console.log(person1 Instanz von CreateObj); // wahr

Zwei Fragen zu Konstruktoren:

1. Der einzige Unterschied zwischen einem Konstruktor und einer normalen Funktion ist die aufrufende Methode. Der Konstruktor muss das neue Schlüsselwort verwenden. Wenn „new“ nicht verwendet wird, werden dem globalen Objekt Attribute hinzugefügt. Im folgenden Beispiel fügt die Methode CreateObj dem Fensterobjekt die Attribute Name und Alter hinzu.

 Funktion CreateObj(Name, Alter) {
  dieser.name = Name
  this.age = Alter
 }
 ErstellenObj('cc', 10)
 konsole.log(Fenstername) // 'cc'

2. Probleme mit dem Konstruktor: Die Methoden im Konstruktor werden bei jeder Erstellung einer Instanz einmal erstellt.

person1.sayName() === person2.sayName() // false

Die Lösung besteht darin, sayName außerhalb von createObj zu definieren.

 Funktion sayName() {
  console.log(dieser.Name)
 }
 Funktion CreatePerson(Name, Alter) {
  dieser.name = Name
  this.age = Alter
  dies.sayName = sagName
 }
 let person1 = neue CreatePerson('Freude', 31)
 person1.sayName()

Dies führt jedoch dazu, dass der von benutzerdefinierten Typen referenzierte Code nicht gut gruppiert werden kann.

Prototyp-Modus:

Das Prinzip besteht darin, dass jede Funktion eine Prototyp-Eigenschaft hat. Ein Prototyp ist ein Objekt, dessen Eigenschaften und Methoden von allen Instanzen gemeinsam genutzt werden.
Es gibt zwei Gleichungen zum Prototypmuster:

 Funktion Person() { }
 let person1 = neue Person()
 Konsole.log(Person1.__proto__ === Person.Prototyp) // wahr
 konsole.log(Person.prototype.constructor === Person); // wahr

Drei Methoden für Prototypobjekte: isPrototype, getPrototypeof, setPrototypeOf, Object.create()

// isPrototypeOf bestimmt, ob das Prototypobjekt des Konstruktors das Prototypobjekt der Instanzfunktion Person() {} ist.
 let person1 = neue Person()
 console.log(Person.prototype.isPrototypeOf(person1)); // wahr
// Holen Sie sich das Prototypobjekt der Objektfunktion Person() {}
 let person1 = neue Person()
 Konsole.log(Objekt.getPrototypeOf(Person1) === Person.Prototype);
// Ein Objekt als Prototypobjekt eines anderen Objekts festlegen let person1 = {name: "cc"}
 let person2 = {Alter: 32}
 Objekt.setPrototypeOf(Person1,Person2)
 console.log(person1.name, person1.alter); // cc 32
// Erstelle ein neues Objekt mit einem Objekt als Prototypobjekt let person1 = {name: "cc"}
 let person2 = Objekt.erstellen(person1)
 person2.alter = 30
 Konsole.log(Person2.Name, Person2.Alter);

Gehen Sie folgendermaßen vor, um auf das Namensattribut eines Objekts „Person“ zuzugreifen:
1. Wenn die Person ein Namensattribut hat (auch wenn dieses Attribut null ist, wird null zurückgegeben), geben Sie den Wert des Namensattributs zurück. Wenn nicht, suchen Sie weiter im Prototypobjekt Person.prototype danach
2. Wenn der Prototyp ein Namensattribut hat, geben Sie den Wert des Namensattributs für den Prototyp zurück. Wenn nicht, geben Sie „undefiniert“ zurück.

Um festzustellen, ob sich eine Eigenschaft auf einer Instanz oder einem Prototyp befindet, können Sie hasOwnProperty verwenden.

 Funktion Person() {}
 Person.Prototyp.Name = "cc"
 let person1 = neue Person()
 konsole.log(person1.name) // 'cc'
 console.log(person1.hasOwnProperty("name")); // falsch

Um festzustellen, ob ein Objekt ein bestimmtes Attribut hat, verwenden Sie den Operator in

//Gibt „true“ zurück, wenn es im Objekt selbst oder im Prototyp gefunden wird 
Funktion Person() {}
 Person.Prototyp.Name = "cc"
 let person1 = neue Person()
 console.log("name" in person1) // true
 console.log(person1.hasOwnProperty("name")); // falsch

Methoden zum Zugriff auf Objekteigenschaften:

Objekt.Schlüssel()
for ... in // Geerbte Eigenschaften werden ebenfalls durchlaufen Object.getOwnPropertyNames(obj) // Listet sowohl aufzählbare als auch nicht aufzählbare Eigenschaften auf, der Rest ist identisch mit Object.keys() Object.getOwnPropertySymbols(obj) // Ähnlich wie getOwnPropertyNames, aber nur für Symbole
Reflect.ownKeys(obj) // Gleiches Ergebnis wie Object.keys()

Andere Möglichkeiten für den Zugriff auf Objekteigenschaften und Eigenschaftswerte:
Object.values() ist ein Array von Objektwerten, wobei der Symboltyp ausgelassen wird.
Object.entries() ist ein Array von Schlüssel-Wert-Paaren von Objekten, das den Schlüssel in eine Zeichenfolge umwandelt und dabei den Symboltyp auslässt.

 Funktion Person() {}
 Person.Prototyp.Name = "cc"
 let person = neue Person()
 Person.Alter = 21
 lass sy = Symbol('sy')
 person[sy] = 'lächeln'
 console.log(Objekt.Werte(Person)) // [ 21 ]
 console.log(Objekt.Einträge(Person)) // [ [ 'Alter', 21 ] ]

Damit ist dieser Artikel über verschiedene Möglichkeiten und Methoden zum Erstellen von Objekten in js abgeschlossen. Weitere relevante Inhalte zum Erstellen von Objekten in js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Zusammenfassung verschiedener Möglichkeiten zum Erstellen von Objekten in js und ihrer Vor- und Nachteile
  • Zusammenfassung der objektorientierten Objekterstellungsmethode in JavaScript
  • So erstellen Sie Funktionen und Objekte in JS
  • Zusammenfassung der Methoden zur Objekterstellung in JavaScript [Factory-Muster, Konstruktor-Muster, Prototyp-Muster usw.]
  • Zusammenfassung gängiger Möglichkeiten zum Erstellen von Objekten in JavaScript
  • Zusammenfassung gängiger Möglichkeiten zum Erstellen benutzerdefinierter Objekte in JavaScript
  • Eine umfassende Zusammenfassung von sieben Möglichkeiten zum Erstellen von Objekten in JavaScript
  • Analyse gängiger Methoden und Prinzipien zum Erstellen von JS-Objekten
  • Sieben Möglichkeiten zum Erstellen von Objekten in JavaScript (empfohlen)
  • Vier Möglichkeiten zum Erstellen von Objekten in JS

<<:  Detaillierte Erläuterung des Docker-Datenmanagements (Datenvolumes und Datenvolume-Container)

>>:  MySQL verwendet inet_aton und inet_ntoa, um IP-Adressdaten zu verarbeiten

Artikel empfehlen

Erstellen eines statischen Jenkins Docker-Agentknotens

Ein statischer Knoten ist auf einer Maschine fixi...

Google Translate Tool: Mehrsprachige Webseiten schnell umsetzen

Google China hat ein Übersetzungstool veröffentlic...

Ein praktischer Bericht über einen durch den MySQL-Start verursachten Unfall

Inhaltsverzeichnis Hintergrund So ermitteln Sie, ...

Beispielcode des Spread-Operators und seiner Anwendung in JavaScript

Der Spread-Operator ermöglicht die Erweiterung ei...

Lösen Sie das Problem des MySQL Threads_running-Surge und der langsamen Abfrage

Inhaltsverzeichnis Hintergrund Problembeschreibun...

Webdesigner ist ein geeignetes Talent

<br />Es gibt keine Straße auf der Welt. Wen...

Die 7 besten VSCode-Erweiterungen für Vue-Entwickler

Das Hinzufügen der richtigen VS Code-Erweiterung ...

Kann Docker das nächste „Linux“ werden?

Das Linux-Betriebssystem hat das Rechenzentrum in...