<!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. Go语言实现列出排列组合

    今天,隔壁坐的小朋友给我一串数字: 1 6 21 55 让我观察规律,然后帮他推导公式. 尼玛,当我是神呢?!! 想了半天没看出个原委, 于是看了他那边具体需要才发现他那边是对N个数字进行5个数字的组 ...

  2. BodyContent揭秘及定制复杂的JSP标签

    BodyContent揭秘及定制复杂的JSP标签 标签: jspintegerwrapperclass设计模式 2010-08-30 11:30 4555人阅读 评论(0) 收藏 举报  分类: HT ...

  3. HTTP协议详解 转自小坦克

    -- 此文章是转载小坦克的;直接复制文章的目的是因为原文章地址经常被重置,找不到原来的文章.小坦克博客园主页:https://home.cnblogs.com/u/TankXiao/ 当今web程序的 ...

  4. SQLSERVER设置行号

    select row_number()over(order by columnname)as rownum,* from tablename 按照columnname列进行排列

  5. How to get HTML code of a WebElement in Selenium

    http://stackoverflow.com/questions/32234205/how-to-get-html-code-of-a-webelement-in-selenium WebElem ...

  6. The 2014 ACMICPC Asia Regional Guangzhou Online

    [A]-_-/// [B]线段树+位运算(感觉可出) [C]地图BFS,找最长线 [D]地图BFS,加上各种复杂情况的最短路-_- [E]-_-/// [F]三分+圆与线段的交点,计算几何 [G]-_ ...

  7. Word字体与像素的对应关系(转)

    源:Word字体与像素的对应关系 英文字体的1磅(pt),相当于1/72 英寸(inch),约等于1/2.8mm.12PT的字打印出来约为4.2mm.网页中12px的字才相当于12像素. 虽然 四号= ...

  8. Horizon/DomainWorkFlow

    https://wiki.openstack.org/wiki/Horizon/DomainWorkFlow

  9. Arduino中hex文件的保存及应用（转）

    源:Arduino中hex文件的保存及应用 arduino在编译.链接.下载之后,hex文件自动删除了,造成软件仿真(如用proteus仿真)及其他单片机板应用的不便.以下是自己实践的小结,与大家分享 ...

  10. CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8

    CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8.将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS ...