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

我们之前分享过在JavaScript中继承是靠原型链来实现的,那么设计模式中就一定有原型模式,所以本次我们分享的就是原型模式

原型模式

原型模式(Prototype): 用原型实例指向创建对象的类,使用创建新的对象的类共享原型对象的属性以及方法。

假如我们有一个需求需要做图片轮播效果,但是,在这个页面又有多种效果,比如顶部的展示我需要从左向右切换,侧边栏的我要从上往下切换。这个时候我们要实现这个功能最好的方式就是通过创建对象来一一实现。

首先我们创建一个图像类

var LoopImages=function(imgArr,container){
this.imagesArray=imgArr;//轮播图片数组
this.container=container;//轮播图片容器
this.createImage=function(){}//创建轮播图片
this.changeImage=function(){}//切换下一张图片
}

接下来我们为这个图像类切换的动作创建类

上下滑动切换类

var SlideLoopImg=function(imgArr,container){
//构造函数继承图像类
LoopImages.call(this,imgArr,container);
//重写继承的切换下一张图片方法
this.chageImage=function(){
console.log('现在图片开始上下滑动');
}
}

左右切换类

var LeftRightLoopImg=function(imgArr,container,arrow){
//同样的我们用构造函数继承,继承图像类
LoopImages.call(this,imgArr,container);
//切换左右滑动剪头变量
this.arrow=arrow;
//重写继承的切换下一张图片方法
this.changeImage=function(){
console.log('现在图片开始左右滑动');
}
}

接着我们创建一个左右轮播的实例看一下

var leftRightImg=new LeftRightLoopImg(
[
'img1.jpg',
'img2.jpg',
'img3.jpg',
'img4.jpg'
],
'leftright',
[
'left.jpg',
'right.jpg'
]);
leftRightImg.changeImage();//现在图片开始左右滑动

这种写法可以实现我们的功能,但是如果父类的构造函数中存在创建比较耗时的逻辑时,或者每次初始化都要做一些重复性的东西,我们这样创建对性能的消耗很大。

为了提高性能,我们需要有一种共享机制在每次创建基类时,将每次创建的一些简单而又差异化的属性放在构造函数中,将消耗资源比较大的方法放在基类的原型中,这样可以避免很多不必要的消耗。这就是我们原型模式的一个雏形。

我们再来看看改良过的例子

同样的我们建一个图像类

var LoopImages=function(imgArr,container){
this.imagesArray=imgArr;//轮播图片数组
this.container=container;//轮播图片容器
}

向图像类的原型添加方法

LoopImages.prototype={
//创建轮播图片
createImage:function(){
console.log('创建方法');
},
//切换下一张图片
changeImage:function(){
console.log('切换方法');
}
}

上下滑动切换类

var SlideLoopImg=function(imgArr,container){
//构造函数继承图像类
LoopImages.call(this,imgArr,container); }

左右切换类

var LeftRightLoopImg=function(imgArr,container,arrow){
//同样的我们用构造函数继承,继承图像类
LoopImages.call(this,imgArr,container);
//切换左右滑动剪头变量
this.arrow=arrow;
}
LeftRightLoopImg.prototype=new LoopImages();
LeftRightLoopImg.prototype.changeImage=function(){
console.log('现在图片开始左右滑动');
}

我们来测试一下

var leftRightImg=new LeftRightLoopImg([
'img1.jpg',
'img2.jpg',
'img3.jpg',
'img4.jpg'
],'leftright',[
'left.jpg',
'right.jpg'
]);
console.log(leftRightImg.container);//leftright
leftRightImg.changeImage();//现在图片开始左右滑动

原型对象是个共享的对象,那么无论是父类的实例对象还是子类的继承,都是对它的一个指向引用,所以原型对象才会被共享,那么对原型对象的扩展,无论是子类还是父类的实例对象都会继承下来。

我们来试一下

LoopImages.prototype.getImageLength=function(){
return this.imagesArray.length;
}
LeftRightLoopImg.prototype.getContainer=function(){
return this.container;
}
console.log(leftRightImg.getImageLength());//4
console.log(leftRightImg.getContainer());//leftright

这样我们就能总结出一个原型模式的特点,在任何时候都可以对基类或者子类进行方法的扩展,而且所有被实例化的对象或者类都能获取这些方法,这样给予我们对功能扩展的自由性。

不过原型模式更多的是用在对对象的创建上,如果我们要创建一个构造函数比较复杂或者耗时较长的实例对象,此时我们最好不要用new关键字去复制这些基类,但可以通过对这些对象属性或者方法进行复制来实现创建,这是原型模式的最初的思想。

接下来我们写一个原型模式对象复制的方法

function prototypeExtend(){
var F=function(){},//缓存类,为实例化返回对象临时创建
args=arguments,
i=0,
len=args.length;
for(var i=0;i<args.length;i++){
//遍历每个模板对象中的属性
for(var j in args[i]){
//将这些属性复制到缓存类原型中
F.prototype[j]=args[i][j];
}
}
//返回一个缓存类的实例
return new F();
}

我们来看一下具体的应用

var grade=prototypeExtend({
fractions:99,
CSharp:function(){
console.log(this.fractions);
},
Java:function(fractions){
console.log(fractions);
},
JavaScript:function(){
console.log('不及格');
}
})

