So verwenden Sie Klassen, Konstruktoren und Factory-Funktionen in Javascript-js-Tutorial-php.cn

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung von Klassen, Konstruktoren und Factory-Funktionen in Javascript vor. Freunde, die es benötigen, können darauf zurückgreifen.

In der ES6-Ära haben sich unsere Methoden zum Erstellen von Objekten verbessert Verschiedene Szenarien Als nächstes können wir verschiedene Methoden zum Erstellen auswählen. Derzeit gibt es drei Hauptmethoden zum Erstellen von Objekten: das Klassenschlüsselwort, den Konstruktor und die Factory-Funktion. Sie sind alle Mittel zum Erstellen von Objekten, aber sie sind unterschiedlich. Während der täglichen Entwicklung müssen Sie auch basierend auf diesen Unterschieden auswählen.

Schauen wir uns zunächst einmal an, wie diese drei Methoden aussehen

// class 关键字，ES6新特性
class ClassCar {
 drive () {
  console.log(&#39;Vroom!&#39;);
 }
}
const car1 = new ClassCar();
console.log(car1.drive());
// 构造函数
function ConstructorCar () {}
ConstructorCar.prototype.drive = function () {
 console.log(&#39;Vroom!&#39;);
};
const car2 = new ConstructorCar();
console.log(car2.drive());
// 工厂函数
const proto = {
 drive () {
  console.log(&#39;Vroom!&#39;);
 }
};
function factoryCar () {
 return Object.create(proto);
}
const car3 = factoryCar();
console.log(car3.drive());

Nach dem Login kopieren

Diese Methoden basieren alle auf der Erstellung von Prototypen und unterstützen alle die Implementierung privater Variablen in der Konstruktorfunktion. Mit anderen Worten: Diese Funktionen haben größtenteils die gleichen Eigenschaften und sind in vielen Szenarien sogar gleichwertig.

In Javascript kann jede Funktion ein neues Objekt zurückgeben. Wenn es sich nicht um einen Konstruktor oder eine Klasse handelt, wird sie als Factory-Funktion bezeichnet.

ES6-Klassen sind eigentlich Syntaxzucker für Konstruktoren (zumindest ist es in dieser Phase so implementiert), daher gilt alles, was als nächstes besprochen wird, für Konstruktoren und ES6-Klassen:

class Foo {}
console.log(typeof Foo); // function

Nach dem Login kopieren

Die Vorteile von Konstruktoren und ES6-Klassen

In den meisten Büchern lernen Sie die Verwendung von Klassen und Konstruktoren
' this ' zeigt auf das neue Objekt.
Einige Leute mögen die Lesbarkeit des neuen Schlüsselworts
Es kann einige kleine Unterschiede in Details geben, aber wenn es dabei keine Probleme gibt Machen Sie sich wegen des Entwicklungsprozesses keine allzu großen Sorgen.

Nachteile von Konstruktoren und ES6-Klassen

1. Sie benötigen das neue Schlüsselwort

By ES6 müssen sowohl Konstruktoren als auch Klassen das Schlüsselwort new haben.

function Foo() {
 if (!(this instanceof Foo)) { return new Foo(); }
}

Nach dem Login kopieren

Wenn Sie in ES6 versuchen, eine Klassenfunktion ohne das Schlüsselwort new aufzurufen, wird eine Aufgabe ausgelöst. Wenn Sie eines ohne das Schlüsselwort new möchten, können Sie es nur mit einer Factory-Funktion umschließen.

2. Details während des Instanziierungsprozesses werden der externen API angezeigt

Alle Aufrufe stehen in engem Zusammenhang mit der Implementierung des Konstruktors. Wenn Sie während des Konstruktionsprozesses selbst einige Änderungen vornehmen müssen und Füße, das ist eine sehr lästige Sache.

3. Der Konstruktor entspricht nicht der Open/Closed-Regel

Aufgrund der detaillierten Verarbeitung des neuen Schlüsselworts verstößt der Konstruktor gegen die Open/Closed-Regel: Die API sollte offen sein für Erweiterung und vermeiden Sie Änderungen.

Ich habe einmal in Frage gestellt, dass Klassen und Factory-Funktionen so ähnlich sind, dass ein Upgrade der Klassenfunktion auf eine Factory-Funktion keine Auswirkungen haben wird, in JavaScript jedoch schon.

Wenn Sie anfangen, Konstruktoren oder Klassen zu schreiben, aber im weiteren Verlauf feststellen, dass Sie die Flexibilität der Factory-Funktion benötigen, können Sie zu diesem Zeitpunkt nicht einfach die Funktion ändern und weggehen.

Leider sind Sie ein JavaScript-Programmierer und die Umwandlung eines Konstruktors in eine Factory-Funktion ist ein großer Vorgang:

// 原来的实现：
// class Car {
//  drive () {
//   console.log(&#39;Vroom!&#39;);
//  }
// }
// const AutoMaker = { Car };
// 工厂函数改变的实现：
const AutoMaker = {
 Car (bundle) {
  return Object.create(this.bundle[bundle]);
 },
 bundle: {
  premium: {
   drive () {
    console.log(&#39;Vrooom!&#39;);
   },
   getOptions: function () {
    return [&#39;leather&#39;, &#39;wood&#39;, &#39;pearl&#39;];
   }
  }
 }
};
// 期望中的用法是：
const newCar = AutoMaker.Car(&#39;premium&#39;);
newCar.drive(); // &#39;Vrooom!&#39;
// 但是因为他是一个库
// 许多地方依然这样用:
const oldCar = new AutoMaker.Car();
// 如此就会导致:
// TypeError: Cannot read property &#39;undefined&#39; of
// undefined at new AutoMaker.Car

Nach dem Login kopieren

Im obigen Beispiel haben wir mit einer Klasse begonnen und sie schließlich in Come geändert Erstellen Sie eine Factory-Funktion, die Objekte basierend auf einem bestimmten Prototyp erstellen kann. Eine solche Funktion kann häufig zur Schnittstellenabstraktion und zur Anpassung an spezielle Anforderungen verwendet werden.

4. Verwenden Sie Konstruktoren, um Instanzen eine Möglichkeit zu geben

Der Unterschied zwischen Konstruktoren und Factory-Funktionen ist der Instanzen-Operator, um die Korrektheit ihres Codes sicherzustellen. Aber um ehrlich zu sein, ist dies sehr problematisch und es wird empfohlen, die Verwendung von Instanzen zu vermeiden.

instanceof kann liegen.

// instanceof 是一个原型链检查
// 不是一个类型检查
// 这意味着这个检查是取决于执行上下文的,
// 当原型被动态的重新关联,
// 你就会得到这样令人费解的情况
function foo() {}
const bar = { a: &#39;a&#39;};
foo.prototype = bar;
// bar是一个foo的实例吗，显示不是
console.log(bar instanceof foo); // false
// 上面我们看到了，他的确不是一个foo实例
// baz 显然也不是一个foo的实例，对吧?
const baz = Object.create(bar);
// ...不对.
console.log(baz instanceof foo); // true. oops.

Nach dem Login kopieren

instanceof führt keine Prüfungen wie andere stark typisierte Sprachen durch, sondern prüft lediglich das Objekt in der Prototypenkette.

In einigen Ausführungskontexten ist es ungültig, beispielsweise wenn Sie Constructor.prototype ändern.

Ein weiteres Beispiel ist, dass Sie mit einem Konstruktor oder einer Klasse beginnen und diese dann in ein anderes Objekt erweitern, genau wie in der obigen Situation, in der Sie sie in eine Factory-Funktion umschreiben. Zu diesem Zeitpunkt wird es auch Probleme mit der Instanz von geben.

Alles in allem ist „Instanceof“ eine weitere große Änderung bei Konstruktor- und Factory-Funktionsaufrufen.

Vorteile der Verwendung von Klassen

Ein praktisches, eigenständiges Schlüsselwort
Die einzige maßgebliche Möglichkeit, Klassen in JavaScript zu implementieren.
Es ist eine gute Erfahrung für andere Entwickler, die Erfahrung in der Entwicklung von Klassensprachen haben.

Nachteile der Verwendung von Klassen

Alle Nachteile von Konstruktoren, plus:

Die Verwendung des Schlüsselworts „extens“ zum Erstellen einer problematischen Klasse für Benutzer. Es ist ein großes Problem Verlockung.
Die hierarchische Vererbung von Klassen verursacht viele bekannte Probleme, darunter fragmentierte Basisklassen (die Basisklasse wird durch Vererbung zerstört), Gorilla-Bananen-Probleme (Objekte werden mit komplexen Kontexten vermischt) und Duplizierung durch Notwendigkeit (Klassen werden diversifiziert vererbt). müssen von Zeit zu Zeit geändert werden) und so weiter.

Auch wenn Sie mit den anderen beiden Methoden möglicherweise ebenfalls in diese Probleme geraten, führt Sie die Umgebung bei Verwendung des Schlüsselworts „extend“ auf diesen Weg. Mit anderen Worten: Es führt Sie dazu, Code mit unflexiblen Beziehungen zu schreiben, statt wiederverwendbareren Code.

Vorteile der Verwendung von Factory-Funktionen

Factory-Funktionen sind flexibler als Klassen und Konstruktoren und führen nicht auf die falsche Fährte. Sie werden dadurch auch nicht in einer tiefen Vererbungskette stecken bleiben. Sie können viele Methoden verwenden, um die Vererbung zu simulieren

1. Geben Sie jedes Objekt mit einem beliebigen Prototyp zurück

Sie können beispielsweise verschiedene Instanzen eines Mediaplayers über dieselbe Implementierung erstellen. Instanzen können für verschiedene erstellt werden Medienformate, die Verwendung verschiedener APIs oder eine Ereignisbibliothek können für DOM-Ereignisse oder WS-Ereignisse sein.

Die Factory-Funktion kann Objekte auch über den Ausführungskontext instanziieren, was vom Objektpool und einem flexibleren Vererbungsmodell profitieren kann.

2. Machen Sie sich keine Sorgen über komplexes Refactoring

Sie werden nie die Notwendigkeit haben, Factory-Funktionen in Konstruktoren umzuwandeln, daher ist kein Refactoring erforderlich.

3. Nein neu

Sie verwenden nicht das Schlüsselwort new, um ein neues Objekt zu erstellen, Sie können diesen Prozess selbst meistern.

4. Standardisieren Sie dieses Verhalten

Dies ist das, mit dem Sie vertraut sind, und Sie können es verwenden, um das übergeordnete Objekt abzurufen. In „player.create()“ zeigt dies beispielsweise auf den Spieler, und andere können auch durch „Aufruf“ und „Anwenden“ gebunden werden.

5. Keine Probleme mit der Instanz von

6. Manche Leute mögen die Lesbarkeit und Intuitivität, direkt ohne Neues zu schreiben.

Nachteile von Factory-Funktionen

verarbeitet Prototypen nicht automatisch, und Factory-Funktionsprototypen haben keinen Einfluss auf die Prototypenkette .
dies verweist nicht automatisch auf das neue Objekt in der Factory-Funktion.
Es kann einige kleine Unterschiede im Detail geben, aber wenn es während des Entwicklungsprozesses keine Probleme gibt, machen Sie sich keine allzu großen Sorgen.

Fazit

Klasse mag meiner Meinung nach ein praktisches Schlüsselwort sein, aber es kann es nicht verbergen. Wird ahnungslos führen Benutzer in die Grube der Vererbung. Ein weiteres Risiko besteht darin, dass Sie in Zukunft Factory-Funktionen nutzen möchten und sehr große Änderungen vornehmen müssen.

Wenn Sie in einem relativ großen Team arbeiten und eine öffentliche API ändern möchten, können Sie in Code eingreifen, auf den Sie keinen Zugriff haben, sodass Sie die Auswirkungen geänderter Funktionen nicht ignorieren können .

Eines der großartigen Dinge am Fabrikmuster ist, dass es nicht nur leistungsfähiger und flexibler ist, sondern auch das gesamte Team dazu ermutigt, die API einfacher, sicherer und leichter zu machen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die WebSocket-Kommunikationsfunktion in NodeJS

So implementieren Sie Graffiti im WeChat-Applet

Detaillierte Erklärung zur Verwendung übergeordneter Komponenten „außerhalb“ von React-Komponenten

Detaillierte Erklärung des iterierbaren Protokolls in der ES6-Syntax

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Klassen, Konstruktoren und Factory-Funktionen in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!