JS原型模式什么场景应用,怎样使用
Admin 2022-09-06 群英技术资讯 477 次浏览
比如我们现在需要实现一个页面上的轮播图,可能需要用到对轮播图操作的方法,比如聚焦,切换,点击展开等动作,那么我们可以创一个图片轮播的方法,也可以叫做类
上面这个方法只是一个基础的方法,但在实际操作中我们可能会有不同的各种各样的需求需要我们来实现,那样子我们就需要在基础功能上加上一些扩张来实现我们的需求,我们扩展的需要要依赖于我们的基础方法,比如切换图片的时候可能是上下方向的滑动,左右方向的滑动,也可能是自由方位的活动等功能,而且在图片滑动过程中的动画,比如渐变,大小缩放,都是可以拓展开的功能。
上面是在基础类上通过继承的方法去重写切换下一张图片的方法,这就是我们可以通过继承的方式去改变我们的基础扩展更多的方法,又节省了很多相同的地方,下面用一个实例来看一下
回顾一下之前我们对于原型链继承的了解,我们会发现,如果我们将属性和函数都放在基础类的构造函数中,那么作为基础类会被我们扩展的功能继承,所以每一次继承都会调用构造函数中的方法,那么可能在一定程度上会影响系统的性能,我们可以将一些性能消耗大的放到原型上面,简单但有差异的东西可以放到构造函数中
小结:
原型模式就是将可复用的、可共享的、耗时大的从基类中提出来然后放在其原型中,然后子类通过组合继承或者寄生组合式继承而将方法和属性继承下来,对于子类中那些需要重写的方法进行重写,这样子类创建的对象既具有子类的属性和方法也共享了基类的原型方法
原型的这种设计模式,是一种比较简单的设计模式,由于初始化都做一些重复性的东西,造成的性能消耗。为了提高性能创建一种共享机制,这样每当创建基类时,对于每次创建的一些简单而又差异化的属性我们可以放在构造函数中,而我们将一些消耗资源比较大的方法放在基类的原型中,这样就会避免很多不必要的消耗,这也就是原型模式的一个雏形
原型对象是一个共享的对象,不论是父类的实例对象或者是子类的继承,都是对它的一个指向引用,所以原型对象才会被共享。既然被共享,那么对原型对象的拓展,不论是子类或者父类的实例对象都会继承下来
由于俩个子类都继承同一个父类,所以在原型上声明方法的时候,由于原型对象是一个共享的对象,指向同一个引用,所以一个子类可以访问到另一个子类在原型上声明的方法,虽然这种做法比较自由,可以有较高的拓展性,但同时也不能随意使用,否则可能会影响到其他实例的属性或者是方法,这样做是一个比较低效的操作。
但如创建一个实例对象的构造函数比较复杂,或者耗时比较长,最好不要用new关键字去复制这些基类,但可以通过对这些对象属性或者方法进行复制来实现创建,如果涉及多个对象,我们也可以通过原型模式来实现对新对象的创建。那么首先要有一个原型模式的对象复制方法。
上面这个函数为我们提供了复制原型的方法,通过去获取另一个构造函数的模板属性,遍历到另一个构造函数中,最后通过new返回这个复制的新的构造函数
比如我们现在创建了一个构造函数,这个构造函数没有基类,只是一些属性和方法的模板对象,我们就可以通过复制的方法来实现构造出一个新的构造函数
并且由于我们定义复制函数时候已经有new结果的返回,所以但我们在使用的时候,就可以直接使用方法,而不需要通过new 去实现
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
本文主要介绍了React项目如何使用Element的方法步骤,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Vue开发环境跨域访问问题,Vue开发环境跨域访问其他服务器或者本机其他端口,需要配置项目中config/index.js文件,修改如下
小程序五星评价怎样做的,代码是什么?在实际项目的操作过程或是学习过程中,不少人都会遇到这样的问题,接下来就让小编带大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
本篇文章给大家带来了关于JavaScript的相关知识,其中主要整理了数组知识点的相关问题,包括了数组的概念、数组中的常用属性和方法等等内容,下面一起来看一下,希望对大家有帮助。
在本篇文章里小编给大家整理了一篇关于vue中对虚拟dom的理解知识点总结内容,有兴趣的朋友们可以学习参考下。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008