<!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. 热门IOS 第三方库

    综合github上各个项目的关注度与具体使用情况,涵盖功能,UI,数据库,自动化测试,编程工具等类型,看完,还敢自称”精通iOS开发”吗? https://github.com/syedhali/EZ ...

  2. NDK常用命令

    NDK Build 用法(NDK Build)   1.ndk-build的用法 Android NDKr4引入了一个新的.小巧的shell脚本ndk-build,来简化源码编译. 该文件位于NDK根 ...

  3. [转] Linux下移动virtualbox虚拟硬盘丢失eth0

    1.遇到什么的问题(What)      在新的virtualbox虚拟机上挂上曾使用过的虚拟硬盘,在启动的时候,发现找不到网卡eth0, 在输入ifconfig –a的时候,也没有任何Ethnet的 ...

  4. Chapter 1 First Sight——1

    My mother drove me to the airport with the windows rolled down. 随着窗户渐渐摇下,我妈妈开着车送我去机场. It was seventy ...

  5. CSS3中transform几个属性值的注意点

    transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文 ...

  6. ural1028 Stars

    Stars Time limit: 0.25 secondMemory limit: 64 MB Astronomers often examine star maps where stars are ...

  7. 水熊虫 - Nature Communication

    想发好文章?先看好文献! 生物信息分析类的文章都有着比较明显的套路,如果你深刻的掌握了这些套路,相信有一天你也能发Nature(子刊). Extremotolerant tardigrade geno ...

  8. WebRequest调用

    WebRequest支持不同的浏览器对象,可以在底层使用不同的XMLHttpRquest方式调用Web服务. Time.aspx <%@ Page Language="C#" ...

  9. iOS8学习笔记2--autolayout

    iOS支持的设备如今已经具有了很多的尺寸,针对这些不同的尺寸每一个都做一个独立的APP肯定是不现实的,于是苹果在iOS8之后推出了autolayout和sizeclass,同时还有VFL界面设计语言 ...

  10. IOS第三方数据库--FMDB

    iOS中原生的SQLite API在使用上相当不友好,在使用时,非常不便.于是,就出现了一系列将SQLite API进行封装的库,例如FMDB.PlausibleDatabase.sqlitepers ...