浅析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 相关文章推荐
JQuery 常用方法基础教程
Feb 06 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 Javascript
uniapp开发打包多端应用完整方法指南
Dec 24 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
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
javascript 函数调用规则
2009/08/26 Javascript
javascript GUID生成器实现代码
2009/10/31 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
js导出txt示例代码
2014/01/14 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
python使用生成器实现可迭代对象
2018/03/20 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
python中温度单位转换的实例方法
2020/12/27 Python
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
大专自我鉴定范文
2013/10/01 职场文书
自我鉴定的范文
2013/10/03 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
实习评语大全
2014/04/26 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
2014年采购工作总结
2014/11/20 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript