浅析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 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
Mar 11 Javascript
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
js跳转页面方法总结
Jan 29 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
理解javascript封装
Feb 23 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
JavaScript实现拖拽效果
Mar 16 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 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
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
PHP自定义多进制的方法
2016/11/03 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
Python交互环境下实现输入代码
2018/06/22 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
详解Python打包分发工具setuptools
2019/08/05 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
详解pandas赋值失败问题解决
2020/11/29 Python
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
获奖的大学生创业计划书
2014/01/05 职场文书
高中生旷课检讨书
2014/10/08 职场文书
先进个人总结范文
2015/02/15 职场文书
挂职锻炼个人总结
2015/03/05 职场文书