JavaScript设计模式-原型模式

109 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第22天,点击查看活动详情

之前总结了一个设计模式和node的一些基础的知识,接下来会主要用几篇文章来介绍一下更多的设计模式,这里主要都是来自《JavaScript设计模式》这本书,本书内容通俗易懂,很适合入门的小白学习,通过更多简单的案列来帮助我们理解设计模式,从而更好的入门设计模式

设计模式呢最多的可能是用到类,我们去通过类来封装一些实用的方法,通过设计模式去实现各个方法之间的解耦等,

由于JS中的继承是用原型链继承的,所以原型模式是用原型实例指向创建对象的类,使用于创建新的对象的类共享原型对象的属性以及方法

案例

比如我们现在需要实现一个页面上的轮播图,可能需要用到对轮播图操作的方法,比如聚焦,切换,点击展开等动作,那么我们可以创一个图片轮播的方法,也可以叫做类

image.png

上面这个方法只是一个基础的方法,但在实际操作中我们可能会有不同的各种各样的需求需要我们来实现,那样子我们就需要在基础功能上加上一些扩张来实现我们的需求,我们扩展的需要要依赖于我们的基础方法,比如切换图片的时候可能是上下方向的滑动,左右方向的滑动,也可能是自由方位的活动等功能,而且在图片滑动过程中的动画,比如渐变,大小缩放,都是可以拓展开的功能。

image.png

image.png

上面是在基础类上通过继承的方法去重写切换下一张图片的方法,这就是我们可以通过继承的方式去改变我们的基础扩展更多的方法,又节省了很多相同的地方,下面用一个实例来看一下

image.png

回顾

回顾一下之前我们对于原型链继承的了解,我们会发现,如果我们将属性和函数都放在基础类的构造函数中,那么作为基础类会被我们扩展的功能继承,所以每一次继承都会调用构造函数中的方法,那么可能在一定程度上会影响系统的性能,我们可以将一些性能消耗大的放到原型上面,简单但有差异的东西可以放到构造函数中

image.png

image.png

image.png

总结

原型模式就是将可复用的、可共享的、耗时大的从基类中提出来然后放在其原型中,然后子类通过组合继承或者寄生组合式继承而将方法和属性继承下来,对于子类中那些需要重写的方法进行重写,这样子类创建的对象既具有子类的属性和方法也共享了基类的原型方法