<!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)组合应用再探讨实例的更多相关文章

  1. js原生设计模式——7原型模式之真正的原型模式——对象复制封装

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. js原生设计模式——13桥接模式(相同业务逻辑抽象化处理的职责链模式)

    桥接模式之多元化类之间的实例化调用实例 <!DOCTYPE html><html lang="en"><head>    <meta ch ...

  3. js原生设计模式——9外观模式封装

    1.事件处理程序兼容性封装 <!DOCTYPE html><html lang="en"><head>    <meta charset= ...

  4. js原生设计模式——9外观模式封装2(小型代码库YJ)

    <script type="text/javascript">    //小型代码库YJ封装    var YJ = {        //根据id获取元素       ...

  5. 设计模式_11_原型模式（prototype）深拷贝、浅拷贝

    设计模式_11_原型模式(prototype) 浅拷贝: package designPatternOf23; /** * 定义:用原型实例,指定创建对象的种类,并通过拷贝这些原型创建新的对象 * P ...

  6. C#设计模式(6)——原型模式（Prototype Pattern）

    一.引言 在软件系统中,当创建一个类的实例的过程很昂贵或很复杂,并且我们需要创建多个这样类的实例时,如果我们用new操作符去创建这样的类实例,这未免会增加创建类的复杂度和耗费更多的内存空间,因为这样在 ...

  7. 乐在其中设计模式(C#) - 原型模式(Prototype Pattern)

    原文:乐在其中设计模式(C#) - 原型模式(Prototype Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 原型模式(Prototype Pattern) 作者:weba ...

  8. C#设计模式之六原型模式（Prototype）【创建型】

    一.引言 在开始今天的文章之前先说明一点,欢迎大家来指正.很多人说原型设计模式会节省机器内存,他们说是拷贝出来的对象,这些对象其实都是原型的复制,不会使用内存.我认为这是不对的,因为拷贝出来的每一个对 ...

  9. C#设计模式之五原型模式（Prototype Pattern）【创建型】

    一.引言 在开始今天的文章之前先说明一点,欢迎大家来指正.很多人说原型设计模式会节省机器内存,他们说是拷贝出来的对象,这些对象其实都是原型的复制,不会使用内存.我认为这是不对的,因为拷贝出来的每一个对 ...

随机推荐

  1. 丑数<数学技巧>

    题意:丑数就是质因子只有2,3,5 ,7,的数,另外1也是丑数.求第n(1=<n<=5842)个丑数,n=0,结束. 思路:.3.5或者7的结果(1除外).那么,现在最主要的问题是如何排序 ...

  2. (转)Hadoop之常见错误集锦

     Hadoop之常见错误集锦            下文中没有特殊说明,环境都是CentOS下Hadoop 2.2.0.1.伪分布模式下执行start-dfs.sh脚本启动HDFS时出现如下错误:   ...

  3. 3D动画效果照片墙demo

        <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF- ...

  4. decimal 和 numeric (Transact-SQL)

    decimal(18,0)18是定点精度,0是小数位数.decimal(a,b)a指定指定小数点左边和右边可以存储的十进制数字的最大个数,最大精度38.b指定小数点右边可以存储的十进制数字的最大个数. ...

  5. 为什么无论你怎么设置自定义的外层div的高度，easyui的动态添加的tab的高度还是不变高

    由以下代码可知,easyui自动将panel的height设置为了固定的150px高度!

  6. PAT (Advanced Level) 1085. Perfect Sequence (25)

    可以用双指针(尺取法),也可以枚举起点,二分终点. #include<cstdio> #include<cstring> #include<cmath> #incl ...

  7. JS监听input框的回车事件、属性值改变事件

    一.介绍 在程序猿门的工作中,经常会遇见一些表单数据的提交,对于有表单的东西而言,input输入框是非常常见的,所以对于一些input的基本事件,我们需要去掌握 二.input的监听enter事件 比 ...

  8. JAV基础语法之---数据类型转换

    数制转换": 1.string 转 byte[] String str = "Hello";byte[] srtbyte = str.getBytes(); 2.byte ...

  9. hashmap如何初始化

    现在知道的有两种: 1) Map<String, String> hashMap = new HashMap<String, String>(){            {   ...

  10. sublime C++ build system配置体验

    近期准备实习,于是终于步入了sublime的阵营,sublime确实性感. 在配置win7下C++编译运行集成环境的时候遇到点问题,于是接触了一下JSON格式,最后终于自己搞定了.. 参考文档:htt ...