浅析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 相关文章推荐
dess中一个简单的多路委托的实现
Jul 20 Javascript
jQuery学习笔记之jQuery的事件
Dec 22 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
js获取form的方法
May 06 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
js 实现验证码输入框示例详解
Sep 23 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
用Flash图形化数据(二)
2006/10/09 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
CKEditor4配置与开发详细中文说明文档
2018/10/08 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python二分查找算法的递归实现方法
2016/05/12 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
pycharm安装图文教程
2017/05/02 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
Python的高阶函数用法实例分析
2019/04/11 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
公司开会通知
2015/04/20 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
运动会班级前导词
2015/07/20 职场文书
运动会广播稿50字
2015/08/19 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript