返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript设计模式之原型模式详情
  • 288
分享到

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

2024-04-02 19:04:59 288人浏览 安东尼
摘要

目录前言案例回顾原型的拓展前言 设计模式呢最多的可能是用到类,我们去通过类来封装一些实用的方法,通过设计模式去实现各个方法之间的解耦等,由于js中的继承是用原型链继承的,所以原型模式

前言

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

案例

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

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

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

回顾

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

小结:

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

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

原型的拓展

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

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

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

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

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

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

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

--结束END--

本文标题: JavaScript设计模式之原型模式详情

本文链接: https://lsjlt.com/news/152118.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript设计模式之原型模式详情
    目录前言案例回顾原型的拓展前言 设计模式呢最多的可能是用到类,我们去通过类来封装一些实用的方法,通过设计模式去实现各个方法之间的解耦等,由于JS中的继承是用原型链继承的,所以原型模式...
    99+
    2024-04-02
  • Javascript设计模式之原型模式详细
    目录1、原型模式示例一示例二示例三2、观察者模式1、原型模式 原型模式用于在创建对象时,通过共享某个对象原型的属性和方法,从而达到提高性能、降低内存占用、代码复用的效果。 示例一 ...
    99+
    2024-04-02
  • JavaScript设计模式之迭代者模式详情
    目录前言迭代器设计模式在生活中的运用迭代器设计模式在业务上的应用内部迭代器外部迭代器前言 迭代器设计模式是指提供一个方法去访问一个有序复杂数据,这些数据在内部有可能会用复杂的结构进行...
    99+
    2024-04-02
  • Java设计模式之原型模式详解
    目录一、前言二、优点及适用场景三、原型模式的注意事项四、浅复制和深复制五、浅复制demo演示六、深复制demo演示一、前言 原型模式是一种比较简单的模式,也非常容易理解,实现一个接口...
    99+
    2024-04-02
  • Java设计模式之java原型模式详解
    目录介绍角色Java语言提供的clone()方法代码演示—克隆羊结论深浅拷贝深浅拷贝探讨实现深克隆的方式一 : 手动对引用对象进行克隆实现深克隆的方式一 :序列化原型模式对单例模式的...
    99+
    2024-04-02
  • JavaScript设计模式之原型模式和适配器模式示例详解
    目录原型模式原型模式介绍代码实现适配器模式适配器模式介绍代码实现小结原型模式 原型模式介绍 原型模式是指原型实例指向创建对象的种类,并通过拷贝这些原型创建新的对象,是一种用来创建对象...
    99+
    2024-04-02
  • JavaScript设计模式之原型模式怎么实现
    本篇内容主要讲解“JavaScript设计模式之原型模式怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript设计模式之原型模式怎么实现”吧!前言设计模式呢最多的可能是用到类...
    99+
    2023-07-02
  • Golang设计模式之原型模式详细讲解
    目录原型模式概念示例原型模式 原型是一种创建型设计模式, 使你能够复制对象, 甚至是复杂对象, 而又无需使代码依赖它们所属的类。 所有的原型类都必须有一个通用的接口, 使得即使在对象...
    99+
    2023-01-11
    Go原型模式 Go设计模式
  • Android常用设计模式之原型模式详解
    目录前言一、基本使用二、对象与集合的使用三、浅拷贝与深拷贝四、Kotlin的应用总结前言 什么是原型模式? 它是指创建对象的种类,并通过拷贝这些原型创建新的对象。 它是用于创建重复的...
    99+
    2022-11-13
    Android 设计模式原型模式 Android 原型模式
  • java设计模式--原型模式详解
    目录引例原型模式浅拷贝在原先Sheep类基础上实现Cloneable接口,重写clone方法。客户端调用Sheep类新添的Cow类客户端调用克隆深拷贝1.Cow类也实现Cloneab...
    99+
    2024-04-02
  • Java设计模式之原型模式的示例详解
    目录定义案例需求方案一方案二对比分析总结 定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 即实现了一个原型接口,该接口用于创建当前对象的克隆,当直接创建对象的代...
    99+
    2024-04-02
  • .Net创建型设计模式之原型模式(Prototype)
    目录一、动机(Motivation)二、意图(Intent)三、结构(Structure)四、模式的组成五、 原型模式的具体实现六、原型模式的实现要点:1、原型模式的优点:2、原型模...
    99+
    2024-04-02
  • JavaScript设计模式之策略模式详解
    什么是设计模式?为什么需要学习设计模式? 学习设计模式的目的是:为了代码可重用性、让代码更容易被他人理解、保证代码可靠性。 设计模式使代码编写真正工程化;设计模式是软件工程的基石脉络...
    99+
    2024-04-02
  • java设计模式:原始模型模式
    目录什么是原始模型模式原始模型模式中的角色抽象原型角色(Prototype)具体原型角色(ConcretePrototype)A...
    99+
    2024-04-02
  • Java设计模式之原型设计示例详解
    目录简单说一下(定义)稍微夸一下(优缺点)顺便提一下(适用场景)着重讲一下(深、浅克隆)多多用一下(结构、代码实现)简单说一下(定义) 什么是原型模式:原型模式是用于创建重复的对象,...
    99+
    2024-04-02
  • Java 超详细讲解设计模式之原型模式讲解
    目录传统方式原型模式基本介绍原型模式在spring框架中源码分析深入讨论-浅讨论和深拷贝原型模式的注意事项和细节传统方式 克隆羊问题 现在有一只羊 tom,姓名为: tom,年龄为:...
    99+
    2024-04-02
  • JavaScript设计模式之中介者模式详解
    目录中介者模式现实中的中介者中介者模式的例子泡泡堂游戏为游戏增加队伍玩家增多带来的困扰用中介者模式改造泡泡堂游戏小结中介者模式 在我们生活的世界中,每个人每个物体之间都会产生一些错综...
    99+
    2022-11-13
    JavaScript 设计模式 JavaScript 中介者模式
  • JavaScript设计模式之职责链模式详解
    目录职责链模式1. 现实中的职责链模式2. 实际开发中的职责链模式3. 用职责链模式重构代码4. 灵活可拆分的职责链节点5. 异步的职责链6. 职责链模式的优缺点7. 用 AOP 实...
    99+
    2022-11-13
    JavaScript 设计模式 JavaScript 职责链模式
  • 深入理解Java设计模式之原型模式
    目录一、前言二、什么是原型模式三、原型模式的适用场景四、原型模式的实现1.浅拷贝实现2.深拷贝实现五、总结一、前言 单例模式可以避免重复创建消耗资源的对象,但是却不得不共用对象。若是...
    99+
    2024-04-02
  • JavaScript设计模式之命令模式
    命令模式是JavaScript设计模式中行为型的一种设计模式; 定义:向某些对象发送请求,但是并不知道被请求的操作具体是什么,所以我们希望以一种松耦合的方式来设计程序,使得请求发送者...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作