设计模式知识连载（17）---原型模式:

本文链接：https://blog.csdn.net/yuzhiboyouzhu/article/details/78797003
<body>

<h3>设计模式知识连载（17）---原型模式:</h3>
<p>
    原型模式：用原型实例指向创建对象的类，
    使用于创建新的对象的类共享原型对象的属性以及方法
    【本质上也是一种继承，也是一种创建型模式】
</p>

<script type="text/javascript">


    /**
    *   案例，方式一：初始
    */
    // // 图片轮播类
    // var LoopImage = function (imgArr, container) {

    //  // 轮播图片数组
    //  this.imagesArray = imgArr ;

    //  // 轮播图片容器
    //  this.container = container ;

    //  // 创建轮播图片
    //  this.createImage = function() {
    //      console.log('执行了图片轮播类LoopImages的方法createImage') ;
    //  } ;

    //  // 切换下一张图片
    //  this.changeImage = function() {
    //      console.log('执行了图片轮播类LoopImages的方法changeImage') ;
    //  } ;

    // } ;

    // // 上下滑动切换类
    // var SlideLoopImg = function(imgArr, container) {

    //  // 构造函数继承图片轮播类
    //  LoopImage.call(this, imgArr, container) ;

    //  // 重写继承的切换下一张图片方法
    //  this.changeImage = function() {
    //      console.log('执行了上下滑动切换类SlideLoopImg的方法changeImage') ;
    //  } ;
    // } ;

    // // 渐隐切换类
    // var FadeLoopImg = function(imgArr, container, arrow) {
    //  LoopImage.call(this, imgArr, container) ;

    //  // 切换箭头私有变量
    //  this.arrow = arrow ;

    //  this.changeImage = function() {
    //      console.log('执行了渐隐切换类FadeLoopImg的方法changeImage') ;
    //  } ;
    // } ;

    // // 实例化一个渐隐切换图片类
    // var fadeImg = new FadeLoopImg([
    //  '01.jpg', 
    //  '02.jpg', 
    //  '03.jpg', 
    //  '04.jpg', 
    //  '05.jpg', 
    //  '06.jpg'], 'slide', [
    //  'left.jpg', 
    //  'right.jpg'
    //  ]) ;

    // fadeImg.changeImage() ;


    /**
    *   案例，方式二：加以优化
    */
    // // 图片轮播类
    // var LoopImages = function(imgArr, container) {
    //  // 轮播图片数组
    //  this.imagesArray = imgArr ;

    //  // 轮播图片容器
    //  this.container = container ;
    // } ;
    // LoopImages.prototype = {
    //  // 创建轮播图片
    //  createImage : function() {
    //      console.log('执行了图片轮播类类LoopImages的方法createImage') ;

    //  },
    //  // 切换下一张图片
    //  changeImage : function() {
    //      console.log('执行了图片轮播类类LoopImages的方法changeImage') ;
    //  }
    // } ;

    // // 上下滑动切换类
    // var SlideLoopImg = function(imgArr, container) {
    //  // 构造函数继承图片轮播类
    //  LoopImages.call(this, imgArr, container) ;
    // } ;
    // SlideLoopImg.prototype = new LoopImages() ;
    // // 重写继承的切换下一张图片方法
    // SlideLoopImg.prototype.changeImage = function() {
    //  console.log('执行了上下滑动切换类SlideLoopImg的方法changeImage') ;
    // } ;

    // // 渐隐式切换类
    // 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的方法changeImage') ;
    // } ;

    // //测试用例
    // var fadeImg = new FadeLoopImg([
    //  '01.jpg', 
    //  '02.jpg', 
    //  '03.jpg', 
    //  '04.jpg', 
    //  '05.jpg', 
    //  '06.jpg'], 'slide', [
    //  'left.jpg', 
    //  'right.jpg'
    //  ]) ;

    // fadeImg.createImage() ;
    // fadeImg.changeImage() ;


    /**
    *   案例，方式三：原型的拓展
    */
    // 图片轮播类
    var LoopImages = function(imgArr, container) {
        this.imagesArray = imgArr ;
        this.container = container ;
    } ;
    LoopImages.prototype = {
        createImage : function() {
            console.log('执行了图片轮播类类LoopImages的方法createImage') ;
        },
        changeImage : function() {
            console.log('执行了图片轮播类类LoopImages的方法changeImage') ;
        }
    } ;

    // 上下滑动切换类
    var SlideLoopImg = function(imgArr, container) {
        LoopImages.call(this, imgArr, container) ;
    } ;
    SlideLoopImg.prototype = new LoopImages() ;
    SlideLoopImg.prototype.changeImage = function() {
        console.log('执行了上下滑动切换类SlideLoopImg的方法changeImage') ;
    };
    // 渐隐式切换类
    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的方法changeImage') ;
    } ;

    //测试用例
    var fadeImg = new FadeLoopImg([
        '01.jpg', 
        '02.jpg', 
        '03.jpg', 
        '04.jpg', 
        '05.jpg', 
        '06.jpg'], 'fade', [
        'left.jpg', 
        'right.jpg'
        ]) ;
    console.log('原型的拓展-----------------------------------') ;
    console.log('fadeImg：', fadeImg) ;
    fadeImg.createImage() ;
    fadeImg.changeImage() ;

    // 拓展
    LoopImages.prototype.getImageLength = function() {
        return this.imagesArray.length ;
    } ;
    FadeLoopImg.prototype.getContainer = function() {
        return this.container ;
    } ;
    console.log('拓展后的数据为：') ;
    console.log(fadeImg.getImageLength()) ; 
    console.log(fadeImg.getContainer()) ; 


    /**
    *   案例，方式四：原型的继承
    */

    /*****
    *   基于已经存在的模板对象克隆出新对象的模式
    *   arguments[0], arguments[1], arguments[2]：参数1，参数2，参数3表示模板对象
    *   注意：这里对模板引用类型的属性实质上进行了浅复制（引用类型属性共享），当然根据
    *   需求可以自行深复制（引用类型属性复制）
    *****/
    function prototypeExtend() {

        // 缓存类，为实例化返回对象临时创建
        var F = function(){} ;

        // 模板对象参数序列
        var args = arguments ;

        var i = 0 ;
        var len = args.length ;

        for(;i < len; i++) {

            // 遍历每个模板对象中的属性
            for(var j in args[i]){
                // 将这些属性复制到缓存类原型中
                F.prototype[j] = args[i][j] ;
            }
        } ;

        // 返回缓存类的一个实例
        return new F() ;
    } ;

    var penguin = prototypeExtend({
        speed : 20,
        swim : function(){
            console.log('游泳速度：', this.speed) ;
        }
    },{
        run : function(speed) {
            console.log('奔跑速度：', speed) ;
        }
    },{
        jump : function(){
            console.log('跳起来了') ;
        }
    }) ;

    // 测试用例:
    console.log('原型的继承-----------------------------------') ;
    // 无需再用new去创建新的实例对象，可以直接使用这个对象
    penguin.swim() ;
    penguin.run(10) ;
    penguin.jump() ;
</script>

</body>