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 SlideLooImg = function (imgArr,container) {
    //構造函數繼承圖片輪播類
    LoopImages.call(this,imgArr,container);
}
SlideLooImg.prototype = new LoopImages();
//重寫繼承的切換下一張圖片方法
SlideLooImg.prototype.changeImage = function () {
    console.log('SlideLoopImg changeImg 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('FadeLoogImg changeImage function');
}
//實例化一個漸隱切換圖片類
var fadeImg = new FadeLoopImg(['01.img','02.img','03.img'],'slide',['left.jpg','right.jpg']);
//測試用例
console.log(fadeImg.container);//slide
fadeImg.changeImage();//FadeLoogImg changeImage function

原型的拓展

原型對象是一個共享的對象，不管是父類的實例對象仍是子類的繼承，都是對它的一個指向引用，因此原型對象纔會被共享。在任什麼時候候，均可以對基類或者子類進行方法的拓展，而且全部被實例化的對象或者類都能獲取這些方法。
以下：

//原型的拓展
LoopImages.prototype.getImageLength = function () {
    return this.imageArray.length;
}
FadeLoopImg.prototype.getContainer = function () {
    return this.container;
}
console.log(fadeImg.getImageLength());//3
console.log(fadeImg.getContainer());//slide