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

目录
  • 前言
  • 案例
  • 回顾
  • 原型的拓展

前言

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

案例

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

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

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

回顾

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

小结：

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

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

原型的拓展

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

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

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

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

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

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

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

赞 (0)

相关推荐

  • JavaScript设计模式之原型模式分析【ES5与ES6】

    本文实例讲述了JavaScript设计模式之原型模式.分享给大家供大家参考,具体如下: 从设计模式的角度讲,原型模式是用于创建对象的一种模式,若需要创建一个对象,一种方法是先指定其类型,然后通过类来创建这个对象,另一种方法是通过原型来创建,不必关心对象的具体类型,而是找到一个对象,然后通过克隆来创建一个一模一样的对象. ES5提供了Object.create(obj)方法来克隆对象,在不支持Object.create(obj)方法的浏览器中,可以使用以下代码: Object.create = O

  • 详解js产生对象的3种基本方式（工厂模式，构造函数模式，原型模式）

    1.工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象.其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可. function a(name){ var b = new object(); b.name = name; b.say = function(){ alert(this.name); } return b } 函数内部产生b对象并返回. 2.构造函数模式 function

  • javascript设计模式 – 原型模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 原型模式原理与应用.分享给大家供大家参考,具体如下: 介绍:在日常的开发过程中,我们经常会利用到前端模板引擎来做页面渲染,因为存在很多页面结构相同,内容不同的场景.这种场景在js层面也会遇到, 很多组件存在相同或者类似,重复的创建会导致系统的消耗,这就要用到原型模式了.将相似内容提取出来作为原型类,创建具体类时需要对原型类进行复制然后扩展. 需要注意的是,复制出来的对象在进行修改时不会影响到原型类,二者相互独立. 定义:使用原型实例指定创建对象的种

  • JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】

    本文实例总结了JavaScript创建对象方式.分享给大家供大家参考,具体如下: 这里主要是对<JavaScript高级程序设计>第六章(面向对象的程序设计)的总结,书上的这章至少看了4遍是有的.该章主要讲对象的创建与继承.其中创建对象和继承方式至少6种,再加上一些方法属性,很容易搞得晕头转向的.因此有必要对本章的内容理一理,以后忘了也好过来看一看. 由于文章长度的限制,本文主要讲创建对象. 1 创建对象 1.1 一般方法 使用Object或者采用对象字面量的方法. var o = {a: 1

  • Javascript设计模式之原型模式详细

    Javascript设计模式之原型模式详细

    目录 1.原型模式 示例一 示例二 示例三 2.观察者模式 1.原型模式 原型模式用于在创建对象时,通过共享某个对象原型的属性和方法,从而达到提高性能.降低内存占用.代码复用的效果. 示例一 function Person(name) { this.name = name; this.config = { a: "1", b: "2", }; this.hello = function () { console.info("hello"); };

  • js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)

    在上篇文章给大家介绍了javascript面向对象基础,本篇文章继续深入学习javascript面向对象,JS的语法非常灵活,简单的对象创建就有好几种不同的方法.这些过于灵活的地方有时候确实很让人迷惑,那么今天我们就来梳理一下JS中常用的创建对象的几种方法吧. 前言 虽然使用 Object构造函数 或者使用 对象字面量 可以很方便的用来创建一个对象,但这种方式有一个明显的缺点:使用一个接口创建多个对象会产生很多冗余的代码.因此为了解决这个问题,人们开始使用以下几种方式来常见对象. 工厂模式 该模

  • 怎样用JavaScript实现原型模式

    概述 原型模式是指原型实例指向创建对象的种类,并通过拷贝这些原型创建新的对象,是一种用来创建对象的模式,也就是创建一个对象作为另一个对象的prototype属性: prototype警告:学习了解原型模式前需先学习原型.原型链.prototype.__proto__.constructor等知识: 实现原型模式 ES5中的API:Object.create(prototype, optionalDescriptorObjects) Object.create()方法接收两个参数:第一个参数是__

  • 深入了解js原型模式

    一.什么是原型模式 在js中,创建对象的方式有工厂模式和构造函数模式等: 而构造函数模式最大的问题在于:构造函数中的每个方法都需要在实例对象中重新创建一遍,不能复用,所以为了解决这一个问题,就需要使用原型模式来创建对象. 原型模式是把所有实例共享的方法和属性放在一个叫做prototype(原型)的属性中 ,在创建一个函数时都会有个prototype属性, 这个属性是一个指针,指向一个对象,是通过调用构造函数而创建的那个对象实例的原型对象. // 构造函数 function Person() {}

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

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

    目录 前言 案例 回顾 原型的拓展 前言 设计模式呢最多的可能是用到类,我们去通过类来封装一些实用的方法,通过设计模式去实现各个方法之间的解耦等,由于JS中的继承是用原型链继承的,所以原型模式是用原型实例指向创建对象的类,使用于创建新的对象的类共享原型对象的属性以及方法 案例 比如我们现在需要实现一个页面上的轮播图,可能需要用到对轮播图操作的方法,比如聚焦,切换,点击展开等动作,那么我们可以创一个图片轮播的方法,也可以叫做类 上面这个方法只是一个基础的方法,但在实际操作中我们可能会有不同的各种各

  • JavaScript设计模式之原型模式和适配器模式示例详解

    目录 原型模式 原型模式介绍 代码实现 适配器模式 适配器模式介绍 代码实现 小结 原型模式 原型模式介绍 原型模式是指原型实例指向创建对象的种类,并通过拷贝这些原型创建新的对象,是一种用来创建对象的模式,也就是创建一个对象作为另一个对象的prototype属性 实现原型模式是在ECMAScript5中,提出的Object.create方法,使用现有的对象来提供新创建的对象的__proto__. 代码实现 var lynkCoPrototype = { model: "领克", get

  • JavaScript设计模式之原型模式(Object.create与prototype)介绍

    原型模式说明 说明:使用原型实例来 拷贝 创建新的可定制的对象:新建的对象,不需要知道原对象创建的具体过程: 过程:Prototype => new ProtoExam => clone to new Object; 使用相关代码: 复制代码 代码如下: function Prototype() {     this.name = '';     this.age = '';     this.sex = ''; } Prototype.prototype.userInfo = functio

  • JavaScript设计模式之代理模式实例分析

    JavaScript设计模式之代理模式实例分析

    本文实例讲述了JavaScript设计模式之代理模式.分享给大家供大家参考,具体如下: 代理模式的定义,代理是一个对象(proxy)用它来控制目标对象的访问.为此他要是先与目标对象相同的接口,但是他不同于装饰者模式,它对目标对象不进行任何修改,它的目的在于延缓"复杂"对象的初始化时间.这样可以在用到这个目标对象的时候再初始化他(对于单例来讲更是重要). 代理模式有两种分类: (1)普通代理 (2)惰性代理 具体看下面的例子 第一,普通代理模式 步骤一,接口检验文件的引用 //定义一个静

  • JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析

    本文实例讲述了JavaScript设计模式之构造器模式(生成器模式)定义与用法.分享给大家供大家参考,具体如下: 工厂模式虽然解决了重复实例化的问题,但无法识别对象类型. 可以采用构造函数(构造方法)可用来创建特定的对象,可以解决工厂模式无法识别对象实例的问题.也就是说,使用构造函数的方法 ,即解决了重复实例化的问题 ,又解决了对象识别的问题. 构造器模式与工厂模式的不同之处在于: ① 构造函数方法没有显示的创建对象 (new Object()): ② 直接将属性和方法赋值给 this 对象:

  • JavaScript设计模式之门面模式原理与实现方法分析

    本文实例讲述了JavaScript设计模式之门面模式原理与实现方法.分享给大家供大家参考,具体如下: 外部与一个子系统的通信必须通过一个系统的一个门面对象进行,这就是门面模式. 门面模式具备如下两个角色: 1. 门面角色 客户端可以调用这个角色方法,此角色中有子系统的应用(知晓相关的(一个或多个)子系统的功能和责任).本角色会将所有从客户端发来的请求委派到相应的子系统去. 2. 子系统角色 可以同时有一个或多个子系统.每一个子系统都不是一个单独的类,而是一些类的集合.每一个子系统都可以被客户端直

  • javascript设计模式 – 简单工厂模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 简单工厂模式.分享给大家供大家参考,具体如下: 介绍:简单工厂模式是最常用的一类创建型设计模式.其中简单工厂模式并不属于GoF23个经典设计模式,它通常被作为学习其他工厂模式的基础. 定义:定义一个工厂类,它可以根据参数的不同返回不同的实例,被创建的实例通常都具有相同的父类,因为在简单工厂模式中创建实例的方法是静态方法,因此简单工厂模式又被称为静态工厂方法模式,它属于类创建型模式. 场景:我们需要写一个dialog工具类,在项目初期我们只需要考虑一

  • JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】

    本文实例讲述了JavaScript设计模式--简单工厂模式.分享给大家供大家参考,具体如下: 第一步,Ajax操作接口(目的是起一个接口检测作用) (1)引入接口文件 //定义一个静态方法来实现接口与实现类的直接检验 //静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的 //我们要把静态的函数直接写到类层次上 //(1)定义一个接口类 var Interface=function (name,methods) {//name:接口名字 if(argument

随机推荐