开发者

Defining a recursive function in a Prototype class?

开发者 https://www.devze.com 2022-12-27 15:27 出处:网络
I\'m trying to create an image开发者_JAVA技巧 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 declara

I'm trying to create an image开发者_JAVA技巧 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:

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.


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号