淺析JS抽象工廠模式
以下就是作者學習中遇到的問題以及代碼實例,最后還給大家關于JS抽象工廠模式的學習做了總結。
抽象工廠模式(Abstract Factory)就是通過類的抽象使得業(yè)務適用于一個產品類簇的創(chuàng)建,而不負責某一類產品的實例。
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
總結
通過抽象工廠,就可以創(chuàng)建某個類簇的產品,并且也可以通過instanceof來檢查產品的類別,也具備該類簇所必備的方法。
- JavaScript設計模式之工廠模式和抽象工廠模式定義與用法分析
- JavaScript設計模式之抽象工廠模式介紹
- javascript抽象工廠模式詳細說明
- javascript設計模式 – 工廠模式原理與應用實例分析
- javascript設計模式 – 簡單工廠模式原理與應用實例分析
- javascript設計模式 – 單例模式原理與應用實例分析
- javascript 設計模式之享元模式原理與應用詳解
- javascript 設計模式之組合模式原理與應用詳解
- 《javascript設計模式》學習筆記七:Javascript面向對象程序設計組合模式詳解
- 《javascript設計模式》學習筆記五:Javascript面向對象程序設計工廠模式實例分析
- 《javascript設計模式》學習筆記四:Javascript面向對象程序設計鏈式調用實例分析
- javascript設計模式 – 抽象工廠模式原理與應用實例分析
相關文章
有關javascript的性能優(yōu)化 (repaint和reflow)
本篇文章,小編將為大家介紹,有關javascript的性能優(yōu)化(repaint和reflow),有需要的朋友可以參考一下2013-04-04
Javascript中arguments和arguments.callee的區(qū)別淺析
這篇文章主要介紹了Javascript中arguments和arguments.callee的區(qū)別淺析,本文用一個實例來理解它們的區(qū)別,需要的朋友可以參考下2015-04-04

