Heim > Web-Frontend > js-Tutorial > Eine kurze Analyse des abstrakten Fabrikmusters von JS_Grundkenntnisse

Eine kurze Analyse des abstrakten Fabrikmusters von JS_Grundkenntnisse

韦小宝
Freigeben: 2017-12-15 13:48:29
Original
1760 Leute haben es durchsucht

Dieser Artikel fasst hauptsächlich die Erfahrungen und Zusammenfassungen des Autors beim Erlernen von JSAbstract Factory Pattern zusammen. Es gibt eine JS-Quellcode-Analyse, ja JSWenn Sie interessiert sind, folgen Sie uns bitte und lernen Sie.

Im Folgenden sind die Probleme und Codebeispiele aufgeführt, auf die der Autor während seiner Studie gestoßen ist. Abschließend fasst er auch Ihre Erkenntnisse über das abstrakte JS-Fabrikmuster zusammen.

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 abstract-Klasse in JS. Abstract ist ein reserviertes Wort, aber es wurde noch nicht implementiert, daher müssen wir einen Fehler in der Klassenmethode auslösen, um die Zusammenfassung zu simulieren Wenn wir die Methode erben, ohne sie in der Unterklasse zu überschreiben, wird ein Fehler ausgegeben.


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


implementiert

für Es gibt ein abstraktes Fabrikmuster in der Objektsprache . Zunächst wird eine abstrakte Klasse als übergeordnete Klasse deklariert, um die für einen bestimmten Produkttyp erforderlichen Eigenschaften zusammenzufassen. Die Unterklasse, die die übergeordnete Klasse erbt, muss die Methoden implementieren in der übergeordneten Klasse deklariert, um die in der Klasse deklarierten Funktionen zu implementieren:


/**
* 实现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

Mit der abstrakten Fabrik können Sie Produkte eines bestimmten Klassenclusters erstellen und mit der Instanz von auch die Produktkategorie überprüfen. Außerdem verfügt sie über die erforderlichen Methoden für diese Klasse Cluster.

Verwandte Empfehlungen:

Javascript Abstract Factory Pattern Detaillierte Beschreibung_Javascript Skills

Einführung in das abstrakte Fabrikmuster von JavaScript-Entwurfsmustern_Javascript-Fähigkeiten

Wie man JS testet die Öffnungsreaktionsgeschwindigkeit der Zielwebsite

Das obige ist der detaillierte Inhalt vonEine kurze Analyse des abstrakten Fabrikmusters von JS_Grundkenntnisse. 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