原型模式 -- JavaScript语言的灵魂

Posted 2021-02-09 佳琪欧尼

原型模式就是将原型对象指向创建对象的类，使这些类共享原型对象的方法与属性。JS是基于原型链实现对象之间的继承，是对属性或者方法的共享，而不是对属性和方法的复制。

 

    // 图片轮播类
    var LoopImages = function (imgArr, container) {
        this.imagesArray = imgArr;
        this.container = container;
    }
    LoopImages.prototype = {
        // 创建轮播图片
        createImage:function () {
            console.log(‘LoopImages createImage function‘);
        },
        // 切换下一张图片
        changeImage:function () {
            console.log(‘LoopImages changeImage function‘);
        }
    }
    // 上下滑动切换类
    var SlideLoopImg = function (imgArr, container) {
        // 构造函数继承图片轮播类
        LoopImages.call(this,imgArr,container);
    }
    SlideLoopImg.prototype = new LoopImages();
    // 重写继承的切换下一张图片方法
    SlideLoopImg.prototype.changeImage = function () {
        console.log(‘SlideLoopImg changeImage 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(‘FadeLoopImg changeImage function‘)
    }
    // 测试用例
    console.log(fageImg.container); //slide
    fadeImg.changeImg(); //FadeLoopImg changeImage function