JavaScript設(shè)計模式-原型模式

canopus4u 發(fā)布于2019-08-23 12:12 / 3126人閱讀

摘要：原型模式就是將可復用的，可共享的耗時大的從父類中提出來，然后放在其原型中，然后通過組合繼承或者寄生組合式繼承將方法和屬性繼承下來，對于子類中那些需要重寫的方法進行重寫，這樣子類創(chuàng)建的對象既有子類的屬性和方法，也共享了父類的原型方法。

原型模式

原型模式：用原型實例指向創(chuàng)建對象的類，使用于創(chuàng)建新的對象的類共享原型對象的屬性以及方法。
父類總是要被子類繼承的，如果將屬性和方法都寫在父類的構(gòu)造函數(shù)里會有一些問題，比如每次子類繼承都要創(chuàng)建一次父類，假如父類的構(gòu)造函數(shù)中創(chuàng)建時存在很多耗時的邏輯，或者每次初始化都要做一些重復性的東西，這樣性能消耗還是蠻大的。為了提高性能，我們需要一種共享機制。原型模式就是將可復用的，可共享的、耗時大的從父類中提出來，然后放在其原型中，然后通過組合繼承或者寄生組合式繼承將方法和屬性繼承下來，對于子類中那些需要重寫的方法進行重寫，這樣子類創(chuàng)建的對象既有子類的屬性和方法，也共享了父類的原型方法。
以圖片輪播為例：

//圖片輪播
var LoopImages = function (imgArr,container) {
    this.imageArray = imgArr;//輪播圖片數(shù)組
    this.container = container;//輪播圖片容器
}
LoopImages.prototype = {
    //創(chuàng)建輪播圖片
    createImage : function () {
        console.log("LoopImages createImage function");
    },
    //切換下一張圖片
    changeImage:function () {
        console.log("LoopImages changeImage function");
    }
}
//上下滑動切換類
var SlideLooImg = function (imgArr,container) {
    //構(gòu)造函數(shù)繼承圖片輪播類
    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