随笔 javascript-抽象工厂模式

Posted 前端YYK

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了随笔 javascript-抽象工厂模式相关的知识,希望对你有一定的参考价值。

javascript-抽象工厂模式


抽象工厂模式笔记
   1.抽象工厂模式创建多个抽象类,创建出的结果是一个类簇(这里是抽象类的集合)
   2.抽象工厂中传入的父类是否是抽象工厂方法创建的抽象类进行判断,不是则抛出错误
   3.子类通过抽象工厂方法(寄生式继承)继承父类(抽象工厂创建的抽象类)的属性和方法
 原型式继承

复制代码
1             function inheritobject(o){
2                 //声明一个过渡函数对象
3                 function F(){    
4                 }
5                 //过渡原型对象继承父对象
6                 F.prototype=o;
7                 //返回过渡对象的一个实列,该实例的原型继承了父对象
8                 return new F();
9             }
复制代码

寄生式继承 继承原型

复制代码
 1             /*
 2              *寄生式继承 继承原型
 3              * 传递参数subclass 子类
 4              * 传递参数superclass 父类
 5              * */
 6             function inheritPrototype(subclass,superclass){
 7                 //复制一份父类的原型副本保存在变量中
 8                 var p=inheritobject(superclass.prototype);
 9                 //修正因为重写子类原型导致子类的constructor属性被修改
10                 p.constructor=subclass;
11                 //设置子类原型
12                 subclass.prototype=p;
13             }
复制代码

抽象工厂方法

复制代码
1             //抽象工厂方法
2             var VehicleFactory=function(subtype,supertype){
3                 //supertype通过typeof判断是否是抽象工厂模式创建的抽象类
4                 if(typeof VehicleFactory[supertype] === \'function\'){
5                     inheritPrototype(subtype,supertype);
6                 }else{
7                     throw new Error(\'未创建该抽象类\');
8                 }
9             }
复制代码

抽象工厂方法创建抽象类

复制代码
 1            VehicleFactory.Car=function(){
 2                 this.type=\'car\';
 3             }
 4             
 5             VehicleFactory.Car.prototype={
 6                 getPrice:function(){
 7                     return new Error("抽象方法不能调用");
 8                 },
 9                 getSpeed:function(){
10                     return new Error("抽象方法不能调用");
11                 },
12                 getColor:function(){
13                     return new Error("抽象方法不能调用");
14                 }
15             }
16             
17             VehicleFactory.Bus=function(){
18                 this.type=\'bus\';
19             }
20             VehicleFactory.Bus.prototype={
21                 getPrice:function(){
22                     return new Error("抽象方法不能调用");
23                 },
24                 getSpeed:function(){
25                     return new Error("抽象方法不能调用");
26                 }
27             }
复制代码

宝马汽车子类

复制代码
 1            var BMW =function(price,speed){
 2                 this.price=price;
 3                 this.speed=speed;
 4             }
 5             //抽象工厂实现对Car抽象类 的继承
 6             VehicleFactory(BMW,\'Car\');
 7             BMW.prototype.getPrice = function(){
 8                 return this.price;
 9             }
10             BMW.prototype.getSpeed = function(){
11                 return this.speed;
12             }
复制代码

测试代码

1             var BMWObject = new BMW(100,100);
2             console.log(BMWObject.getPrice());
3             console.log(BMWObject.getColor());

以上是关于随笔 javascript-抽象工厂模式的主要内容,如果未能解决你的问题,请参考以下文章

javascript-抽象工厂模式

简单工厂模式&工厂方法模式&抽象工厂模式的区别

javascript设计模式-抽象工厂模式

javascript的设计模式之抽象工厂模式

《JavaScript设计模式 张》整理

JavaScript设计模式创建型设计模式--简单工厂工厂方法抽象工厂