原型模式

/**
 * 创建一个焦点图
 */
// 图片轮播类
var LoopImages = function (imgArr, container) {
  this.imagesArray = imgArr; // 轮播图片数组
  this.container = container; // 轮播图片容器
  this.createImage = function () {}; // 创建轮播图片
  this.changeImage = function () {}; // 切换下一张图片
};

/*
  如果一个页面中有多个这类焦点图，器切换动画一般是多样化的，有的可能上下切换，有的可能左右切换，有的可能渐隐切换，有的可能缩放切换等等，因此我们应该抽象一个基类，让不同特效去继承这个基类，然后对于差异化的需求通过重写这些继承下来的属性或者方法来解决。
*/

/**
 * 比如有的包含一个左右切换箭头，
 */
// 上下滑动切换类
var SlideLoopImg = function (imgArr, container) {
  // 构造函数继承图片轮播类
  LoopImages.call(this, imgArr, container);
  // 重写继承的切换下一张图片方法
  this.changeImage = function () {
    console.log("SlideLoopImg changeImage function");
  };
};
// 渐隐切换类
var FadeLoopImg = function (imgArr, container, arrow) {
  LoopImages.call(this, imgArr, container);
  // 切换箭头的私有变量
  this.arrow = arrow;
  this.changeImage = function () {
    console.log("FadeLoopImg changeImage function");
  };
};

/**
 * 创建一个显隐轮播图片测试实例
 */
var fadeImg = new FadeLoopImg(
  ["01.jpg", "02.jpg", "03.jpg", "04.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 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) {
  // 构造函数继承图片轮播类
  LoopImages.call(this, imgArr, container);
  // 切换箭头私有变量
  this.arrow = arrow;
};
FadeLoopImg.prototype = new LoopImages();
FadeLoopImg.prototype.changeImage = function () {
  console.log("FadeLoopImg changeImage function");
};

// 测试用例
var fadeImg = new FadeLoopImg(
  ["01.jpg", "02.jpg", "03.jpg", "04.jpg"],
  "slide",
  ["left.jpg", "right.jpg"]
);
console.log(fadeImg.container); // slide
fadeImg.changeImage(); // FadeLoopImg changeImage function

/**
 * 原型的拓展
 */
LoopImages.prototype.getImageLength = function () {
  return this.imagesArray.length;
};
LoopImages.prototype.getContainer = function () {
  return this.container;
};
console.log(fadeImg.getImageLength()); // 4
console.logZ(fadeImg.getContainer()); // slide

/**
 * 原型继承
 * 复制对象
 */
function prototypeExtend() {
  var F = function () {},
    args = arguments,
    i = 0,
    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("奔跑速度 " + this.speed);
    },
  },
  {
    jump: function () {
      console.log("跳跃动作");
    },
  }
);

penguin.swim();
penguin.run(10);
penguin.jump();