JS 抽象工廠模式

RiverLi 發布于2019-08-22 11:17 / 2163人閱讀

摘要：簡介抽象工廠模式就是通過類的抽象使得業務適用于一個產品類簇的創建，而不負責某一類產品的實例。通過抽象工廠，就可以創建某個類簇的產品，并且也可以通過來檢查產品的類別，也具備該類簇所必備的方法。

0. 簡介

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

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

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

1. 實現

面向對象的語言里有抽象工廠模式，首先聲明一個抽象類作為父類，以概括某一類產品所需要的特征，繼承該父類的子類需要實現父類中聲明的方法而實現父類中所聲明的功能：

/**
* 實現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

2. 總結

抽象類創建出的結果不是一個真實的對象實例，而是一個類簇，它指定了類的結構，這也就區別于簡單工廠模式創建單一對象，工廠模式創建多類對象。

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

本文是系列文章，可以相互參考印證，共同進步~

JS 抽象工廠模式

JS 工廠模式

JS 建造者模式

JS 原型模式

JS 單例模式

JS 回調模式

JS 外觀模式

JS 適配器模式

JS 利用高階函數實現函數緩存(備忘模式)

JS 狀態模式

JS 橋接模式

JS 觀察者模式

網上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學習過程中的總結，如果發現錯誤，歡迎留言指出~

參考：《Javascript 設計模式》 - 張榮銘

PS：歡迎大家關注我的公眾號【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，長按識別下面二維碼即可加我好友，備注加群，我拉你入群～

GPU云服務器云服務器抽象工廠模式 java抽象工廠模式工廠模式工廠方法模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92105.html

js常用設計模式實現（二）工廠模式和抽象工廠模式

摘要：抽象工廠模式可以向客戶端提供一個接口，使客戶端在不必指定產品的具體的情況下，創建多個產品族中的產品對象。前邊的兩個都是直接生產實例的，開始以為抽象工廠也是但是后來發現抽象工廠更像是生產工廠，其實抽象工廠其實是實現子類繼承父類的方法。創建型模式創建型模式是對一個類的實例化過程進行了抽象，把對象的創建和對象的使用進行了分離上一篇介紹了下單例模式，這一篇介紹一下工廠模式和抽象工廠模式，...

meteor199 2019-08-23 18:37 評論0 收藏0
一天一個設計模式之JS實現——工廠模式

摘要：參考文章深入理解三種工廠模式工廠模式，工廠方法模式，抽象工廠模式詳解工廠模式是中最常用的設計模式之一。這種類型的設計模式屬于創建型模式，它提供了一種創建對象的最佳方式。參考文章：深入理解java三種工廠模式工廠模式，工廠方法模式，抽象工廠模式詳解工廠模式（Factory Pattern）是 Java 中最常用的設計模式之一。這種類型的設計模式屬于創建型模式，它提供了一種創建對象的...

Muninn 2019-08-22 15:54 評論0 收藏0
JS 設計模式七（抽象工廠模式）

摘要：抽象工廠模式抽象工廠是工廠模式的升級版，他用來創建一組相關或者相互依賴的對象。代碼抽象工廠模式抽象工廠的優點抽象工廠模式除了具有工廠方法模式的優點外，最主要的優點就是可以在類的內部對產品族進行約束。抽象工廠模式抽象工廠是工廠模式的升級版，他用來創建一組相關或者相互依賴的對象。上節學習了工廠模式，類的創建依賴工廠類，程序需要擴展時，我們必須創建新的工廠類。工廠類是用來生產產品的，那我...

FuisonDesign 2019-08-19 18:20 評論0 收藏0
從ES6重新認識JavaScript設計模式(二): 工廠模式

摘要：簡單工廠模式簡單工廠模式又叫靜態工廠模式，由一個工廠對象決定創建某一種產品對象類的實例。工廠方法模式工廠方法模式的本意是將實際創建對象的工作推遲到子類中，這樣核心類就變成了抽象類。抽象工廠模式一般用在 1 什么是工廠模式? 工廠模式是用來創建對象的一種最常用的設計模式。我們不暴露創建對象的具體邏輯，而是將將邏輯封裝在一個函數中，那么這個函數就可以被視為一個工廠。工廠模式根據抽象程度的不...

Reducto 2019-08-30 14:22 評論0 收藏0
從ES6重新認識JavaScript設計模式(二): 工廠模式

摘要：簡單工廠模式簡單工廠模式又叫靜態工廠模式，由一個工廠對象決定創建某一種產品對象類的實例。工廠方法模式工廠方法模式的本意是將實際創建對象的工作推遲到子類中，這樣核心類就變成了抽象類。抽象工廠模式一般用在 1 什么是工廠模式? 工廠模式是用來創建對象的一種最常用的設計模式。我們不暴露創建對象的具體邏輯，而是將將邏輯封裝在一個函數中，那么這個函數就可以被視為一個工廠。工廠模式根據抽象程度的不...

szysky 2019-08-22 16:02 評論0 收藏0