Heim > Web-Frontend > js-Tutorial > Hauptteil

Analysieren Sie das abstrakte JS-Fabrikmuster für Sie im Detail

亚连
Freigeben: 2018-05-19 09:08:40
Original
1044 Leute haben es durchsucht

Dieser Artikel fasst hauptsächlich die Erfahrungen und Zusammenfassungen des Autors beim Erlernen des abstrakten JS-Fabrikmusters zusammen. Interessierte Freunde können mitmachen und lernen.

Im Folgenden sind die Probleme und Codebeispiele aufgeführt, auf die ich während meines Studiums gestoßen bin. Abschließend werde ich Ihnen eine Zusammenfassung Ihrer Erkenntnisse über das abstrakte JS-Fabrikmuster geben.

Das Abstract Factory-Muster (Abstract Factory) nutzt Klassenabstraktion, um das Unternehmen für die Erstellung eines Produktklassenclusters geeignet zu machen, ohne für die Instanzen eines bestimmten Produkttyps verantwortlich zu sein.

Es gibt keine direkte abstrakte Klasse in JS, aber sie wurde noch nicht implementiert. Daher müssen wir einen Fehler in der Klassenmethode auslösen, um die abstrakte Klasse zu simulieren Keine Überschreibung in der geerbten Unterklasse. Wenn Sie diese Methode schreiben und aufrufen, wird ein Fehler ausgegeben.

const Car = function() { }
Car.prototype.getPrice = function() {return new Error('抽象方法不能调用')}
Nach dem Login kopieren

Implementierung

Es gibt ein abstraktes Factory-Muster in objektorientierten Sprachen. Deklarieren Sie zunächst eine abstrakte Klasse als übergeordnete Klasse, um sie zu verallgemeinern eine bestimmte Klasse Für die vom Produkt benötigten Funktionen muss die Unterklasse, die die übergeordnete Klasse erbt, die in der übergeordneten Klasse deklarierten Methoden implementieren und die in der übergeordneten Klasse deklarierten Funktionen realisieren:

/**
* 实现subType类对工厂类中的superType类型的抽象类的继承
* @param subType 要继承的类
* @param superType 工厂类中的抽象类type
*/
const VehicleFactory = function(subType, superType) {
 if (typeof VehicleFactory[superType] === 'function') {
  function F() {
   this.type = '车辆'
  } 
  F.prototype = new VehicleFactory[superType]()
  subType.constructor = subType
  subType.prototype = new F()        // 因为子类subType不仅需要继承superType对应的类的原型方法,还要继承其对象属性
 } else throw new Error('不存在该抽象类')
}
VehicleFactory.Car = function() {
 this.type = 'car'
}
VehicleFactory.Car.prototype = {
 getPrice: function() {
  return new Error('抽象方法不可使用')
 },
 getSpeed: function() {
  return new Error('抽象方法不可使用')
 }
}
const BMW = function(price, speed) {
 this.price = price
 this.speed = speed
}
VehicleFactory(BMW, 'Car')    // 继承Car抽象类
BMW.prototype.getPrice = function() {    // 覆写getPrice方法
 console.log(`BWM price is ${this.price}`)
}
BMW.prototype.getSpeed = function() {
 console.log(`BWM speed is ${this.speed}`)
}
const baomai5 = new BMW(30, 99)
baomai5.getPrice()             // BWM price is 30
baomai5 instanceof VehicleFactory.Car    // true
Nach dem Login kopieren

Zusammenfassung

Über die abstrakte Fabrik können Sie Produkte eines bestimmten Klassenclusters erstellen, und Sie können auch die Instanz von verwenden, um die Produktkategorie zu überprüfen, und verfügen auch über die erforderlichen Methoden für diese Klasse Cluster.

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

Verwandte Artikel:

Zusammenfassung von drei Möglichkeiten zum dynamischen Laden von JS-Dateien

js unterstützt Cross-Post Anfrage Zusammenfassung der Domänenmethoden

Vue.jsDetaillierte Erläuterung der Berechnung und Verwendung von Listener-Eigenschaften

Das obige ist der detaillierte Inhalt vonAnalysieren Sie das abstrakte JS-Fabrikmuster für Sie im Detail. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage