浅析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 相关文章推荐
关于文本限制字数的js代码
Apr 02 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
小程序实现密码输入框
Nov 16 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 日,周,月点击排行统计
2012/01/11 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
Python while 循环使用的简单实例
2016/06/08 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
Python 处理图片像素点的实例
2019/01/08 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
2014年学校法制宣传日活动总结
2014/11/01 职场文书
收费员岗位职责
2015/02/14 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
导游词之镜泊湖
2019/12/09 职场文书
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
Python实现科学占卜 让视频自动打码
2022/04/09 Python