浅析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 相关文章推荐
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
百度地图api如何使用
Aug 03 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
利用React-router+Webpack快速构建react程序
Oct 27 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
p5.js绘制创意自画像
Nov 04 Javascript
Vue实现附件上传功能
May 28 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 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 getsiteurl()函数
2009/09/05 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
python转换摩斯密码示例
2014/02/16 Python
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
pandas.cut具体使用总结
2019/06/24 Python
提升python处理速度原理及方法实例
2019/12/25 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
简单了解如何封装自己的Python包
2020/07/08 Python
Python基于execjs运行js过程解析
2020/11/27 Python
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
税务干部鉴定材料
2014/02/11 职场文书
学生会工作感言
2015/08/07 职场文书
MySQL之DML语言
2021/04/05 MySQL