抽象类工厂模式

<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>