Why do I lose my instance information when calling a prototype function via setTimeout?
<p>I think I'm missing some key concept regarding objects and prototype functions in JavaScript.</p>

<p>I have the following:</p>

<pre><code>function Bouncer(ctx, numBalls) {
    this.ctx = ctx;
    this.numBalls = numBalls;
    this.balls = undefined;
}

Bouncer.prototype.init = function() {
    var randBalls = [];
    for(var i = 0; i &lt; this.numBalls; i++) {
        var x = Math.floor(Math.random()*400+1);
        var y = Math.floor(Math.random()*400+1);
        var r = Math.floor(Math.random()*10+5);
        randBalls.push(new Ball(x, y, 15, "#FF0000"));
    }
    this.balls = randBalls;
    this.step();
}

Bouncer.prototype.render = function() { 
    this.ctx.clearRect(0, 0, 400, 400);  
    for(var i = 0; i &lt; this.balls.length; i++) {
        this.balls[i].render(this.ctx);
    }
}

Bouncer.prototype.step = function() {
    for(var i = 0; i &lt; this.balls.length; i++) {
        this.balls[i].yPos -= 1;
    }      
    this.render();
    setTimeout(this.step, 1000);
}
</code></pre>

<p>I then create an instance of Bouncer and call its init function like so:</p>

<pre><code>$(function() {
    var ctx = $('#canvas')[0].getContext('2d');
    var width = $('#canvas').width();
    var height = $('#canvas').height();



    var bouncer = new Bouncer(ctx, 30);
    bouncer.init();
});
</code></pre>

<p>The init() function will call step which has a setTimeout to loop the step function.</p>

<p>This works on the first call to step().  However, on the second call (when setTimeout fires step) the instance variable "balls" is undefined.  So, in my step function, the second call will blow up saying there is no "length" property for undefined.</p>

<p>Why do I lose my instance information when calling step from setTimeout()?</p>

<p>How could I restructure this so I can loop via a timeout and still have access to those instance variables?</p>
