Using a JavaScript Function as a Class

[Jamin2112]

I figured out what the bug in my code is, but now I need to figure out how to best remedy it.

Here's my function:

        function snake(C, C_h, C_w)
        {
                /* NOTE TO SELF: C is a Raphel object. Can't find a method to return the height
                   and width of a Raphael object in the documentation: 
                   [PLAIN]http://raphaeljs.com/reference.html#Raphael.[/PLAIN] 
                   Using C_h and C_w for now, but should probably change it later.
                */
            
                this.linkSize = 10; // size of a snake unit, in pixels
                
                /* On instantiation, the snake direction is down and has 1 link */
                this.dy = this.linkSize;
                this.dx = 0;
                this.link = C.rect(C_h/2, C_w/2, this.linkSize, this.linkSize);
                this.link.attr("fill", "#d7a900");
                this.body = [this.link];
                
                /* Event listener for changing the direction of the
                   snake with arroy keys on the keyboard
                */
                this.redirect = function(dirnum)
                {
                    switch (dirnum)
                    {
                        /*
                            dirnum corresponds to
                            1 ---> right
                            2 ---> down
                            3 ---> left
                            4 ---> up
                        */
                        case 1: 
                            this.dx = this.linkSize;
                            this.dy = 0;
                            break;
                        
                        case 2:
                            this.dx = 0;
                            this.dy = this.linkSize;
                            break;
                        
                        case 3:
                            this.dx = -this.linkSize;
                            this.dy = 0;
                            break;
                        
                        case 4:
                            this.dx = -this.linkSize;
                            this.dy = 0;
                            break;
                        
                        default: // never happens
                            break;
                    }
                            
                }
[COLOR="Red"][B]                this.move = function()
                {
                    /*
                        ...
                    */
                    
                    var temp = this.body[0];
                    this.body[0].translate(this.dx, this.dy);
                    for (var i = 1, j = this.body.length; i < j; ++i)
                    {
                        this.body[i] = temp;
                        temp = this.body[i];
                    }
                }[/B][/COLOR]
                this.mover = setInterval(this.move, 500);                

        }

The problem is in the bolded block. I want to refer to the outer function's member body, but I realize it's instead referring to move's nonexistent member body. What is the best way to remedy this?

 

[DavidSnider]

Newer browsers have Function.prototype.bind

setInterval( this.move.bind(this), 500 );

 

[Jamin2112]

Newer browsers have Function.prototype.bind

setInterval( this.move.bind(this), 500 );

That's useful. Out of curiosity, how would I have done it without this feature?

 

[DavidSnider]

That's useful. Out of curiosity, how would I have done it without this feature?

The implementation looks something like this

Function.prototype.bind = function (scope) {
    var fn = this;
    return function () {
        return fn.apply(scope);
    };
}

This would have worked too

    var that = this;
    setInterval(function() {
        that.move();
    }, 500);

 

[LudusRex]

I would suggest that you could use the "bind" method to bind the outer function's context to the inner function. This would allow the inner function to access the outer function's members, including the "body" member. Additionally, you may want to consider using a different naming convention for your variables and functions to avoid confusion and potential bugs in the future.