JavaScript设计模式-原型模式

码上飞
• 阅读 1558

原型模式

原型模式:用原型实例指向创建对象的类,使用于创建新的对象的类共享原型对象的属性以及方法。
父类总是要被子类继承的,如果将属性和方法都写在父类的构造函数里会有一些问题,比如每次子类继承都要创建一次父类,假如父类的构造函数中创建时存在很多耗时的逻辑,或者每次初始化都要做一些重复性的东西,这样性能消耗还是蛮大的。为了提高性能,我们需要一种共享机制。原型模式就是将可复用的,可共享的、耗时大的从父类中提出来,然后放在其原型中,然后通过组合继承或者寄生组合式继承将方法和属性继承下来,对于子类中那些需要重写的方法进行重写,这样子类创建的对象既有子类的属性和方法,也共享了父类的原型方法。
以图片轮播为例:

//图片轮播
var LoopImages = function (imgArr,container) {
    this.imageArray = imgArr;//轮播图片数组
    this.container = container;//轮播图片容器
}
LoopImages.prototype = {
    //创建轮播图片
    createImage : function () {
        console.log('LoopImages createImage function');
    },
    //切换下一张图片
    changeImage:function () {
        console.log('LoopImages changeImage function');
    }
}
//上下滑动切换类
var SlideLooImg = function (imgArr,container) {
    //构造函数继承图片轮播类
    LoopImages.call(this,imgArr,container);
}
SlideLooImg.prototype = new LoopImages();
//重写继承的切换下一张图片方法
SlideLooImg.prototype.changeImage = function () {
    console.log('SlideLoopImg changeImg function');
}
//渐隐切换类
var FadeLoopImg = function (imgArr,container,arrow) {
    LoopImages.call(this,imgArr,container);
    //切换箭头私有变量
    this.arrow = arrow;
}
FadeLoopImg.prototype = new LoopImages();
FadeLoopImg.prototype.changeImage = function () {
    console.log('FadeLoogImg changeImage function');
}
//实例化一个渐隐切换图片类
var fadeImg = new FadeLoopImg(['01.img','02.img','03.img'],'slide',['left.jpg','right.jpg']);
//测试用例
console.log(fadeImg.container);//slide
fadeImg.changeImage();//FadeLoogImg changeImage function

原型的拓展

原型对象是一个共享的对象,无论是父类的实例对象还是子类的继承,都是对它的一个指向引用,所以原型对象才会被共享。在任何时候,都可以对基类或者子类进行方法的拓展,并且所有被实例化的对象或者类都能获取这些方法。
如下:

//原型的拓展
LoopImages.prototype.getImageLength = function () {
    return this.imageArray.length;
}
FadeLoopImg.prototype.getContainer = function () {
    return this.container;
}
console.log(fadeImg.getImageLength());//3
console.log(fadeImg.getContainer());//slide
点赞
收藏
评论区
推荐文章
Irene181 Irene181
4年前
一篇文章带你搞懂Python中的继承和多态
一、继承的介绍继承是一种创建新的类的方式,新创建的叫子类,继承的叫父类、超类、基类。继承的特点就是子类可以使用父类的属性(特征、技能)。继承是类与类之间的关系。继承可以减少代码冗余、提高重用性。在现实生活中,继承一般指的是子女继承父辈的财产,如下图:二、如何用继承?1.继承语法Class派生类名(基类名):基类名写在括号里。在继承关系中,已有的,设计好
ZY ZY
4年前
js继承的几种方式
1.原型链继承原型链继承:想要继承,就必须要提供父类(继承谁,提供继承的属性)//父级functionPerson(name)//给构造函数添加参数this.namename;this.age10;this.sumfunction()console.log(this.name)//原
Wesley13 Wesley13
3年前
java中多态的实现机制
多态的概念:  简单来说就是事物在运行过程中存在的不同状态,即父类或接口定义的引用变量指向子类或具体实现类的实例对象。程序调用方法在运行期才进行动态绑定,而不是引用变量的类型中定义的方法。多态存在的前提:1、存在继承关系,子类继承父类;2、子类重写父类的方法;3、父类引用指向子类对象。具体实例:1、定义一个父类:Animal
菜园前端 菜园前端
2年前
前端学习重点-原型与原型链
原文链接:什么是原型?每一个函数都包含一个prototype属性,这是一个指针指向"原型对象"(prototypeobject),也就是我们平时说的原型。每一个函数都包含不同的原型对象。当将函数用作构造函数的时候,新创建的对象(实例)会从原型对象上继承属性
灯灯灯灯 灯灯灯灯
4年前
「超全超细」Java设计模式图文详解!!!
java设计模式—原型模式Java原型模式1、概述  啥是原型模式?  原型模式属于设计模式中的创建型中的一员,  原型模式:使用原型实例指定待创建对象的类型,并且通过复制这个原型来创建新的对象!  说大白话就是自己复制自己,通过原生对象复制出一个新的对象,这两个对象结构相同且相似;  需要注意的是,原型对象自己不仅是个对象还是个工厂!并且通过克隆方式创
Stella981 Stella981
3年前
Javascript 是如何体现继承的 ?
js继承的概念js里常用的如下两种继承方式:原型链继承(对象间的继承)类式继承(构造函数间的继承) 由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念。所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现在面向对象的语言中,我们使用类来创建一个自定义对象
Stella981 Stella981
3年前
Python Day24:类的继承、派生、覆盖、super()、绑定、非绑定方法
类的继承、派生、覆盖、super()python类的继承:子类继承父类,只需要在定义类的时候在类名后面加上(父类名)。继承之后,父类的属性方法、子类都可以访问派生:子类继承父类后,自己在父类的基础上,又添加了一些属于自己特性的属性、方法
Wesley13 Wesley13
3年前
Java的类继承
知识点1、继承作用:提高代码的重用性,继承之后子类可以继承父类中的属性和方法减少重复代码条件:子类和父类要满足isa的逻辑关系,才能使用继承。如:苹果isa水果语法:使用extends连接子类和父类。子类extends父类Java是单继承,一个类只能继承一个父类。子类不能继承父类私有的属性,但是可以
Stella981 Stella981
3年前
JavaScript面向对象编程的15种设计模式
在程序设计中有很多实用的设计模式,而其中大部分语言的实现都是基于“类”。在JavaScript中并没有类这种概念,面向对象编程不是基于类,而是基于原型去面向对象编程,JS中的函数属于一等对象,而基于JS中闭包与弱类型等特性,在实现一些设计模式的方式上与众不同。ps:本文之讲述面向对象编程的设计模式策略,JavaScript原型的基础请参考阮一峰面向
Stella981 Stella981
3年前
Javascript中,实现类与继承的方法和优缺点分析
Javascript是一种弱类型语言,不存在类的概念,但在js中可以模仿类似于JAVA中的类,实现类与继承第一种方法:利用Javascript中的原型链1//首先定义一个父类23functionAnimal(name,age){4//定义父类的属性5thi
Wesley13 Wesley13
3年前
09面向对象高级特性二
面向对象高级特性二上转型对象(上溯)如果A类是B类的父类,当我们用子类创建对象,并把这个对象的引用放到父类的对象中时:Aa;BbnewB();     或        AanewB();ab;称父类对象a是子类对象b的上转型对象。上转型对象
码上飞
码上飞
Lv1
在一切破旧褪色中,请你永远闪烁。
文章
4
粉丝
0
获赞
0