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>

  • 相关阅读:
    EXTJS 动态改变Gird 列值
    EXTJS动态改变store的proxy的params
    获取Spring容器Bean
    EXTJS 6 必填项加星号*
    Maven打包附加配置文件
    MyEclipse 优化
    Android-SurfaceView生命周期
    Android-PopupWindow
    Android-Sqlite3的使用
    Android-adb的使用
  • 原文地址:https://www.cnblogs.com/koleyang/p/4939552.html
Copyright © 2011-2022 走看看