淺析JS抽象工廠模式_基礎知識

這篇文章主要給大家總結了一下作者在學習JS抽象工廠模式時的經驗和總結，有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來檢查產品的類別，也具備該類簇所必備的方法。

相關推薦：

#javascript抽象工廠模式詳細說明_javascript技巧

JavaScript設計模式之抽象工廠模式介紹_javascript技巧

JS如何測試目標網站的開啟響應速度

以上是淺析JS抽象工廠模式_基礎知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！