浅析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日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
Vue实现一个图片懒加载插件
Mar 11 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
vue 动态创建组件的两种方法
Dec 31 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
PHP $_SERVER详解
2009/01/16 PHP
php 获取当前访问的url文件名的方法小结
2010/02/08 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
Python类的继承和多态代码详解
2017/12/27 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
Python configparser模块常用方法解析
2020/05/22 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
技能比赛获奖感言
2014/02/14 职场文书
高三学习决心书
2014/03/11 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
关爱老人标语
2014/06/21 职场文书
2015学校年度工作总结
2015/05/11 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
浅谈MySQL user权限表
2021/06/18 MySQL
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