浅析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 ajax服务器端与客户端通信的代码
Mar 28 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
javascript折半查找详解
Jan 26 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
详解angular应用容器化部署
Aug 14 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
了解前端理论:rscss和rsjs
May 23 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
一个ftp类(ini.php)
2006/10/09 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
Python中的time模块与datetime模块用法总结
2016/06/30 Python
Python数据操作方法封装类实例
2017/06/23 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
Python下简易的单例模式详解
2019/04/08 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
python机器学习实现决策树
2019/11/11 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
Python 防止死锁的方法
2020/07/29 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
Linux文件系统类型
2012/09/16 面试题
优质的学校老师推荐信
2013/10/28 职场文书
学校安全责任书范本
2014/07/23 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers