浅析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获取网站Alexa排名的代码
Dec 12 Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 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
web方式ftp
2006/10/09 PHP
discuz7 phpMysql操作类
2009/06/21 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
Javascript的this用法
2017/01/16 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
使用python分析统计自己微信朋友的信息
2019/07/19 Python
python在地图上画比例的实例详解
2020/11/13 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
酒店管理专业学生求职信
2013/09/27 职场文书
餐饮业的创业计划书范文
2013/12/26 职场文书
社区义诊活动总结
2014/04/30 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
公司员工辞职信范文
2015/05/12 职场文书
vue自定义右键菜单之全局实现
2022/04/09 Vue.js