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

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

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

原型模式

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

//圖片輪播
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");
    }
}
//上下滑動(dòng)切換類
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");
}
//實(shí)例化一個(gè)漸隱切換圖片類
var fadeImg = new FadeLoopImg(["01.img","02.img","03.img"],"slide",["left.jpg","right.jpg"]);
//測(cè)試用例
console.log(fadeImg.container);//slide
fadeImg.changeImage();//FadeLoogImg changeImage function

原型的拓展

原型對(duì)象是一個(gè)共享的對(duì)象，無論是父類的實(shí)例對(duì)象還是子類的繼承，都是對(duì)它的一個(gè)指向引用，所以原型對(duì)象才會(huì)被共享。在任何時(shí)候，都可以對(duì)基類或者子類進(jìn)行方法的拓展，并且所有被實(shí)例化的對(duì)象或者類都能獲取這些方法。
如下：

//原型的拓展
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