詳細為你解析JS抽象工廠模式

這篇文章主要給大家總結了一下作者在學習JS抽象工廠模式時的經驗和總結，有興趣的朋友跟著學習下吧。

以下就是我在學習中遇到的問題以及程式碼實例，最後也為大家關於JS抽象工廠模式的學習做了總結。

抽象工廠模式(Abstract Factory)就是透過類別的抽象使得業務適用於一個產品類別簇的創建，而不負責某一類別產品的實例。

JS中是沒有直接的抽象類別的，abstract是個保留字，但是還沒有實現，因此我們需要在類別的方法中拋出錯誤來模擬抽象類，如果繼承的子類別中沒有覆寫該方法而調用，就會拋出錯誤。

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

實作

物件導向的語言裡有抽象工廠模式，先宣告一個抽象類別作為父類，以概括某一類產品所需的特徵，繼承該父類別的子類別需要實作父類別中宣告的方法而實作父類別中所宣告的功能：

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

總結

透過抽象工廠，就可以創建某個類別簇的產品，也可以透過instanceof來檢查產品的類別，也具備該類別簇所必備的方法。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

動態載入JS檔案三種方式總結

#js支援post請求的跨域方法總結

Vue.js計算與偵聽器屬性使用詳解

#

以上是詳細為你解析JS抽象工廠模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！