1. 程式人生 > >js設計模式第七章 語言之魂——原型模式 讀書筆記

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