浅析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 相关文章推荐
javascript 类方法定义还是有点区别
Apr 15 Javascript
Mootools 1.2教程 类(一)
Sep 15 Javascript
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
纯js+css实现在线时钟
Aug 18 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 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
关于js和php对url编码的处理方法
2014/03/04 PHP
PDO::rollBack讲解
2019/01/29 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
vue组件实例解析
2017/01/10 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
js实现查询商品案例
2020/07/22 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
Python csv文件记录流程代码解析
2020/07/16 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
程序员机试试题汇总
2012/03/07 面试题
平面设计师的工作职责
2013/11/21 职场文书
给领导的检讨书
2014/02/16 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
教育见习报告范文
2014/11/03 职场文书
2014年教研工作总结
2014/12/06 职场文书
看上去很美观后感
2015/06/10 职场文书
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
你需要掌握的20个Python常用技巧
2022/02/28 Python
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android