浅析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 通过json自动生成Dom的代码
Apr 01 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
js+css3制作时钟特效
Oct 16 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
VUE写一个简单的表格实例
Aug 06 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实现递归的三种基本方式
2020/07/04 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
jquery $.ajax入门应用一
2008/11/19 Javascript
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
使用PYTHON接收多播数据的代码
2012/03/01 Python
python映射列表实例分析
2015/01/26 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
简单谈谈python中的多进程
2016/11/06 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
Python循环结构的应用场景详解
2019/07/11 Python
Django的models中on_delete参数详解
2019/07/16 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
python清空命令行方式
2020/01/13 Python
python mock测试的示例
2020/10/19 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
《果园机器人》教学反思
2014/04/13 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
务虚会发言材料
2014/12/25 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS