浅析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 使用手册(七)
Sep 23 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
深入讲解Python编程中的字符串
2015/10/14 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
python 自动去除空行的实例
2018/07/24 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
python标记语句块使用方法总结
2019/08/05 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
西式结婚主持词
2014/03/14 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
幸福中国演讲稿
2014/09/12 职场文书
学习十八大演讲稿
2014/09/15 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
学年个人总结范文
2015/03/05 职场文书
公司出纳岗位职责
2015/03/31 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
离职证明范本
2015/06/12 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL