Function inside an object cannot access that object in javascript

Question

I am trying to move a cicle through a set of points like inside a pipe in horizontal or vertical direction

I am using a function inside an object and trying to call another function of the same object.

var ParticleGen = function() {
    this.pipeBegin = points[pipeIndex];
    this.pipeEnds = points[pipeIndex + 1];
    this.begin = function(){
        var pipeBegin = points[pipeIndex];
        var pipeEnds = points[pipeIndex + 1];
        nx = pipeBegin.x;
        ny = pipeBegin.y;
        if(pipeBegin.x == pipeEnds.x && pipeBegin.y >= pipeEnds.y){
            if(ny > pipeEnds.y) {
                ctx.clearRect(0, 0, w, h);
                drawCircle(nx, ny);
                ny--;
                nx = nx;
            }else if(ny == pipeEnds.y){
                cancelAnimationFrame(animloop);
                this.callBegin();
            }   
            requestAnimFrame(animloop);
        }
        animloop();
    }
    this.callBegin = function(){
        if(pipeIndex <= 3){
            pipeIndex++;
        }
        this.begin();
    }
};

But it throws an error.

Uncaught TypeError: Object [object global] has no method 'callBegin' 

The code snippet can be seen here

Thank you,

Answer 1

The code in the jsfiddle is different from what you posted.

In the jsfiddle, you have:

    if (pipeBegin.x == pipeEnds.x && pipeBegin.y >= pipeEnds.y) {
        // endpoint y greater than start point y moving upwards
        function animloop() {
            if (ny > pipeEnds.y) {
                console.log(nx + " : nx, ny : " + ny)
                ctx.clearRect(0, 0, w, h);
                drawCircle(nx, ny);
                ny--;
                nx = nx;
            } else if (ny == pipeEnds.y) {
                console.log(this)
                cancelAnimationFrame(animloop);
                this.callBegin();
            }
            requestAnimFrame(animloop);
        }
        animloop();

    }

You use this.callBegin() inside the function animloop , then this will refer to the global object window .

You could change animloop(); to animloop.call(this); or animloop.apply(this); to bound the right this .

Answer 2

The function you're calling this.callBegin isn't the function you think: you're within another function ( animloop or animloop1 etc) when you make the call (lines 63 and 78 respectively). Within those functions, the scope is changed and the this keyword then refers to the function animloop (not ParticleGen or window ). animloop has no property callBegin (function or otherwise).

You should first 'save' the ParticleGen scope to use it within the sub-functions:

var ParticleGen = function() {

    var pg = this;

    // etc

    function animloop() {

        // etc

        pg.callBegin();

    }
}

An updated, working fiddle: http://jsfiddle.net/PZCpf/2/