现在我们就可以不用new来创建对象而直接通过点语法去调用了,我们来看一下调用

grade.CSharp();//99
grade.Java(100);//100
grade.JavaScript();//不及格

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

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

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

再起航,我的学习笔记之JavaScript设计模式09(原型模式)的更多相关文章

  1. 再起航,我的学习笔记之JavaScript设计模式08(建造者模式)

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

  2. 再起航,我的学习笔记之JavaScript设计模式11(外观模式)

    经过一段时间的学习与分享,我们对创建型设计模式已经有了一定的认识,未来的一段时间里我们将展开新的篇章,开始迈入结构性设计模式的学习. 结构性设计模式与创建型设计模式不同,结构性设计模式更偏向于关注如何 ...

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

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

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

    模板方法模式 由模板方法模式开始我们正式告别结构型设计模式,开始行为型设计模式的学习分享 行为型设计模式用于不同对象之间职责划分或算法抽象,行为型设计模式不仅仅涉及类和对象,还涉及类或对象之间的交流模 ...

  5. 再起航,我的学习笔记之JavaScript设计模式20(策略模式)

    策略模式 策略模式(Strategy):将定义的一组算法封装起来,使其相互之间可以替换.封装的算法具有一定的独立性,不会随客户端变化而变化. 其实策略模式在我们生活中可应用的地方还是比较多的,比如在商 ...

  6. 再起航,我的学习笔记之JavaScript设计模式22(访问者模式)

    访问者模式 概念介绍 访问者模式(Visitor): 针对于对象结构中的元素,定义在不改变该对象的前提下访问结构中元素的新方法 解决低版本IE兼容性 我们来看下面这段代码,这段代码,我们封装了一个绑定 ...

  7. 再起航,我的学习笔记之JavaScript设计模式24(备忘录模式)

    备忘录模式 概念介绍 备忘录模式(Memento): 在不破坏对象的封装性的前提下,在对象之外捕获并保存该对象内部的状态以便日后对象使用或者对象恢复到以前的某个状态. 简易分页 在一般情况下我们需要做 ...

  8. 再起航,我的学习笔记之JavaScript设计模式25(迭代器模式)

    迭代器模式 概念介绍 迭代器模式(Iterator): 在不暴露对象内部结构的同时,可以顺序地访问聚合对象内部的元素. 迭代器 程序中的循环是一种利器,循环语句也使我们程序开发更简洁高效,但是有时一遍 ...

  9. 再起航,我的学习笔记之JavaScript设计模式26(解释器模式)

    解释器模式 概念介绍 解释器模式(Interpreter):给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子. 获取元素在页面中的路径 我们都知道获取一个 ...

随机推荐

  1. Echarts笔记——使用AJAX填充数据

    最近把编辑器从Sublime换成HBuilder,感觉好用很多啊,可能自己插件没弄好吧.不不过HBuilder的启动速度确实慢,放机械盘启动要7-13秒,还好有固态. 因为项目需要,这周上手了百度的E ...

  2. 从Java熟练到Android入门

    刚刚从学校出来,唉,从Java转入Android. 当初老师告诉我们Android不重要,结果,Android的所有课不是在玩手机就是在说话,没认真听也没认真看,作业也没认真做,现在想想好后悔啊,以至 ...

  3. accp8.0转换教材第1章多线程理解与练习

    一.单词部分: ①process进程 ②current当前的③thread线程④runnable可获取的 ⑤interrupt中断⑥join加入⑦yield产生⑧synchronize同时发生 二.预 ...

  4. 【hibernate 初探】之 关系映射,ORM

    从整理上讲,一个ORM框架(以hibernate为例)所涉及内容无非就是,如何映射,如何检索,还有事务处理.所以从这三方面入手,基本上可以保证将hibernate可以用到自己的项目之中.所以我先说一下 ...

  5. JAVA - 深入JAVA 虚拟机 2

    类的两种类型的类加载器 -Java虚拟机自带的加载器 根类加载器(Bootstrap): 使用C++编写,programer can not abtain this class. 扩展类加载器(Ext ...

  6. HDU 1051 Wooden Sticks 贪心||DP

    Wooden Sticks Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  7. Java 反射在实际开发中的应用

    运行时类型识别(RTTI, Run-Time Type Information)是Java中非常有用的机制,在java中,有两种RTTI的方式,一种是传统的,即假设在编译时已经知道了所有的类型:还有一 ...

  8. Oracle存储过程、包、方法使用总结

    /** *@author:zhengwei *@date:2017-04-28 *@desc:存储过程用法总结 */ CREATE OR REPLACE PROCEDURE MYPROCEDURE(P ...

  9. Execution failed for task':app;clean'

    Execution failed for task':app;clean' >Unable to delete directory:f:xxxxxbuild\output\apk当程序出先这个错 ...

  10. 说声PHP的setter&getter(魔术)方法,你们辛苦了

    php作为快速迭代项目的语言,其牛逼性质自不必多说.今天咱们要来说说php语言几个魔术方法,当然了,主要以setter&getter方法为主. 首先,咱们得知道什么叫魔术方法? 官方定义为:_ ...