Question

I’m trying to create an image rotator class that cycles through an arbitrary number of images in an unordered list. Is it possible to define a recursive function within a class declaration? E.g:

var Rotator = Class.create() {
 initialize: function() {
  do something...

  this.rotate();
 }

 rotate: function() {
   do something...

   this.rotate()
 }
}

It currently throws an error stating “this.rotate() is not a function”

Answer 1

Answer:

What you have there should work (except for a couple of what I think are typos; below), because you’re accessing the function from the property. Note that that means you’ll re-enter the top-most (most sub-classed) rotate function if you’re using inheritance, because that’s the one that’s assigned to the instance rotate property.

You said that it’s saying that this.rotate is not a function. How are you calling it? Because if you’re doing something like this:

var r = new Rotator();
setInterval(r.rotate, 1000);

or (within rotate):

setInterval(this.rotate, 1000);

…that’s not going to work, because you’re just passing the function (not its context) to setInterval. This would work:

var r = new Rotator();
setInterval(r.rotate.bind(r), 1000);

or (within rotate):

setInterval(this.rotate.bind(this), 1000);

That uses Function#bind to create a function that will set the correct context. More about functions vs. methods in Javascript in this post.

Typos:

var Rotator = Class.create() {
...
}

should be

var Rotator = Class.create({
...
});

You also need a comma between the two functions in the object literal notation you’re using. So with those cleaned up it’s:

var Rotator = Class.create({ // <= open brace *within* the parens

    initialize: function() {
        // do something...

        this.rotate();
    },                       // <= missing comma was here

    rotate: function() {
        // do something...

        this.rotate();
    }

    return pubs;
});                          // <= close the braces and parens here

Named functions (and typo-avoidance, and private functions):

FWIW, you can avoid typos like leaving out the comma between functions and also get all the benefits of your functions having real names (as opposed to being anonymous functions bound to properties) plus getting private class-wide functions (if that’s useful to you). This is the idiom I mostly use (although I use a helper to make the syntax a small bit cleaner; the below is raw Prototype):

var Rotator = Class.create((function(){
    var pubs = {};

    pubs.initialize = initialize;
    function initialize() {
        // do something...

        this.rotate();
    }

    pubs.rotate = rotate;
    function rotate() {
        // do something...

        this.rotate();
    }

    return pubs;
})());

More on that idiom (and why you can’t combine the pubs and function links above) in the linked post.