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;
                    }
                            
                }
[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]
                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);