原型模式.md

JavaScript设计模式之原型模式

学习一个东西，一定要明白这个东西的概念是什么，这个东西被提出来的目的是什么

概念

原型模式：用原型实例指向创建对象的类，适用于创建新的对象的类共享原型对象的属性和方法。

这种继承是一种基于对属性和方法的共享而不是复制。

应用场景

在创建的类中，存在基类，起定义的方法和属性能够被子类所继承和使用。

原型模式就是将可复用的、可共享的、消耗大的从基类中提取出来然后放到原型中，然后子类通过组合继承或者寄生组合式继承将方法和属性继承下来。子类中对于那些需要重写的方法进行重写，这样，子类 创建的对象既有子类的属性和方法也共享着基类的属性和方法。

代码演示

拿网页中轮播图距离。大概的样子就是轮播图，但是有的是渐变效果，有的是滚动，有的带有箭头。。。所以这里我们可以创建一个基类，轮播图，然后再根据不同的需求再去修改。

//图片轮播图类
var LoopImages =  function(imgArr,container) {
  this.imageArr = imgArr;//轮播图片数组
  this.container = container;//轮播图片容器
  this.createImage = function() {
    
  };//创建轮播图
  this.changeImage = function() {
    
  }//轮播图切换
}
//上下切换
var SlideLoopImage = function(imgArr,container) {
    //构造函数继承图片轮播类
  LoopImages.call(this,imgArr,container);
  
  //重写继承的图片切换方法
  this.changeImage = function() {
    console.log('上下切换的方式')
  }
}
//渐隐切换
var FadeLoopImg =  function(imgArr,container,arrow) {
  LoopImages.call(this,imgArr,container);
    //切换箭头私有变量
    this.arrow = arrow;
  this.changeImage = function() {
    console.log('渐隐的切换方式');
  }
}

//实例化一个
var fadeImg = new FadeLoopImg(['01.jpg','02.jpg','03.jpg'],'slide',['left.jpg','right.jpg']);

但是如上的写法 ，其实还有一种更加优化的方法。首先看基类，作为基类是要被子类继承的，那么此时将属性和方法都写到基类的构造函数里会有一些问题。 比如每一次创建子类继承都要创建一次父类，如果父类的构造函数的创建过程中存在很多耗时较长的逻辑，这样的话性能消耗还是蛮大的。为了提高性能，我们可以使用共享机制。

对于每一次创建的一些简单而又差异化的属性我们可以放到构造函数中，而把一些消耗资源比较大的方法放到基类的原型中。这样避免很多不必要的消耗。

var LoopImages = function(imgArr,container) {
  this.imageArr = imgArr;
  this.container = container;
}
LoopImages.prototype = {
    crateImage : function() {
      console.log('创建轮播图方法');
    },
    changeImage:function() {
      console.log('图片切换方法');
    }
}
//上下切换
var SlideloopImg = function(imgArr,container) {
  LoopImages.call(this,imgArr,container);
}
SlideloopImg.prototype = new LoopImages();

SlideloopImg.prototype.changeImage = function() {
  console.log('上下切换的方式');
}

var FadeLoopImg = function(imgArr,container,arrow) {
  this.arrow = arrow;
  LoopImages.call(this,imgArr,container);
}
FadeLoopImg.prototype = new LoopImages();

FadeLoopImg.prototype.changeImage = function() {
  console.log('渐隐切换方式');
}