<script type="text/javascript">
//BMW Car
function VehicleFactory(subType, superType) {
if (typeof VehicleFactory[superType] === 'function') {
function F() {}
F.prototype = new VehicleFactory[superType]()
subType.constructor = subType//prototype已经赋值,下文不能赋值{}，这样会删除以前的原型赋值
subType.prototype = new F()
} else {
throw new Error('未创建该抽象类')
}
}
/* 定义抽象类的结构 */
// 汽车抽象类
VehicleFactory.Car = function() {
this.type = 'car'
}
VehicleFactory.Car.prototype = {
getPrice() {
return new Error('抽象方法不能调用')
},
getSpeed() {
return new Error('抽象方法不能调用')
}
}
// 公交车抽象类
VehicleFactory.Bus = function() {
this.type = 'bus'
}
VehicleFactory.Bus.prototype = {
getPrice() {
return new Error('抽象方法不能调用')
},
getPassengerNum() {
return new Error('抽象方法不能调用')
}
}
// 货车抽象类
VehicleFactory.Truck = function() {
this.type = 'truck'
}
VehicleFactory.Truck.prototype = {
getPrice() {
return new Error('抽象方法不能调用')
},
getTrainload() {
return new Error('抽象方法不能调用')
}
}
//实现具体的类则如下：
// 汽车：宝马具体类
function BMW(price, speed) {
this.price = price
this.speed = speed
}
VehicleFactory(BMW, 'Car')
BMW.prototype.getPrice = function() {
return this.price
}
BMW.prototype.getSpeed = function() {
return this.speed
}
//当需要生产实例时，则：
const bmw530 = new BMW(500000, 250)
console.log( bmw530.getPrice() ) // 500000
console.log( bmw530.getSpeed() ) // 250
console.log( bmw530.type );// 'Car'
</script>
抽象类工厂模式很巧妙的使用了函数也是对象，也可以由很多的属性的方法
在很多软件系统中需要更换界面主题，要求界面中的按钮、文本框、背景色等一起发生改变时，可以使用抽象工厂模式进行设计。
实例：
<head>
<style>
#div1 {
200px;
height:200px;
border:1px solid black;
}
</style>
</head>
<body>
<input type='button' value='red'/>
<input type='button' value='blue'/>
<input type='button' value='black'/>
<div id='div1'></div>
<script type="text/javascript">
var oDiv = document.getElementById('div1');
var aBtn = document.getElementsByTagName('input');
function factory(subtype,supertype){
if (typeof factory[supertype] === 'function')
{
function fn(){}
fn.prototype = new factory[supertype]
subtype.constructor = subtype
subtype.prototype = new fn()
}else {
throw new Error('没有此抽象类');
}
}
factory.color1 = function(){
this.color = 'red'
}
factory.color2 = function(){
this.color = 'blue'
}
factory.color3 = function(){
this.color = 'black'
}
for (var i = 0;i<aBtn.length ;i++ )
{
(function(i){
aBtn[i].addEventListener('click',function(){
var j = i+1;
function c1(){}
factory(c1,'color'+j)
oDiv.style.background = (new c1()).color;
},false);
})(i);
}
</script>
</body>