JavaScript设计模式之原型模式详情


Posted in Javascript onJune 21, 2022

前言

设计模式呢最多的可能是用到类,我们去通过类来封装一些实用的方法,通过设计模式去实现各个方法之间的解耦等,由于JS中的继承是用原型链继承的,所以原型模式是用原型实例指向创建对象的类,使用于创建新的对象的类共享原型对象的属性以及方法

案例

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

JavaScript设计模式之原型模式详情

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

JavaScript设计模式之原型模式详情

JavaScript设计模式之原型模式详情

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

JavaScript设计模式之原型模式详情

回顾

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

JavaScript设计模式之原型模式详情

JavaScript设计模式之原型模式详情

JavaScript设计模式之原型模式详情

小结:

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

原型的这种设计模式,是一种比较简单的设计模式,由于初始化都做一些重复性的东西,造成的性能消耗。为了提高性能创建一种共享机制,这样每当创建基类时,对于每次创建的一些简单而又差异化的属性我们可以放在构造函数中,而我们将一些消耗资源比较大的方法放在基类的原型中,这样就会避免很多不必要的消耗,这也就是原型模式的一个雏形

原型的拓展

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

JavaScript设计模式之原型模式详情

由于俩个子类都继承同一个父类,所以在原型上声明方法的时候,由于原型对象是一个共享的对象,指向同一个引用,所以一个子类可以访问到另一个子类在原型上声明的方法,虽然这种做法比较自由,可以有较高的拓展性,但同时也不能随意使用,否则可能会影响到其他实例的属性或者是方法,这样做是一个比较低效的操作。

但如创建一个实例对象的构造函数比较复杂,或者耗时比较长,最好不要用new关键字去复制这些基类,但可以通过对这些对象属性或者方法进行复制来实现创建,如果涉及多个对象,我们也可以通过原型模式来实现对新对象的创建。那么首先要有一个原型模式的对象复制方法。

JavaScript设计模式之原型模式详情

上面这个函数为我们提供了复制原型的方法,通过去获取另一个构造函数的模板属性,遍历到另一个构造函数中,最后通过new返回这个复制的新的构造函数

比如我们现在创建了一个构造函数,这个构造函数没有基类,只是一些属性和方法的模板对象,我们就可以通过复制的方法来实现构造出一个新的构造函数

JavaScript设计模式之原型模式详情

并且由于我们定义复制函数时候已经有new结果的返回,所以但我们在使用的时候,就可以直接使用方法,而不需要通过new 去实现

JavaScript设计模式之原型模式详情

到此这篇关于JavaScript设计模式之原型模式详情的文章就介绍到这了,更多相关JS原型模式内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery模拟按下回车实现代码
Sep 20 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
js实现小时钟效果
Mar 25 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
js前端设计模式优化50%表单校验代码示例
微前端qiankun改造日渐庞大的项目教程
Jun 21 #Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 #Javascript
js前端图片加载异常兜底方案
Jun 21 #Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 #Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 #Javascript
JavaScript前端面试组合函数
Jun 21 #Javascript
You might like
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
自考生毕业自我鉴定
2013/10/10 职场文书
毕业生的自我鉴定
2013/10/29 职场文书
幼儿教育感言
2014/02/05 职场文书
期终自我鉴定
2014/02/17 职场文书
学生手册评语
2014/05/05 职场文书
文化建设工作方案
2014/05/12 职场文书
责任心演讲稿
2014/05/14 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
员工离职证明范本
2015/06/12 职场文书
新手入门Mysql--概念
2021/06/18 MySQL