javascript - Defining a recursive function in a Prototype class? - Stack Overflow

admin管理员组

文章数量:1415653

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"

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"

• javascript
• prototypejs

Share Improve this question Follow edited Dec 29, 2011 at 16:48 Rob W 349k8787 gold badges807807 silver badges682682 bronze badges asked Apr 19, 2010 at 15:28 user320487user320487 3

• Try it. It looks like it should work fine to me. – Justin Niessner Commented Apr 19, 2010 at 15:30
• 1 That should work, but you want a condition when the recusive method should return. – elias Commented Apr 19, 2010 at 15:31
• 1 @btl: We've all been so focussed on your saying you wanted to create a recursive function that we ignored the first sentence of your post. My suspicion is that you don't want a recursive function at all, and the problem you're having is how you're calling it. Updated my answer in case that's it. – T.J. Crowder Commented Apr 19, 2010 at 15:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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 ma 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 ma 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 ma 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 bine the pubs and function links above) in the linked post.

Yes, it's possible, so long as you're confident that "this" will be the right thing. There are other ways to do it, but they have unfortunate disadvantages. You can give the function a name (ie, after the function keyword), but that can cause problems in IE. You can also refer to a function via arguments.callee, but I've learned that that has bizarre performance problems, plus the whole arguments thing is kind-of deprecated because it's weird.

本文标签： javascriptDefining a recursive function in a Prototype classStack Overflow