《JS设计模式》笔记-原型模式

原型模式:用原型实例指向创建对象的类,使用于创建新的对象的类 共享原型对象的属性及方法

通俗讲,利用原型继承的引用关系,为创建的类添加共享属性和方法,同时减少性能开销

原型模式就是将可复用的/可共享的/耗时大的方法或属性,从基类中提取出来放到原型中,然后子类通过 组合继承或者寄生组合式继承而将方法和属性继承下来

示例如下

 // 图片轮播
var LoopImages = function (imgArr, container) {
    this.imagesArray = imgArr
    this.container = container
}
LoopImages.prototype = {
    createImage: function () {
        console.log('创建图片')
    },
    changeImage: function () {
        console.log('切换图片')
    }
}
// 图片上下滑动类
var SlideLoogImg = function (imgArr, container) {
    LoopImages.call(this, imgArr, container)
}
SlideLoogImg.prototype = new LoopImages()
SlideLoogImg.prototype.changeImage = function () {
    console.log('重写后的切换图片')
}

//  图片渐变切换类
var FadeLoopImg = function (imgArr, container, arrow) {
    LoopImages.call(this, imgArr, container)
    this.arrow = arrow
}
FadeLoopImg.prototype = new LoopImages()
console.log(FadeLoopImg.prototype);

var fadeImg = new FadeLoopImg(
    [
        '0.1.jpg',
        '0.2.jpg'
    ],
    '#id',
    [
        'left.jpg',
        'right.jpg'
    ]
)
console.log(fadeImg.container)
fadeImg.changeImage()

这个示例感觉是有一个问题的,就是prototype = new LoopImages(),创建方法的引用时,对构造函数的属性同样添加在了原型对象上。 当然,这样应该也是为了传参数方便。

原型继承

目的:节省性能。

看到这个方法,第一反应就是,一脸懵逼,折腾半天弄个浅拷贝,图什么呢???

后来想想才明白,这样是为了把属性和方法都放在原型对象上。为了节省空间。

function prototypeExtend() {
    var F = function () {},
        args = arguments,
        i = 0,
        len = args.length
    for(; i < len; i++) {
        for(var j in args[i]) {
            F.prototype[j] = args[i][j]
        }
    }
    return new F()
}

var penguin = prototypeExtend({
    speed: 20,
    swim: function () {
        console.log('游泳')
    }
}, {
    run: function () {
        console.log('跑跑跑')
    }
})

penguin.swim()

随机浏览