浅析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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
用js解决数字不能换行问题
Aug 10 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
checkbox勾选判断代码分析
Jun 11 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 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备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
php url路由入门实例
2014/04/23 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
JavaScript实现轮播图特效
2020/04/10 Javascript
win7安装python生成随机数代码分享
2013/12/27 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
团员学习总结的自我评价范文
2013/10/14 职场文书
餐饮业创业计划书范文
2014/01/06 职场文书
企业员工薪酬方案
2014/06/04 职场文书
运动会口号大全
2014/06/07 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
个人贷款收入证明
2014/10/26 职场文书
责任书范本大全
2015/05/11 职场文书
Django REST framework 限流功能的使用
2021/06/24 Python
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL