Detaillierte Codebeispiele für JavaScript-Erstellungsobjektmuster und Best Practices

„Objekte erstellen“ in JavaScript ist ein komplexes Thema. Diese Sprache bietet viele Möglichkeiten zum Erstellen von Objekten, und sowohl Neulinge als auch erfahrene Benutzer sind möglicherweise verwirrt, welche sie wählen sollen. Obwohl es viele Möglichkeiten zum Erstellen von Objekten gibt und die Syntax sehr unterschiedlich erscheinen mag, können sie tatsächlich ähnlicher sein, als Sie denken. Dieser Artikel nimmt Sie mit auf eine Reise, um die Methoden zur Objekterstellung zu klären und die Abhängigkeiten und progressiven Beziehungen zwischen verschiedenen Methoden aufzudecken.

Objektliterale

Unser erster Stopp ist zweifellos der einfachste Weg, Objekte zu erstellen, Objektliterale. JavaScript predigt immer, dass es Objekte „aus dem Nichts“ erstellen kann – keine Klassen, keine Vorlagen, keine Prototypen – und „pop“, ein Objekt mit Methoden und Daten, erscheint.

var o = {
  x: 42,
  y: 3.14,
  f: function() {},
  g: function() {}
};

Aber diese Methode hat einen Nachteil: Wenn wir an anderer Stelle ein Objekt des gleichen Typs erstellen möchten, müssen wir die Methoden, Daten und Initialisierung dieses Objekts kopieren und einfügen. Wir brauchen eine Möglichkeit, Objekte desselben Typs stapelweise statt nur einzeln zu erstellen.

Fabrikfunktion

Unser nächster Stopp ist die Werksfunktion. Offensichtlich ist es am einfachsten, mit dieser Methode eine Klasse von Objekten mit derselben Struktur, Schnittstelle und Implementierung zu erstellen. Wir erstellen kein Objektliteral direkt, sondern verwenden das Objektliteral als Rückgabewert der Funktion. Wenn wir Objekte desselben Typs mehrmals oder an mehreren Stellen erstellen müssen, müssen wir diese Funktion nur aufrufen.

function thing() {
  return {
    x: 42,
    y: 3.14,
    f: function() {},
    g: function() {}
  };
}

var o = thing();

Aber dieser Ansatz hat auch einen Nachteil: Er führt zu einer Speicheraufblähung, da jedes Objekt eine unabhängige Kopie der Factory-Funktion enthält. Theoretisch möchten wir, dass alle Objekte eine Kopie der Factory-Funktion gemeinsam nutzen.

Prototypenkette

JavaScript bietet einen integrierten Mechanismus zum Teilen von Daten zwischen Objekten, die sogenannte Prototypenkette. Wenn wir auf eine Eigenschaft eines Objekts zugreifen, delegiert es die Anforderung an ein anderes Objekt. Damit können wir die Factory-Funktion so ändern, dass jedes von ihr erstellte Objekt nur seine eigenen eindeutigen Daten enthält, während Anfragen für andere Eigenschaften alle an ein gemeinsames Objekt in der Prototypenkette delegiert werden.

var thingPrototype = {
  f: function() {},
  g: function() {}
};

function thing() {
  var o = Object.create(thingPrototype);

  o.x = 42;
  o.y = 3.14;

  return o;
}

var o = thing();

Tatsächlich verfügt JavaScript selbst über integrierte Mechanismen zur Unterstützung dieses allgemeinen Musters. Wir müssen dieses gemeinsam genutzte Objekt (dh das Prototypobjekt) nicht selbst erstellen. JavaScript erstellt automatisch ein Prototypobjekt für jede Funktion. Wir können die gemeinsam genutzten Daten direkt in dieses Objekt einfügen.

thing.prototype.f = function() {};
thing.prototype.g = function() {};

function thing() {
  var o = Object.create(thing.prototype);

  o.x = 42;
  o.y = 3.14;

  return o;
}

var o = thing();

Aber diese Methode hat auch einen Nachteil: Sie führt zu Duplikaten. Die erste und letzte Zeile der obigen Ding-Funktion werden in jeder „Factory-Funktion des Delegaten-Prototyps“ fast ohne Unterschied wiederholt.

ES5-Klassen

