Javascript OOP新對象

Question

****編輯*****使用下面的答案，我創建了一個新函數並將我的對象放入它的原型中。

var mySlider = new Slider();
mySlider.init({.......})

但是現在當我嘗試從Slider.prototype的函數（this.animate）中調用另一個函數時，我得到的只是

“未捕獲的TypeError：無法讀取未定義的屬性'0'”

似乎無法弄清楚如何調用以使其他功能正常工作，我用新代碼修改了下面的代碼

***** /編輯*****

我嘗試使用dojo創建自己的滑塊。

我有一個包含內容的HTML頁面，並且在頁面末尾有一個腳本可以啟動我的滑塊

dojo.ready(function () {
var mySlider = new Slider();
    mySlider.init({
        frameId: "#sliderFrame",
        slideClass: ".slide",
        sliderImgClass: ".sliderImage",
        captionClass: ".caption",
        thumbsClass: ".thumb",
        seconds: 1
    });
});

然后在我的外部js文件上我有我的代碼

function Slider() {}

Slider.prototype = {
//Initialize all Elements
init: function (object) {
    this.sliderFrame = dojo.query(object.frameId);
    this.slideContainers = this.sliderFrame.query(".slide");
    this.slideImg = this.sliderFrame.query(object.sliderImgClass) || '';
    this.SlideCaption = this.sliderFrame.query(object.captionClass) || '';
    this.thumbs = this.sliderFrame.query(object.thumbsClass) || '';
    this.numOfSlides = this.slideImg.length || 0;
    this.hovering = false;
    this.time = object.seconds * 1000 || 3000;
    this.myInterval = '';
    this.playing = 0;
    this.start();
},
// Starts animation on slide 0
start: function () {
    this.animate(this.playing);
    this.initLoop(true);
    this.listener(this.thumbs, this.sliderFrame);
},

//EventListener for mouse events
listener: function (theThumb, theFrame) {
    theThumb.connect('onclick', this.clicked);
    theFrame.connect('mouseenter', this.mouseOn);
    theFrame.connect('mouseleave', this.mouseOff);
},
mouseOn: function () {
    this.initLoop(false);
},

mouseOff: function () {
    this.initLoop(true);
},

clicked: function (e) {
    this.playing = this.getAttribute("data-slide");
    this.animate(this.playing);
},


// start interval if true, otherwise clear
initLoop: function (act) {

    if (act === true) {
        this.myInterval = setInterval(this.loopSlides, this.time);
    } else {
        clearInterval(this.myInterval);
    }
},
// interval resets loops through to end and back to zero

loopSlides: function () {
    if (this.playing < this.numOfSlides - 1) {
        this.playing++;
        this.animate(this.playing);
    } else {
        this.playing = 0;
        this.animate(this.playing);
    }
},

//the animation which makes changes css to active slide 'e' || this.playing
animate: function (e) {

    for (var ii = 0; ii < this.numOfSlides; ii++) {
        this.slideContainers[ii].className = "slide";
        this.thumbs[ii].className = "thumb";
        this.slideImg[ii].className = "sliderImage";
        this.SlideCaption[ii].className = "caption";
    }
    this.slideContainers[e].className = "slide active";
    this.thumbs[e].className = "thumb active";
    this.slideImg[e].className = "sliderImage active";
    this.SlideCaption[e].className = "caption active";
}

};

該對象本身可以很好地工作，並且一切都可以根據需要進行，我敢肯定我可以做得更好。

我想要做的是將mySlider設置為“ new”或“ Object.create”。 這樣一來，我可以在一頁上放置多個Slider，每個都成為自己的對象。

一旦實現“ new”或“ Object.create”，我就無法運行腳本，因為我的Slider需要是一個函數而不是對象！ :(

Cn有人指出我有一個很好的模式，可以用來實現我想做的事情。 我經歷了“基本的js設計模式”，但似乎找不到合適的模式。

提前致謝 ：）

Answer 1

如果沒有Object.create（），那么您就可以做到：

 function Slider() {}; Slider.prototype = { init: function() {...} // ... }; var mySlider = new Slider(); mySlider.init(...); 

然后，在函數內部只需確保使用“ this.whatever”而不是“ Slider.whatever”。

這基本上與使用Object.create（）相同。

Answer 2

javascript中的oop很難看。 （至少在支持類並實現關鍵字的ES6之前），但即使是ES6也將不支持多重繼承。 我為javascript寫了一個小型的類庫（可在github上找到） ，使創建類和繼承更加容易進行開發和維護。 例如，創建一個類只需執行以下操作：

ds.make.class({
    type: 'a',
    constructor: function (x) { this.val = x; },
    mul: function (s) {
        this.val *= s;
        return this;
    }
});

// now to inherit class a just do this...
ds.make.class({
    type: 'b',
    inherits: a,              
    constructor: function (x) { this.val = x; },
    sub: function (s) {
        this.val -= s;
        return this;
    }
});
var o = new b(5);
var output = o.mul(3).sub(5).val;    // output = 10