有關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

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

相關文章：

在js中如何實作判斷檔案類型大小

在js中如何實作登入需要滑動驗證

在Angular中如何實作下拉框模糊查詢功能

#在Nodejs中有關crypto模組安全知識（詳細教學）

在angularjs中如何實作分頁與搜尋功能

使用vue如何引入ueditor及node後台設定

##在Node .js中如何建立小程式後台服務

##在js中有關檔案載入最佳化方面的問題

使用nodejs mongodb vue如何設定ueditor

以上是有關JS抽象工廠模式（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！