Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

Using a JavaScript Function as a Class

  1. May 30, 2014 #1
    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:

    Code (Text):

            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] [Broken]
                       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?
     
    Last edited by a moderator: May 6, 2017
  2. jcsd
  3. May 30, 2014 #2

    DavidSnider

    User Avatar
    Gold Member

    Newer browsers have Function.prototype.bind

    setInterval( this.move.bind(this), 500 );
     
  4. May 31, 2014 #3
    That's useful. Out of curiosity, how would I have done it without this feature?
     
  5. May 31, 2014 #4

    DavidSnider

    User Avatar
    Gold Member

    The implementation looks something like this
    Code (Text):

    Function.prototype.bind = function (scope) {
        var fn = this;
        return function () {
            return fn.apply(scope);
        };
    }
     
    This would have worked too

    Code (Text):

        var that = this;
        setInterval(function() {
            that.move();
        }, 500);
     
     
    Last edited: May 31, 2014
Know someone interested in this topic? Share this thread via Reddit, Google+, Twitter, or Facebook