浅析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 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 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
web方式ftp
2006/10/09 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
php批量修改表结构实例
2017/05/24 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
Python语言生成水仙花数代码示例
2017/12/18 Python
Python中文编码知识点
2019/02/18 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
python中count函数简单用法
2020/01/05 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
董事长秘书岗位职责
2013/11/29 职场文书
聚美优品广告词改编
2014/03/14 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
长城导游词
2015/01/30 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
关于python类SortedList详解
2021/09/04 Python
Python实现简单得递归下降Parser
2022/05/02 Python