Javascript OOP new object -

Javascript OOP new object -

**** edit ***** using reply bellow have created new function , set object it's prototype.

var myslider = new slider(); myslider.init({.......})

but when seek phone call function within function (this.animate) on slider.prototype

"uncaught typeerror: cannot read property '0' of undefined"

cant seem work out how phone call other functions work, i've amended code bellow new code

*****/ edit *****

i've tried create own slider using dojo.

i have html page content , @ end of page have script start slider

dojo.ready(function () { var myslider = new slider(); myslider.init({ frameid: "#sliderframe", slideclass: ".slide", sliderimgclass: ".sliderimage", captionclass: ".caption", thumbsclass: ".thumb", seconds: 1 }); });

then on external js file have code

function slider() {} slider.prototype = { //initialize 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 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 end , 0 loopslides: function () { if (this.playing < this.numofslides - 1) { this.playing++; this.animate(this.playing); } else { this.playing = 0; this.animate(this.playing); } }, //the animation makes changes css active slide 'e' || this.playing animate: function (e) { (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 self , need be, i'm sure create better.

what i'd have myslider set "new" or "object.create". can have multiple sliders on 1 page each becoming own object.

i can't script run 1 time implement "new" or "object.create" slider needs function not object! :(

cn point me pattern utilize implement i'm trying do. i've gone through "essential js design patterns" can't seem find pattern fits.

thanks in advance :)

without object.create()--just can understand instances--you do:

class="snippet-code-js lang-js prettyprint-override">function slider() {}; slider.prototype = { init: function() {...} // ... }; var myslider = new slider(); myslider.init(...);

then within functions sure utilize "this.whatever" instead of "slider.whatever".

this same effect using object.create().

javascript oop inheritance dojo