9、原型模式

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

 

7.1创建一个焦点图

　要实现这些焦点图最好的方式就是通过创建对象来一一实现，所以我们需要一个焦点图类

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

 

如果一个页面有多个这类焦点图，其切换动画一般是多样化的，有的可能是上下切换，有的可能是左右切花，渐隐切换，缩放切换。。。，因此创建的轮播图片结构应该是多样化的，同样切换的效果也是多样化的，因此我们要抽象出一个基类，让不同的特效去继承这个基类，差异化通过重写这些继承下来的属性或者方法来解决。不同的子类之间可能存在不同的结构样式。

 

//上下滑动切花类
var SlideLoopImg = function(imgArr, container){
    //构造函数继承图片轮播类
    LoopImages.call(this, imgArr, container);
    //重写继承的切换下一张图片方法
    this.changeImage = (){
        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([
    'img01.jpg',
    'img02.jpg',
    'img03.jpg'
],'slide',['left.jpg','right.jpg']);

fadeImg.changeImage();

 

7.2最优的解决方案

　当你想到根据不同展示，来继承基类，并重写方法说明你掌握部分知识，但还不够。存在一些问题，首先看下LoopImage,作为基类要被子类继承，那么将属性和方法都写在基类的构造函数里边会有一些问题，比如每次子类继承都要创建一次父类，每次初始化都做一些重复性的东西，这样性能消耗较长的逻辑及性能，为了避免不必要的消耗，可以采用原型链。　

//图片轮播类
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 = {
    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 = {
    console.log('FadeLoopImg changeImage function');
}

测试用例

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

 

7.3原型的拓展

原型还有一个特点，原型对象是一个共享的对象，那么无论是父类的实例对象或是子类的继承都是对它的一个指向引用，所以原型对象才回被共享。既然被共享，那么对原型对象的拓展，无论是子类或者父类的实例对象都会继承下来。

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

FadeLoopImg.prototype.getContainer = function(){
    return this.container;
}

这一点要注意，由于这种方式太自由，不要随意去做，否则修改类的其它属性或者方法都有可能会影响到其他人。

 

7.4原型继承

不过原型模式更多的是用在创建对象的创建上。比如创建一个实例对象的构造函数比较复杂，或者耗时比较长，或者创建多个对象来实现，此时最好不用使用new关键字复制这些类，但可以通过对这些对象属性或者方法进行复制来实现创建。

function prototypeExtend(){
    var F = function(){},    //缓存类，为实例化返回对象临时创建
    args = arguments,        //模版对象参数序列
    i = 0,
    len = arg.length;
    for(; i < len; i++){
        //遍历每个模版对象中的属性
        for(var j in args[i]){
            //将这些属性复制到缓存类原型中
            F.prototype[j] = args[i][j];
        }
    }
    //返回缓存类的一个实例
    return new F();
}

 

可以这样使用

var pg = prototypeExtend({
    spend : 20,
    swim : function(){
        console.log('swin' + this.spend);
    }
},{
    run : function(speed){
        console.log('run' + speed);
    }
})

 

我们不需要在用new 去创建新的实例对象，

pg.swin();
pg.run(10)