Zusammenfassung verschiedener Möglichkeiten zum Erstellen von Objekten in js und ihrer Vor- und Nachteile

Frühe Erstellungsmethode

var obj = neues Objekt()
Objektname = "xxx"
obj.alter = 18
Oder verwenden Sie das Objektliteral var o1 = {
  Name: "xxx",
  sagen: () => {}
}
var o2 = {
  Name: "xxx",
  sagen: () => {}
}

Nachteile: Die Verwendung derselben Schnittstelle zum Erstellen vieler Objekte führt zu einer Menge doppeltem Code

Fabrikmuster

Funktion Fabrik (Name, Alter) {
  var obj = neues Objekt()
  obj.name = Name
  obj.age = Alter
  Rückgabeobjekt
}
var o1 = Fabrik(1, 11)
var o2 = Fabrik(2, 22)

Vorteile: Lösung des Code-Duplikationsproblems bei der Erstellung mehrerer ähnlicher Objekte Nachteile: Keine Identifizierung des Objekttyps

Konstruktormuster

Konstruktoren können in ECMAScript verwendet werden, um Objekte bestimmter Typen zu erstellen, etwa native Konstruktoren wie Object und Array. Darüber hinaus können Sie benutzerdefinierte Konstruktoren erstellen, um Eigenschaften und Methoden benutzerdefinierter Objekte zu definieren.

Funktion Person(Name, Alter) {
  dieser.name = Name
  this.age = Alter
  dies.sayName = function() {
    console.log(dieser.Name)
  }
}
var o1 = neue Person(1,11)
var o2 = neue Person(2,22)
o1.sayName() // 1
o2.sayName() // 2

Vorteile: Instanzen, die im Konstruktormodus erstellt werden, können Typkennungen unterscheiden (Instanzbeurteilung).
Nachteile: Jede Methode muss auf der Instanz neu erstellt werden. Beispielsweise hat die sayName-Methode zweier Instanzen dieselbe Aufgabe, erstellt aber tatsächlich zwei Funktionsinstanzen.

Konstruktormusteroptimierung

Funktion Person(Name, Alter) {
  dieser.name = Name
  this.age = Alter
}
Funktion sayName () {
  console.log(dieser.Name)
}
var o1 = neue Person(1,11)
var o2 = neue Person(2,22)
o1.sayName() // 1
o2.sayName() // 2

Vorteile: Mehrere Instanzen teilen sich im globalen Bereich definierte Funktionen, wodurch das Problem gelöst wird, dass zwei Funktionen dasselbe tun. Nachteile: Im globalen Bereich definierte Funktionen können tatsächlich nur von einem bestimmten Objekt aufgerufen werden, der Name im globalen Bereich ist seines Namens nicht würdig, und wenn ein Objekt viele Methoden definieren muss, müssen viele globale Funktionen erstellt werden, wodurch der benutzerdefinierte Objekttyp keine Kapselungseigenschaften aufweist.

Prototyp-Muster

Jede von uns erstellte Funktion hat eine Prototypeigenschaft, die ein Zeiger auf ein Objekt ist. Der Zweck dieses Objekts besteht darin, Eigenschaften und Methoden zu enthalten, die von allen Instanzen eines bestimmten Typs gemeinsam genutzt werden können. Das heißt, der Prototyp ist das Prototypobjekt der vom Konstruktor erstellten Objektinstanz.

Funktion Person(){}
Person.Prototyp.Name = '123'
Person.Prototyp.Alter = 18
Person.prototype.sayName = Funktion() {
  console.log(dieser.Name)
}
var o1 = neue Person(1,11)
var o2 = neue Person(2,22)
o1.sayName() // 123
o2.sayName() // 123

Vorteile: Lösen Sie das Problem der gemeinsamen Nutzung von Eigenschaften oder Ereignissen durch Instanzen. Nachteile: Da Instanzen Eigenschaften gemeinsam nutzen, führen Änderungen an einer Instanz bei Eigenschaften, deren Werte Referenztypen sind, zu Änderungen an den Werten, auf die andere Instanzen zugreifen. wie:

Funktion Person(){}
Person.Prototyp.Name = '123'
Person.Prototyp.Alter = 18
Person.Prototyp.Freunde = ['a', 'b']
Person.prototype.sayName = Funktion() {
  console.log(dieser.Name)
}
var o1 = neue Person(1,11)
var o2 = neue Person(2,22)
o1.friends.push('c')
console.log(o2.friends) // ['a', 'b', 'c']

Kombination aus Konstruktor- und Prototypmustern

Funktion Person(Name, Alter) {
  dieser.name = Name
  this.age = Alter
  diese.freunde = ['a']
}
Person.Prototyp = {
  Konstrukteur: Person,
  sageName: Funktion() {
    console.log(dieser.Name)
  }
}
var o1 = neue Person(1,11)
var o2 = neue Person(2,22)
o1.sayName() // 1
o2.sayName() // 2

Vorteile: Jede Instanz hat ihre eigenen Eigenschaften, teilt gleichzeitig die Methodenreferenz und unterstützt auch die Parameterübergabe

Dynamisches Prototypmuster

Funktion Person(Name, Alter) {
  dieser.name = Name
  this.age = Alter
  diese.freunde = ['a']
  wenn(Typ von diesem.sayName != 'Funktion') {
    Person.prototype.sayName = Funktion() {
      console.log(dieser.Name)
    }
  }
}
var o1 = neue Person(1,11)
var o2 = neue Person(2,22)
o1.sayName() // 1
o2.sayName() // 2

Vorteile: Nur einmal erstellen, wenn die Methode nicht existiert, wodurch wiederholtes Erstellen vermieden wird

Muster des parasitären Konstruktors

Funktion SpezialArray() {
  var o = neues Array()
  // Wert hinzufügen o.push.apply(o, Argumente)
  // Methode o.toPipedString = function(){ hinzufügen
    gib dies zurück.join('|')
  }
  Rückkehr o
}
var o1 = neues SpezialArray(1,11)
o1.toPipedString() // 1|11

Vorteile: Hinzufügen spezieller Methoden zu einem Objekt, ohne den ursprünglichen Konstruktor zu ändern. Nachteile: Das zurückgegebene Objekt hat keine Beziehung zum Konstruktor und dem Prototyp des Konstruktors, die Methode unterscheidet sich nicht von einem außerhalb des Konstruktors erstellten Objekt.

Sicheres Konstruktormuster

Funktion Person(Name) {
  var o = neues Objekt()
  // Methode o.getName = function(){ hinzufügen
    Rückgabename
  }
  Rückkehr o
}
var o1 = neue Person(1)
o1.getName() // 1

Im Gegensatz zu parasitären Konstruktoren werden this- und new-Aufrufe nicht verwendet. Vorteile: Es gibt keine Möglichkeit, auf den Namen zuzugreifen, außer getName, daher kann es in einigen sicheren Umgebungen verwendet werden. Nachteile: Ähnlich wie beim Factory-Muster ist es unmöglich, den Typ des Objekts zu identifizieren.

Oben finden Sie detaillierte Informationen zu den verschiedenen Möglichkeiten zum Erstellen von Objekten in js sowie eine Zusammenfassung ihrer Vor- und Nachteile. Weitere Informationen zum Erstellen von Objekten in js finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!