淺析JS抽象工廠模式
以下就是作者學(xué)習(xí)中遇到的問(wèn)題以及代碼實(shí)例,最后還給大家關(guān)于JS抽象工廠模式的學(xué)習(xí)做了總結(jié)。
抽象工廠模式(Abstract Factory)就是通過(guò)類的抽象使得業(yè)務(wù)適用于一個(gè)產(chǎn)品類簇的創(chuàng)建,而不負(fù)責(zé)某一類產(chǎn)品的實(shí)例。
JS中是沒(méi)有直接的抽象類的,abstract是個(gè)保留字,但是還沒(méi)有實(shí)現(xiàn),因此我們需要在類的方法中拋出錯(cuò)誤來(lái)模擬抽象類,如果繼承的子類中沒(méi)有覆寫該方法而調(diào)用,就會(huì)拋出錯(cuò)誤。
const Car = function() { }
Car.prototype.getPrice = function() {return new Error('抽象方法不能調(diào)用')}
實(shí)現(xiàn)
面向?qū)ο蟮恼Z(yǔ)言里有抽象工廠模式,首先聲明一個(gè)抽象類作為父類,以概括某一類產(chǎn)品所需要的特征,繼承該父類的子類需要實(shí)現(xiàn)父類中聲明的方法而實(shí)現(xiàn)父類中所聲明的功能:
/**
* 實(shí)現(xiàn)subType類對(duì)工廠類中的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() // 因?yàn)樽宇恠ubType不僅需要繼承superType對(duì)應(yīng)的類的原型方法,還要繼承其對(duì)象屬性
} 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
總結(jié)
通過(guò)抽象工廠,就可以創(chuàng)建某個(gè)類簇的產(chǎn)品,并且也可以通過(guò)instanceof來(lái)檢查產(chǎn)品的類別,也具備該類簇所必備的方法。
- JavaScript設(shè)計(jì)模式之工廠模式和抽象工廠模式定義與用法分析
- JavaScript設(shè)計(jì)模式之抽象工廠模式介紹
- javascript抽象工廠模式詳細(xì)說(shuō)明
- javascript設(shè)計(jì)模式 – 工廠模式原理與應(yīng)用實(shí)例分析
- javascript設(shè)計(jì)模式 – 簡(jiǎn)單工廠模式原理與應(yīng)用實(shí)例分析
- javascript設(shè)計(jì)模式 – 單例模式原理與應(yīng)用實(shí)例分析
- javascript 設(shè)計(jì)模式之享元模式原理與應(yīng)用詳解
- javascript 設(shè)計(jì)模式之組合模式原理與應(yīng)用詳解
- 《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記七:Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)組合模式詳解
- 《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記五:Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)工廠模式實(shí)例分析
- 《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記四:Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)鏈?zhǔn)秸{(diào)用實(shí)例分析
- javascript設(shè)計(jì)模式 – 抽象工廠模式原理與應(yīng)用實(shí)例分析
相關(guān)文章
uniapp返回上一頁(yè)執(zhí)行上一頁(yè)方法解決方案
這篇文章主要給大家介紹了關(guān)于uniapp返回上一頁(yè)執(zhí)行上一頁(yè)方法解決方案,在UniApp中可以通過(guò)uni.navigateBack()方法返回上一個(gè)頁(yè)面,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
有關(guān)javascript的性能優(yōu)化 (repaint和reflow)
本篇文章,小編將為大家介紹,有關(guān)javascript的性能優(yōu)化(repaint和reflow),有需要的朋友可以參考一下2013-04-04
詳解JavaScript中|單豎杠運(yùn)算符的使用方法
JavaScript中|單豎杠通常被用來(lái)對(duì)浮點(diǎn)型數(shù)字進(jìn)行取證,這里同時(shí)也介紹了單豎杠的運(yùn)算規(guī)則,下面我們就來(lái)詳解JavaScript中|單豎杠的使用方法2016-05-05
簡(jiǎn)單實(shí)現(xiàn)異步編程promise模式
本篇文章主要介紹了異步編程promise模式的簡(jiǎn)單實(shí)現(xiàn),并對(duì)每一步進(jìn)行了分析,需要的朋友可以參考下2015-07-07
Javascript中arguments和arguments.callee的區(qū)別淺析
這篇文章主要介紹了Javascript中arguments和arguments.callee的區(qū)別淺析,本文用一個(gè)實(shí)例來(lái)理解它們的區(qū)別,需要的朋友可以參考下2015-04-04

