【D1n910】第7章《JavaScript 设计模式》(2[7/8]/6)
正常操作，正常分析，大家好，我是D1n910。
今天继续来学习 《JavaScript 设计模式》的第二篇 创建型设计模式 的 剩余两个章节。
这是一个连续的读书笔记，所以如果你之前的内容没有看的话，可以去看看。
这里再次感谢 《Javascript 设计模式》及其作者 张荣铭，专栏内容是在它的基础上生成的。
第二篇 创建型设计模式
创建型设计模式是一类处理对象创建的设计模式。
通过某种方式控制对象的创建来避免基本对象创建时可能导致设计上的问题或增加设计上的复杂度。
第 7 章 语言之魂——原型模式
7.1、语言中的原型（P55）
原型模式（Prototype）：用原型实例指向创建对象的类，使用于创建新的对象共享原型对象的属性以及方法。
在 Javascript 中继承是靠原型链实现的，这样也能够实现类似的模式。
所以其实下面的内容，我们在第二章节的时候就提到过了，现在相当于老调重弹，复习一波。
7.2、创建一个焦点图（P55）
// 创建一个图片轮播父类
var LoopImages = function(imgArr, container) {
this.imagesArray = imgArr; // 轮播图片数组
this.container = container; // 轮播图片容器
this.createImage = function() {} // 创建轮播图片
this.changeImage = function() {} // 切换下一张图片
}
// 上下滑动切换类
var SlideLoopImg = function (imgArr, container) {
// 构造函数继承图片播放类
LoopImages.call(this, imgArr, container);
// 重写继承的切换下一张图片方法
this.changeImage = function() {
console.log('上下滑动切换类')
}
}
// 渐隐切换类
var FadeLoopImg = function (imgArr, container) {
// 构造函数继承图片播放类
LoopImages.call(this, imgArr, container);
// 重写继承的切换下一张图片方法
this.changeImage = function() {
console.log('渐隐切换类')
}
}
测试了一下，使用正常。
7.3、最优的解决方案（P56）
上面这种方式，有一个老毛病了，就是我们希望我们的类一些属性方法可以从构造函数中抽离出去，放到原型里，这样可以有共用的效果，也可以不用重新实例化一些属性方法。
咱们马上可以想到这么改
// 创建一个图片轮播父类
var LoopImages = function(imgArr, container) {
this.imagesArray = imgArr; // 轮播图片数组
this.container = container; // 轮播图片容器
}
LoopImages.prototype = {
createImage: function() {}, // 创建轮播图片
changeImage: function() {} // 切换下一张图片
}
// 上下滑动切换类
var SlideLoopImg = function (imgArr, container) {
// 构造函数继承图片播放类
LoopImages.call(this, imgArr, container);
}
SlideLoopImg.prototype = new LoopImages();
SlideLoopImg.prototype.changeImage = function() {
console.log('上下滑动切换类')
}
// 渐隐切换类
var FadeLoopImg = function (imgArr, container) {
// 构造函数继承图片播放类
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()实现，这里就不累述了。
End
蛋糕于2021/02/16在福永
