Muster und Best Practices für die Erstellung von JavaScript-Objekten

„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 modifizieren, dass jedes von ihr erstellte Objekt nur seine eigenen eindeutigen Daten enthält, während Anfragen nach anderen 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 类

JavaScript最新的相关改进是ES6 类，用新语法来实现上述功能要简洁得多。

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

  f() {}
  g() {}
}

var o = new Thing();

比较

多年以来，JavaScript开发者们与原型链的关系总是若即若离，纠缠不清。而今天我们最有可能遇到的两种创建对象的方式，一种是强烈依赖原型链的class语法，另一种则是完全不依赖原型链的工厂函数语法。这两种方式在性能上和特点上是不一样的——尽管差别不太大。

性能

今天的JavaScript引擎已经经过了大幅度的优化，以至于很难通过JavaScript代码来推断怎样会比较快。关键在于测量方法。然而测量方法有时也会失灵。通常每六周就会有更新的JavaScript引擎发布，而在这之前采取的测量方法，和基于这种测量方法做出的决策都有可能失去意义。因此，我的经验法则是选择最官方、最广泛使用的语法，因为大多数时候它经历的实践检验最多，因而性能是最高的。目前来说class语法最符合这一点，在我写这篇文章时，class语法大约比返回字面量的工厂函数快3倍。

特点

随着ES6的发布，类与工厂函数之间曾经存在的几点差异消失了。现在，工厂函数和类都能够强制实现真正的私有数据——工厂函数通过闭包实现，类通过WeakMap实现。两者都能实现多重继承——工厂函数可以将其他属性混入自己的对象，类也可以将其他属性混入自己的原型，或者通过类工厂，通过代理也能实现。工厂函数和类也都可以在需要的时候返回任意对象，语法也都很简单。

结论

综合考虑，我更倾向于class语法。它标准、简单、干净、快速，还提供了所有曾经只有函数工厂才具备的特点。

 以上就是JavaScript 创建对象模式与最佳实践的内容，更多相关内容请关注PHP中文网（www.php.cn）！