So verwenden Sie JS-Klassen, Konstruktoren und Factory-Funktionen

Dieses Mal erkläre ich Ihnen, wie Sie JS-Klassen, Konstruktoren und Factory-Funktionen verwenden. Welche Vorsichtsmaßnahmen gelten bei der Verwendung von JS-Klassen, Konstruktoren und Factory-Funktionen? ? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

In der ES6-Ära haben wir mehr Möglichkeiten, Objekte zu erstellen Wir können verschiedene Methoden wählen, um sie in verschiedenen Szenarien zu erstellen. 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 auf der Grundlage dieser Unterschiede auswählen.

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

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

Diese Methoden basieren 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 syntaktischer Zucker für Konstruktoren (zumindest werden sie in dieser Phase so implementiert), daher gilt alles, was als nächstes besprochen wird, für Konstruktoren und auch für ES6-Klassen:

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

Vorteile von Konstruktoren und ES6-Klassen

• In den meisten Büchern lernen Sie, Klassen und Konstruktoren zu verwenden.

• „this“ zeigt auf das neue Objekt.

• Einige Leute mögen die Lesbarkeit des neuen Schlüsselworts

• Es kann einige kleine Details geben, aber wenn es während der Entwicklung keine Probleme gibt Prozess, machen Sie sich nicht zu viele Sorgen.

Nachteile von Konstruktoren und ES6-Klassen

1. Sie benötigen das neue Schlüsselwort

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

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

In ES6 wird eine Aufgabe ausgelöst, wenn Sie versuchen, eine Klassenfunktion ohne das Schlüsselwort new aufzurufen. 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 externen APIs zugänglich gemacht

Alle Aufrufe stehen in engem Zusammenhang mit der Implementierung des Konstruktors. Wenn Sie während des Konstruktionsprozesses etwas tun müssen, ist dies eine sehr mühsame Angelegenheit.

3. Der Konstruktor befolgt nicht die Offen-/Geschlossen-Regel

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

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 hat, aber in JavaScript hat es durchaus Auswirkungen.

Wenn Sie mit dem Schreiben von Konstruktoren oder Klassen beginnen, aber im Laufe der Zeit 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('Vroom!');
//  }
// }
// const AutoMaker = { Car };
// 工厂函数改变的实现：
const AutoMaker = {
 Car (bundle) {
  return Object.create(this.bundle[bundle]);
 },
 bundle: {
  premium: {
   drive () {
    console.log('Vrooom!');
   },
   getOptions: function () {
    return ['leather', 'wood', 'pearl'];
   }
  }
 }
};
// 期望中的用法是：
const newCar = AutoMaker.Car('premium');
newCar.drive(); // 'Vrooom!'
// 但是因为他是一个库
// 许多地方依然这样用:
const oldCar = new AutoMaker.Car();
// 如此就会导致:
// TypeError: Cannot read property 'undefined' of
// undefined at new AutoMaker.Car

Im obigen Beispiel haben wir mit einer Klasse begonnen und diese schließlich in eine Factory-Funktion umgewandelt, die Objekte basierend auf einem bestimmten Prototyp erstellen kann. Eine solche Funktion kann häufig bei der Schnittstellenabstraktion und der Anpassung spezieller Anforderungen verwendet werden.

4. Verwenden Sie Konstruktoren, um einer Instanz eine Gelegenheit zu geben

Der Unterschied zwischen einem Konstruktor und einer Factory-Funktion ist die Instanz von Operator. Viele Leute verwenden Instanzen, 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.

Instanz von wird lügen.

// instanceof 是一个原型链检查
// 不是一个类型检查
// 这意味着这个检查是取决于执行上下文的,
// 当原型被动态的重新关联,
// 你就会得到这样令人费解的情况
function foo() {}
const bar = { a: 'a'};
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.

Instanceof führt keine Prüfung durch wie andere stark typisierte Sprachen, sondern lediglich das Objekt in der Prototypenkette.

In einigen Ausführungskontexten schlägt die Ausführung fehl, beispielsweise wenn Sie Constructor.prototype ändern.

Ein anderes 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 als Factory-Funktion umgeschrieben wurde. 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

• , das die einzige maßgebliche Möglichkeit ist, eine Klasse 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

All die schlechten Dinge über Konstrukteure, plus:

Das Erstellen einer problematischen Klasse mit dem Schlüsselwort „extens“ ist für Benutzer eine große Versuchung.
Die hierarchische Vererbung von Klassen kann viele bekannte Probleme verursachen, darunter fragile Basisklassen (die Basisklasse wird durch Vererbung zerstört) und Gorilla-Banane Problem (Objekte vermischt mit komplexen Kontexten), Duplizierung aus Notwendigkeit (Klassen müssen von Zeit zu Zeit geändert werden, wenn die Vererbung diversifiziert ist) usw.

Auch wenn Sie mit den anderen beiden Methoden möglicherweise ebenfalls auf diese Probleme stoßen, 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. Es gibt viele Möglichkeiten, die Vererbung zu simulieren

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

Sie können beispielsweise verschiedene Instanzen derselben Implementierung erstellen, ein Media Player kann Instanzen für verschiedene Medienformate erstellen und dabei unterschiedliche APIs verwenden, oder eine Ereignisbibliothek kann für DOM-Zeit- oder WS-Ereignisse vorgesehen sein.

Factory-Funktionen können Objekte auch über Ausführungskontexte instanziieren, was von Objektpools und einem flexibleren Vererbungsmodell profitieren kann.

2. Machen Sie sich keine Sorgen über komplexe Umgestaltungen

Sie müssen eine Factory-Funktion nie in einen Konstruktor konvertieren, sodass ein Refactoring nicht erforderlich ist.

3. Keine neuen

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

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 Menschen mögen die Lesbarkeit und Intuitivität des direkten Schreibens ohne Neues.

Nachteile von Fabrikfunktionen

• Es gibt keine automatische Verarbeitung von Prototypen und werkseitige 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

Meiner Meinung nach mag „class“ ein praktisches Schlüsselwort sein, aber es kann nicht darüber hinwegtäuschen, dass es ahnungslose Benutzer in die Vererbungsgrube führt. 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, greifen Sie möglicherweise in Code ein, auf den Sie keinen Zugriff haben, sodass Sie die Auswirkungen geänderter Funktionen nicht ignorieren können.

Das Tolle am Factory-Modus ist, dass er nicht nur leistungsfähiger und flexibler ist, sondern auch das gesamte Team dazu ermutigt, die API einfacher, sicherer und leichter zu machen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Nodejs verwenden, um die Lieferadresse in WeChat aufzurufen

Was soll Keep-Alive in vue2 bewirken? Verwenden Sie

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