淺析JS抽象工廠(chǎng)模式
以下就是作者學(xué)習(xí)中遇到的問(wèn)題以及代碼實(shí)例,最后還給大家關(guān)于JS抽象工廠(chǎng)模式的學(xué)習(xí)做了總結(jié)。
抽象工廠(chǎng)模式(Abstract Factory)就是通過(guò)類(lèi)的抽象使得業(yè)務(wù)適用于一個(gè)產(chǎn)品類(lèi)簇的創(chuàng)建,而不負(fù)責(zé)某一類(lèi)產(chǎn)品的實(shí)例。
JS中是沒(méi)有直接的抽象類(lèi)的,abstract是個(gè)保留字,但是還沒(méi)有實(shí)現(xiàn),因此我們需要在類(lèi)的方法中拋出錯(cuò)誤來(lái)模擬抽象類(lèi),如果繼承的子類(lèi)中沒(méi)有覆寫(xiě)該方法而調(diào)用,就會(huì)拋出錯(cuò)誤。
const Car = function() { }
Car.prototype.getPrice = function() {return new Error('抽象方法不能調(diào)用')}
實(shí)現(xiàn)
面向?qū)ο蟮恼Z(yǔ)言里有抽象工廠(chǎng)模式,首先聲明一個(gè)抽象類(lèi)作為父類(lèi),以概括某一類(lèi)產(chǎn)品所需要的特征,繼承該父類(lèi)的子類(lèi)需要實(shí)現(xiàn)父類(lèi)中聲明的方法而實(shí)現(xiàn)父類(lèi)中所聲明的功能:
/**
* 實(shí)現(xiàn)subType類(lèi)對(duì)工廠(chǎng)類(lèi)中的superType類(lèi)型的抽象類(lèi)的繼承
* @param subType 要繼承的類(lèi)
* @param superType 工廠(chǎng)類(lèi)中的抽象類(lèi)type
*/
const VehicleFactory = function(subType, superType) {
if (typeof VehicleFactory[superType] === 'function') {
function F() {
this.type = '車(chē)輛'
}
F.prototype = new VehicleFactory[superType]()
subType.constructor = subType
subType.prototype = new F() // 因?yàn)樽宇?lèi)subType不僅需要繼承superType對(duì)應(yīng)的類(lèi)的原型方法,還要繼承其對(duì)象屬性
} else throw new Error('不存在該抽象類(lèi)')
}
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抽象類(lèi)
BMW.prototype.getPrice = function() { // 覆寫(xiě)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ò)抽象工廠(chǎng),就可以創(chuàng)建某個(gè)類(lèi)簇的產(chǎn)品,并且也可以通過(guò)instanceof來(lái)檢查產(chǎn)品的類(lèi)別,也具備該類(lèi)簇所必備的方法。
- JavaScript設(shè)計(jì)模式之工廠(chǎng)模式和抽象工廠(chǎng)模式定義與用法分析
- JavaScript設(shè)計(jì)模式之抽象工廠(chǎng)模式介紹
- javascript抽象工廠(chǎng)模式詳細(xì)說(shuō)明
- javascript設(shè)計(jì)模式 – 工廠(chǎng)模式原理與應(yīng)用實(shí)例分析
- javascript設(shè)計(jì)模式 – 簡(jiǎn)單工廠(chǎng)模式原理與應(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ì)工廠(chǎng)模式實(shí)例分析
- 《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記四:Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)鏈?zhǔn)秸{(diào)用實(shí)例分析
- javascript設(shè)計(jì)模式 – 抽象工廠(chǎng)模式原理與應(yīng)用實(shí)例分析
相關(guān)文章
js中parseFloat(參數(shù)1,參數(shù)2)定義和用法及注意事項(xiàng)
今天在看jquery時(shí)用到了parseFloat(第一個(gè)參數(shù),10),對(duì)這兩個(gè)參數(shù)很是疑惑,于是整理搜集了一下,曬出來(lái)與大家分享,希望本文對(duì)你有所幫助,感興趣的朋友可以了解下2013-01-01
javascript基礎(chǔ)數(shù)據(jù)類(lèi)型轉(zhuǎn)換教程示例
總結(jié)了javascipt中的數(shù)據(jù)類(lèi)型之后,我們就了解了,prompt()接收的全是字符串,因此數(shù)據(jù)類(lèi)型轉(zhuǎn)換就顯得尤為重要,一起來(lái)學(xué)習(xí)一下吧2022-03-03
javascript中對(duì)Date類(lèi)型的常用操作小結(jié)
下面小編就為大家?guī)?lái)一篇javascript中對(duì)Date類(lèi)型的常用操作小結(jié)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05

