我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧!

前两次我们分享了简单工厂模式,和工厂方法模式,这一次我们接着来分享抽象工厂模式

抽象工厂模式

抽象工厂模式(Abstract Factory): 通过对类的工厂抽象使其业务用于对产品类簇的创建,而不负责创建某一类产品的实例。

在了解抽象工厂模式前,我们要先了解一下如何在JavaScript中实现抽象类。

我们知道JavaScript中没有abstract所以我们无法像传统的面向对象语言一样轻松的创建一个抽象类,但是我们可以在类的方法中手动地抛出错误来模拟抽象类。

abstract修饰符可以用于类、方法、属性、事件和索引指示器(indexer),表示其为抽象成员,抽象方法是没有方法体的方法。

我们创建一个学生抽象类,当直接使用其实例对象的方法时,我们让其抛出错误 。

var Students=function(){};
Students.prototype={
getName:function(){
throw new Error('抽象方法不能被调用');
},
getCourse:function(){
throw new Error('抽象方法不能被调用');
} };

这样我们就创建了一个抽象类,那么抽象类有什么作用呢?

我们现在创建的这个Students类其实什么都不能做,但是在继承上很有用,因为我们定义了一种类型,并定义了该类型所必备的方法,如果子类中没有重写这些方法,那么在调用的时候便会报错。

针对抽象类我们也有一套相关的模式,这个模式就是我们今天要介绍的抽象工厂模式。

抽象工厂模式,在javascript中一般不用来创建具体对象,我们一般用它作为父类来创建子类。

抽象工厂方法

var AbstractFactory=function(ParentType,ChildType){
//判断抽象工厂中是否有该抽象类
if(typeof AbstractFactory[ParentType]==='function'){
//缓存类
function CacheClass(){};
//继承父类属性和方法
CacheClass.prototype=new AbstractFactory[ParentType]();
//将子类的constructor指向子类
ChildType.constructor=ChildType;
//子类原型继承父类
ChildType.prototype=new CacheClass();
}else{
//如果不存在这个抽象方法我们就抛出错误
throw new Error('未创建该抽象类');
}
};

接着我们添加抽象属性

AbstractFactory.Students=function(){
this.type="Students";
};
AbstractFactory.Students.prototype={
getName:function(){
throw new Error('抽象方法不能被调用');
},
getCourse:function(){
throw new Error('抽象方法不能被调用');
} };

我们可以看到,抽象工厂其实就是一个实现子类继承父类的方法,在这个方法中五门需要通过传递子类以及要继承的父类的名称,并且在抽象工厂方法中又增加了一次对抽象类存在性的一次判断,如果存在我们就通过寄生式继承继承父类,如果不存在我们就抛出异常。

我们对抽象工厂添加抽象类也很特殊,因为抽象工厂是个方法,不需要实例化对象,所以我们只需为抽象工厂添加类的属性即可。

讲完了创建,我们接着来讲如何使用它们。

我们先创建一个学生子类

var Primary=function(name,course){
this.name=name;
this.course=course;
}

接着我们通过抽象工厂实现对Students抽象类的继承

AbstractFactory("Students",Primary);
Primary.prototype.getName=function(){
return this.name;
}
Primary.prototype.getCourse=function(){
return this.course;
}

最后我们试着调用一下

var student=new Primary("张三","数学");
console.log(student.getName());//张三
console.log(student.getCourse());//数学
console.log(student.type);//Students

抽象工厂模式是设计模式中最抽象的一种,也是创建模式中唯一一种抽象化创建模式,该模式创建出的结果不是一个真实的对象实例,而是一个类簇,它制定了类的结构,这也就和我们之前介绍的简单工厂模式创建单一对象,工厂方法模式创建多类对象有了区别,但是由于JavaScript中不支持抽象化创建和虚方法,所以这种模式不能像其他面向对象语言中应用的那么广泛。

也谢谢大家看到这里:)如果你觉得我的分享还可以请点击推荐,分享给你的朋友让我们一起进步~

好了以上就是本次分享的全部内容,本次示例参考自JavaScript设计模式一书,让我们一点点积累一点点成长,希望对大家有所帮助。

欢迎转载,转载请注明作者,原文出处。

再起航,我的学习笔记之JavaScript设计模式06(抽象工厂模式)的更多相关文章

  1. 再起航,我的学习笔记之JavaScript设计模式07(抽象工厂模式)

    我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前两 ...

  2. 再起航,我的学习笔记之JavaScript设计模式05(简单工厂模式)

    我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几 ...

  3. 再起航,我的学习笔记之JavaScript设计模式05(简单工程模式)

    我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几 ...

  4. 再起航,我的学习笔记之JavaScript设计模式06(工厂方法模式)

    上一次已经给大家介绍了简单工厂模式,相信大家对创建型设计模式有了初步的了解,本次我将给大家介绍的是工厂方法模式. 工厂方法模式 工厂方法模式(Factory Method):通过对产品类的抽象使其创建 ...

  5. 再起航,我的学习笔记之JavaScript设计模式30(简单模板模式)

    简单模板模式 概念介绍 简单模板模式(Simple template): 通过格式化字符串拼凑出视图避免创建视图时大量节点操作,优化内存开销. 创建模板 在实际的业务中如果我们需要进行前后台交互,或多 ...

  6. 再起航,我的学习笔记之JavaScript设计模式13(装饰者模式)

    装饰者模式 装饰者模式(Decorator): 在不改变原对象的基础上,通过对其进行过包装拓展(添加属性高或者方法)使原有对象可以满足用户的更复杂需求. 如果现在我们有个需求,需要做一个提交表单,当我 ...

  7. 再起航,我的学习笔记之JavaScript设计模式23(中介者模式)

    中介者模式 概念介绍 中介者模式(Mediator):通过中介者对象封装一系列对象之间的交互,使对象之间不再相互引用降低他们之间的耦合,有时中介者对象也可以改变对象之间的交互. 创建一个中介 中介者模 ...

  8. 再起航,我的学习笔记之JavaScript设计模式16(享元模式)

    ### 享元模式 **享元模式(Flyweight):** 运用共享技术有效地支持大量的细粒度的对象,避免对象间拥有相同内容造成多余的开销. 上回我们在组合模式中创建了文章列表类,这次我们要向不同的文 ...

  9. 再起航,我的学习笔记之JavaScript设计模式14(桥接模式)

    桥接模式 桥接模式(Bridge): 在系统沿着多个维度变化的同时,又不增加其复杂度并已达到解耦 从定义上看桥接模式的定义十分难以理解,那么我们来通过示例来演示什么是桥接模式. 现在我们需要做一个导航 ...

随机推荐

  1. 使用Ansible进行项目的自动部署(Tomcat、Weblogic)

    原文:https://github.com/x113773/testall/issues/4 问题:Weblogic/Tomcat 通过JAVA直接远程调用或者调用本地Shell还是通过Ansible ...

  2. 一个"2-SUM"问题

    题目要求: Download the text file here. (Right click and save link as). The goal of this problem is to im ...

  3. PILLOW图片中加入中文 曲线救国Opencv

    索引 简述 准备 示例 效果图 结语 简述 我在使用opencv2或3的时候想要在图片上添加中文文字,需要去下载Freetype库,编译好链接到opencv库中才能中文的输出.网上大部分在图片中插入中 ...

  4. react-router 踩坑记

    react-router踩坑分享 背景 辛苦历程 JavaScript动态修改 第一次尝试 第二次尝试 第三次尝试 第四次尝试 总结步骤 其他方案 原理 History 常见的3种History Br ...

  5. JQuery实战——页面进度条效果

    今早逛阮一峰大神的博客 ECMAScript 6 入门 时候看到页面顶部有个进度条显示当前浏览的进度,如图: 顶部进度条会根据当前页面高度进行宽度调整,实战一番,视觉使用animated方法实现.下面 ...

  6. 一张图告诉你angular2所有知识点

    忙活了半年,从angular2.0到现在angular4.2.从没AOT到有AOT.我想说,angular2的学习曲线真的有点陡峭.只能说,angular2是一个比较完整的框架,框架就是这样,一大堆条 ...

  7. HDOJ 2209 贪心

    翻纸牌游戏 Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  8. Jenkins的安装配置

    Jenkins的安装配置 一.Jenkins简介 Jenkins 是一个可扩展的持续集成引擎.Jenkins可以帮我们将代码进行统一的编译打包.还可以放到tomcat容器中进行发布.简单来说就是我们通 ...

  9. webgl自学笔记——光照

    在Webgl中我们使用顶点着色器和片元着色器来为我们的场景创建光照模型.着色器允许我们使用数学模型来控制如何照亮我们的场景. 最好有线性代数的相关知识. 本章中: 光源.法线.材料 光照和着色的区别 ...

  10. 浅谈viewport

    我们通常在写移动端页面时,往往都会在html页面中加入这样一段话 <meta name="viewport" content="width=device-width ...