Wir können diese sich wiederholenden Codes extrahieren und sie in eine benutzerdefinierte Funktion einfügen. Diese Funktion erstellt ein Objekt und stellt eine Delegationsbeziehung (Vererbung) mit dem Prototyp einer anderen beliebigen Funktion (Parameterfunktion) her. Anschließend verwenden wir das neu erstellte Objekt als Parameter, rufen diese Funktion auf (Parameterfunktion) und geben diese schließlich zurück neues Objekt.

function create(fn) {
  var o = Object.create(fn.prototype);

  fn.call(o);

  return o;
}

// ...

Thing.prototype.f = function() {};
Thing.prototype.g = function() {};

function Thing() {
  this.x = 42;
  this.y = 3.14;
}

var o = create(Thing);

Tatsächlich verfügt JavaScript auch über eine integrierte Unterstützung für diese Methode. Die von uns definierte Create-Funktion ist eigentlich eine grundlegende Implementierung des neuen Schlüsselworts, sodass wir create problemlos durch new ersetzen können.

Thing.prototype.f = function() {};
Thing.prototype.g = function() {};

function Thing() {
  this.x = 42;
  this.y = 3.14;
}

var o = new Thing();

Die Station, an der wir angekommen sind, wird oft als ES5-Klasse bezeichnet. Es erstellt Objekte über Funktionen, delegiert die Daten, die gemeinsam genutzt werden müssen, an Prototypobjekte und verwendet das Schlüsselwort new, um wiederholte Logik zu verarbeiten.

Aber diese Methode hat auch einen Nachteil: Sie ist ausführlich und hässlich, und bei der Implementierung der Vererbung wird sie noch ausführlicher und hässlicher.

ES6-Klassen

Die neueste damit verbundene Verbesserung in JavaScript sind ES6-Klassen, mit denen sich die oben genannten Funktionen mit neuer Syntax viel einfacher implementieren lassen.

class Thing {
  constructor() {
    this.x = 42;
    this.y = 3.14;
  }

  f() {}
  g() {}
}

var o = new Thing();

Vergleich

JavaScript-Entwickler hatten seit vielen Jahren immer eine distanzierte und verwickelte Beziehung zur Prototypenkette. Die beiden Möglichkeiten, denen wir heute am wahrscheinlichsten begegnen werden, sind die Klassensyntax, die stark auf der Prototypenkette basiert, und die andere ist die Factory-Funktionssyntax, die überhaupt nicht auf der Prototypenkette basiert. Die beiden Methoden unterscheiden sich hinsichtlich Leistung und Funktionen – obwohl die Unterschiede nicht groß sind.

Leistung

Die heutigen JavaScript-Engines sind so stark optimiert, dass es schwierig ist, aus dem JavaScript-Code abzuleiten, was schneller ist. Der Schlüssel liegt in der Messmethode. Dennoch scheitern Messmethoden manchmal. In der Regel wird alle sechs Wochen eine aktualisierte JavaScript-Engine veröffentlicht. Davor durchgeführte Messungen und auf der Grundlage dieser Messungen getroffene Entscheidungen können bedeutungslos werden. Daher ist meine Faustregel, die am häufigsten verwendete Syntax zu wählen, da diese meist in der Praxis am meisten getestet wurde und daher die höchste Leistung aufweist. Die Klassensyntax ist hierfür derzeit die beste, und während ich diesen Artikel schreibe, ist die Klassensyntax etwa dreimal schneller als eine Factory-Funktion, die ein Literal zurückgibt.

Funktionen

Mit der Veröffentlichung von ES6 sind die wenigen Unterschiede, die es einst zwischen Klassen und Factory-Funktionen gab, verschwunden. Jetzt können sowohl Factory-Funktionen als auch Klassen wirklich private Daten erzwingen – Factory-Funktionen über Closures und Klassen über WeakMap. Beide können Mehrfachvererbung implementieren – Factory-Funktionen können andere Eigenschaften in ihre eigenen Objekte mischen, und Klassen können andere Eigenschaften in ihre eigenen Prototypen mischen, oder über Klassenfabriken oder über Proxys. Factory-Funktionen und -Klassen können bei Bedarf auch jedes beliebige Objekt zurückgeben, und die Syntax ist sehr einfach.

Fazit

Alles in allem bevorzuge ich die Klassensyntax. Es ist standardmäßig, einfach, sauber, schnell und bietet alle Funktionen, die früher nur in Funktionsfabriken verfügbar waren.

Das Obige ist eine detaillierte Erläuterung der Codebeispiele für JavaScript-Erstellungsobjektmuster und Best Practices. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!