浅析JS抽象工厂模式


Posted in Javascript onDecember 14, 2017

以下就是作者学习中遇到的问题以及代码实例,最后还给大家关于JS抽象工厂模式的学习做了总结。

抽象工厂模式(Abstract Factory)就是通过类的抽象使得业务适用于一个产品类簇的创建,而不负责某一类产品的实例。

JS中是没有直接的抽象类的,abstract是个保留字,但是还没有实现,因此我们需要在类的方法中抛出错误来模拟抽象类,如果继承的子类中没有覆写该方法而调用,就会抛出错误。

const Car = function() { }
Car.prototype.getPrice = function() {return new Error('抽象方法不能调用')}

实现

面向对象的语言里有抽象工厂模式,首先声明一个抽象类作为父类,以概括某一类产品所需要的特征,继承该父类的子类需要实现父类中声明的方法而实现父类中所声明的功能:

/**
* 实现subType类对工厂类中的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()        // 因为子类subType不仅需要继承superType对应的类的原型方法,还要继承其对象属性
 } 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

总结

通过抽象工厂,就可以创建某个类簇的产品,并且也可以通过instanceof来检查产品的类别,也具备该类簇所必备的方法。

Javascript 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
js+css在交互上的应用
Jul 18 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
js 弹出菜单/窗口效果
Oct 30 Javascript
javascript自适应宽度的瀑布流实现思路
Feb 20 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 #Javascript
利用Javascript开发一个二维周视图日历
Dec 14 #Javascript
浅谈es6 javascript的map数据结构
Dec 14 #Javascript
利用Javascript实现一套自定义事件机制
Dec 14 #Javascript
vue登录注册及token验证实现代码
Dec 14 #Javascript
基于vue 实现token验证的实例代码
Dec 14 #Javascript
JavaScript实现左侧菜单效果
Dec 14 #Javascript
You might like
如何用php获取程序执行的时间
2013/06/09 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
懒加载实现的分页&&网站footer自适应
2016/12/21 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
javascript实现计算器功能
2020/03/30 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
Python类的用法实例浅析
2015/05/27 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
AUC计算方法与Python实现代码
2020/02/28 Python
如何利用python进行时间序列分析
2020/08/04 Python
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
什么是TCP/IP
2014/07/27 面试题
php优化查询foreach代码实例讲解
2021/03/24 PHP
大学生个人简历中的自我评价
2013/12/27 职场文书
优秀员工推荐信
2014/05/10 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
大学生在校表现评语
2014/12/31 职场文书
单位租车协议书
2015/01/29 职场文书
2015年护士节活动总结
2015/02/10 职场文书
Redis唯一ID生成器的实现
2022/07/07 Redis