7.第二篇：第7章 原型模式

本文摘自 《JavaScript 设计模式》张容铭 著 版权归原作者所有

// 图片轮播类
var LoopImages = function(imgArr,container){
  this.imageArray = imgArr; // 轮播图片数组
  this.container = container; // 轮播图片容器
}

LoopImages.prototype = {
  // 创建轮播图片
  createImage : function(){
    console.log('LoopImages createImage function');
  },
  // 切换下一张图片
  changeImage : function(){
    console.log('LoopImages changeImage function')
  }
}

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

// 渐隐切换类
var FadeLoopImg = function(imgArr,container,arrow){
  LoopImage.call(this,imgArr,container);
  // 切换箭头私有变量
  this.arrow = arrow;
}
FadeLoopImg.prototype = new LoopImages();
FadeLoopImg.prototype.changeImage = function(){
  console.log('FadeLoopImg changeImage function')
}
// 测试用例
console.log(fadeImg.container); // slide
fadeImg.changeImage(); // FadeLoopImg changeImage function

原型的拓展

LoopImages.prototype.getImageLength = function(){
  return this.imageArray.length;
}
FadeLoopImages.prototype.getContainer = function(){
  return this.container;
}

console.log(fadeImg.getImageLength()) // 4

原型继承

/**
* 基于已经存在的模板对象克隆出新对象的牧师
* arguments[0],arguments[1],arguments[2]:参数1，参数2，参数3 表示模板对象
* 注意：这里对模板引用类型的属性实质上进行了浅拷贝（引用类型属性共享），根据需求可以自行深拷贝
**/
function prototypeExtend(){
  var F = function(){}, // 缓存类，为实例化返回对象临时创建
    args = arguments,
    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('跳跃动作')
  }
})
penguin.swim(); // 游泳速度20
penguin.run(10); // 奔跑速度10
penguin.jump(); // 跳跃动作