浅析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 相关文章推荐
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
jquery插件推荐 jquery.cookie
Nov 09 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
vue多层嵌套路由实例分析
Mar 19 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 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结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
在Django中创建动态视图的教程
2015/07/15 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
学生档案自我鉴定
2013/10/07 职场文书
小学教师岗位职责
2013/11/25 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
标准版离职证明书
2014/09/12 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
win10搭建配置ftp服务器的方法
2022/08/05 Servers