js原生设计模式——7原型模式之new+call(this)组合应用再探讨实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>new+call(this)组合应用再探讨实例</title>
<script type="text/javascript">
/***
*参数:
*imgArr:图片组
*container:轮播图的父容器
*arrow:左右箭头图片组
*/
//创建图片轮播基类
var LoopImages = function(imgArr,container){
this.imagesArr = imgArr;
this.container = container;
}
LoopImages.prototype = {
//创建轮播图片
createImage:function(){
console.log('createLoopImages');
},
//切换下一张图片
changeImage:function(){
console.log('changeLoopImages');
}
}
//创建上下滑动子类
var SlideLoopImg = function(imgArr,container){
//构造函数继承父类图片轮播类
LoopImages.call(this,imgArr,container);
}
SlideLoopImg.prototype = new LoopImages();//这句加上上面的call(this)就是组合式继承了
//先new继承父类原型,再创建子类的原型方法,这个顺序一定得这样写,否则报错
SlideLoopImg.prototype.changeImage = function(){
console.log('SlideLoopImg changeImages');
}
//创建渐隐渐显子类
var FadeLoopImg = function(imgArr,container,arrow){
LoopImages.call(this,imgArr,container);
this.arrow = arrow;
}
FadeLoopImg.prototype = new LoopImages();
FadeLoopImg.prototype.changeImage = function(){
console.log('FadeLoopImg changeImages');
}
//测试用例
var fadeimg = new FadeLoopImg(['01.jpg','02.jpg','03.jpg','04.jpg'],'slide',['left.jpg','right.jpg']);//'slide'是父容器名字
fadeimg.changeImage();
//本例已经通过验证
</script>
</head>
<body>
</body>
</html>
js原生设计模式——7原型模式之new+call(this)组合应用再探讨实例的更多相关文章
- js原生设计模式——7原型模式之真正的原型模式——对象复制封装
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- js原生设计模式——13桥接模式(相同业务逻辑抽象化处理的职责链模式)
桥接模式之多元化类之间的实例化调用实例 <!DOCTYPE html><html lang="en"><head> <meta ch ...
- js原生设计模式——9外观模式封装
1.事件处理程序兼容性封装 <!DOCTYPE html><html lang="en"><head> <meta charset= ...
- js原生设计模式——9外观模式封装2(小型代码库YJ)
<script type="text/javascript"> //小型代码库YJ封装 var YJ = { //根据id获取元素 ...
- 设计模式_11_原型模式(prototype)深拷贝、浅拷贝
设计模式_11_原型模式(prototype) 浅拷贝: package designPatternOf23; /** * 定义:用原型实例,指定创建对象的种类,并通过拷贝这些原型创建新的对象 * P ...
- C#设计模式(6)——原型模式(Prototype Pattern)
一.引言 在软件系统中,当创建一个类的实例的过程很昂贵或很复杂,并且我们需要创建多个这样类的实例时,如果我们用new操作符去创建这样的类实例,这未免会增加创建类的复杂度和耗费更多的内存空间,因为这样在 ...
- 乐在其中设计模式(C#) - 原型模式(Prototype Pattern)
原文:乐在其中设计模式(C#) - 原型模式(Prototype Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 原型模式(Prototype Pattern) 作者:weba ...
- C#设计模式之六原型模式(Prototype)【创建型】
一.引言 在开始今天的文章之前先说明一点,欢迎大家来指正.很多人说原型设计模式会节省机器内存,他们说是拷贝出来的对象,这些对象其实都是原型的复制,不会使用内存.我认为这是不对的,因为拷贝出来的每一个对 ...
- C#设计模式之五原型模式(Prototype Pattern)【创建型】
一.引言 在开始今天的文章之前先说明一点,欢迎大家来指正.很多人说原型设计模式会节省机器内存,他们说是拷贝出来的对象,这些对象其实都是原型的复制,不会使用内存.我认为这是不对的,因为拷贝出来的每一个对 ...
随机推荐
- Sasha and Array
Sasha and Array time limit per test 5 seconds memory limit per test 256 megabytes input standard inp ...
- android bitmap compress(图片压缩)
android bitmap compress android的照相功能随着手机硬件的发展,变得越来越强大,能够找出很高分辨率的图片. 有些场景中,需要照相并且上传到服务,但是由于图片的大小太大,那么 ...
- linux commands ---2 ,学习vim编辑器如何使用的方法。
vim /data/yst.txt 打开一个文件之后,然后在命令行模式下,输入:help 可以调出 vim 的帮助文档. 然后会进入: 然后就可以查阅具体的帮助文档了,再也不用再网上找一些零散的v ...
- CodeForces 616A Comparing Two Long Integers
水题 #include<cstdio> #include<cstring> #include<algorithm> using namespace std; +; ...
- USACO Section 1.1 Your Ride Is Here 解题报告
题目 问题描述 将字符串转变为数字,字母A对应的值为1,依次对应,字母Z对应的值为26.现在有一个字符串,将其中的每个字符转变为数字之后进行累乘,最终的结果对47求余数. 题目给你两个字符串,其中的字 ...
- CSS的继承性和层叠性
1.继承性 比不是所有的属性都能继承,只有一些文本的属性才能被继承.比如:color,text-开头的,line-开头的,font-开头的.这几种属性才能被继承. 其余的关于盒子,定位,布局的都不能被 ...
- maven bundle
今天引入了几个bundle到pom,尽然说missing,我还以为是nexus组织下载.把type=bundle去掉可以下载,后来同事给了我这个连接https://issues.apache.org/ ...
- elasticSearch indices VS type
elasticSearch 的中文文档 http://es.xiaoleilu.com/010_Intro/05_What_is_it.html https://www.elastic.co/blog ...
- SQL Server 2012 - Transact-SQL
变量 --全局变量 select @@VERSION --局部变量 declare @i int set @i=5 select @i 通配符: like 'joh%', %任意长度的任意字 ...
- mysql管理---表分区
一.什么是表分区 通俗地讲表分区是将一大表,根据条件分割成若干个小表.mysql5.1开始支持数据表分区了. 如:某用户表的记录超过了600万条,那么就可以根据入库日期将表分区,也可以根据所在地将表分 ...