Javascript OOP new object

Question

**** EDIT ***** using the answer bellow I have created a new function and put my object into it's prototype.

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

but now when I try to call another function from within a function (this.animate) on my Slider.prototype all I get is

"Uncaught TypeError: Cannot read property '0' of undefined"

cant seem to work out how to call get other functions to work, I've amended my code bellow with my new code

*****/ EDIT *****

I've tried to create my own slider using dojo.

I have an HTML page with the content and at the end of the page I have a script to start my slider

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

then on my external js file I have my code

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";
}

};

The object works fine by it self and everything does as need be, I'm sure I could make it better.

What I'd like to do is have the mySlider set up with a "new" or "Object.create". This is so I can have multiple Sliders on one page each becoming their own object.

I just can't get my script to run once I implement "new" or "Object.create" as my Slider needs to be a function not an object! :(

Cn anyone point me to a good pattern that I could use to implement what I'm trying to do. I've gone through "essential js design patterns" but can't seem to find a pattern that fits.

Thanks in advance :)

Answer 1

oop in javascript is ugly. (at least until ES6 which supports the class and implements keywords) but even ES6 will not support multiple inheritance. I wrote a small class library (available on github) for javascript that makes creating classes and inheritance much easier to both develop and maintain. for example to create a class just do this:

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

Answer 2

Without Object.create()--just so you can understand instances--you would do:

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

Then inside the functions just be sure to use "this.whatever" instead of "Slider.whatever".

This is essentially the same effect as using Object.create().