什么是原型模式

原型模式（Prototype）：用原型实例指向创建对象的类，使用于创建新的对象的类，共享原型对象的属性以及方法。

// 图片轮播类
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 imgArr = ['01.jpg', '02.jpg', '03.jpg'];
var container = 'slide';
var arrow = ['left.jpg', 'right.jpg'];
var fadeImg = new FadeLoopImg(imgArr, container, arrow);

console.log(fadeImg.container); // slide
fadeImg.changeImage(); // FadeLoopImg changeImage function

原型的拓展

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

console.log(fadeImg.getImageLength()); // 4
console.log(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('奔跑速度：' + speed);
  },
  jump: function() {
  	console.log('跳跃动作');
  },
})

penguin.swim(); // 游泳速度：20
penguin.run(10); // 奔跑速度：10
penguin.jump(); // 跳跃动作