浅析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 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
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 5.0 Pear安装方法
2006/12/06 PHP
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
js 操作css实现代码
2009/06/11 Javascript
JQuery 操作select标签实现代码
2010/05/14 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
Python中的Matplotlib模块入门教程
2015/04/15 Python
python设计模式大全
2016/06/27 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
Python几种常见算法汇总
2020/06/02 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
预备党员入党自我评价范文
2014/03/10 职场文书
高中班主任评语大全
2014/04/25 职场文书
公司门卫工作职责
2014/06/28 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
简历自荐信范文
2015/03/09 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书