浅析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 post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
canvas 实现中国象棋
Feb 17 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
vue实现动态按钮功能
May 13 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
如何利用vue实现波谱拟合详解
Nov 05 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
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
js随机生成一个验证码
2017/06/01 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
Python新手如何理解循环加载模块
2020/05/29 Python
python接入支付宝的实例操作
2020/07/20 Python
学习Python需要哪些工具
2020/09/04 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
英国网上花店:Bunches
2016/11/29 全球购物
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
鲜花方阵解说词
2014/02/13 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
师德承诺书
2015/01/20 职场文书
创业计划书之服装
2019/10/07 职场文书