【D1n910】第7章《JavaScript 設計模式》(2[7/8]/6)
正常操作，正常分析，大家好，我是D1n910。
今天繼續(xù)來學習 《JavaScript 設計模式》的第二篇 創(chuàng)建型設計模式 的 剩余兩個章節(jié)。
這是一個連續(xù)的讀書筆記，所以如果你之前的內(nèi)容沒有看的話，可以去看看。
這里再次感謝 《Javascript 設計模式》及其作者 張榮銘，專欄內(nèi)容是在它的基礎上生成的。
第二篇 創(chuàng)建型設計模式
創(chuàng)建型設計模式是一類處理對象創(chuàng)建的設計模式。
通過某種方式控制對象的創(chuàng)建來避免基本對象創(chuàng)建時可能導致設計上的問題或增加設計上的復雜度。
第 7 章 語言之魂——原型模式
7.1、語言中的原型（P55）
原型模式（Prototype）：用原型實例指向創(chuàng)建對象的類，使用于創(chuàng)建新的對象共享原型對象的屬性以及方法。
在 Javascript 中繼承是靠原型鏈實現(xiàn)的，這樣也能夠?qū)崿F(xiàn)類似的模式。
所以其實下面的內(nèi)容，我們在第二章節(jié)的時候就提到過了，現(xiàn)在相當于老調(diào)重彈，復習一波。
7.2、創(chuàng)建一個焦點圖（P55）
// 創(chuàng)建一個圖片輪播父類
var LoopImages = function(imgArr, container) {
this.imagesArray = imgArr; // 輪播圖片數(shù)組
this.container = container; // 輪播圖片容器
this.createImage = function() {} // 創(chuàng)建輪播圖片
this.changeImage = function() {} // 切換下一張圖片
}
// 上下滑動切換類
var SlideLoopImg = function (imgArr, container) {
// 構(gòu)造函數(shù)繼承圖片播放類
LoopImages.call(this, imgArr, container);
// 重寫繼承的切換下一張圖片方法
this.changeImage = function() {
console.log('上下滑動切換類')
}
}
// 漸隱切換類
var FadeLoopImg = function (imgArr, container) {
// 構(gòu)造函數(shù)繼承圖片播放類
LoopImages.call(this, imgArr, container);
// 重寫繼承的切換下一張圖片方法
this.changeImage = function() {
console.log('漸隱切換類')
}
}
測試了一下，使用正常。
7.3、最優(yōu)的解決方案（P56）
上面這種方式，有一個老毛病了，就是我們希望我們的類一些屬性方法可以從構(gòu)造函數(shù)中抽離出去，放到原型里，這樣可以有共用的效果，也可以不用重新實例化一些屬性方法。
咱們馬上可以想到這么改
// 創(chuàng)建一個圖片輪播父類
var LoopImages = function(imgArr, container) {
this.imagesArray = imgArr; // 輪播圖片數(shù)組
this.container = container; // 輪播圖片容器
}
LoopImages.prototype = {
createImage: function() {}, // 創(chuàng)建輪播圖片
changeImage: function() {} // 切換下一張圖片
}
// 上下滑動切換類
var SlideLoopImg = function (imgArr, container) {
// 構(gòu)造函數(shù)繼承圖片播放類
LoopImages.call(this, imgArr, container);
}
SlideLoopImg.prototype = new LoopImages();
SlideLoopImg.prototype.changeImage = function() {
console.log('上下滑動切換類')
}
// 漸隱切換類
var FadeLoopImg = function (imgArr, container) {
// 構(gòu)造函數(shù)繼承圖片播放類
LoopImages.call(this, imgArr, container);
}
FadeLoopImg.prototype = new LoopImages();
FadeLoopImg.prototype.changeImage = function() {
console.log('漸隱切換類')
}
這里我們就用了之前的組合繼承方法。當然，如果要更好的，可以用寄生組合繼承。
7.4、原型的拓展（P58）
因為上面的子類的 prototype 是共用的。所以單獨在子類的prototype 上添加屬性和方法，也會被其他的子類繼承到，這是子類的拓展。不過因為太自由了，所以盡量還是不要這么做。
FadeLoopImg.prototype.__proto__.c = 1
slideLoopImgObj.c // 1
7.5、原型繼承（P58）
這里說的是繼承多個對象的方法，因為第二章有講過，且可以用 Object.assign()實現(xiàn)，這里就不累述了。
End
蛋糕于2021/02/16在福永
