zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    jquery验证手机号码和固定电话号码
    window下安装mongodb及php mongo扩展
    Html form 表单提交前验证
    验证电话号码中间四位加※
    php方法 隐藏手机号中间四位
    win7 64位安装redis 及Redis Desktop Manager使用
    Redis系列-远程连接redis并给redis加锁
    使用密码记录工具keepass来保存密码
    【消息队列MQ】各类MQ比较
    Syslog-ng
  • 原文地址:https://www.cnblogs.com/koleyang/p/4939552.html
Copyright © 2011-2022 走看看