js設計模式語言之魂——原型模式

原型模式:用原型實例指向創建對象的類,使用於創建新的對象的類共享原型對象的屬性以及方法。

基於原型鏈實現對象之間的繼承,這種繼承是基於一種對方法或屬性的共享,而不是對方法和屬性的複製。

原型模式就是將可複用的、可共享的、耗時大的從基類中提出來然後放在其原型中,然後子類通過組合繼承或者寄生組合式繼承而將方法和屬性繼承下來,對於子類中那些需要重寫的方法進行重寫,這樣子類創建的對象既具有子類的屬性和方法也共享了基類的原型方法。

//圖片輪播
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

請大神多多指點。qq:274501366

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章