var self = this in Coffeescript

Question

I am dealing with some scope issues while using Coffeescript.

drawFirstLine: (currentAngle)  ->
    currentAngle = currentAngle # = 1

    switch @type
        # set @endAngle to pick up later on
        # Math.PI * 2 is the endpoint of a circle divided by seconds times current seconds
        when "seconds" then @endAngle = Math.PI * 2 / 60 * @seconds
        when "minutes" then @endAngle = Math.PI * 2 / 60 * @minutes
        when "hours" then @endAngle = Math.PI * 2 / 24 * @hours


    @context.arc(@center_x, @center_y, 100, @startAngle, currentAngle, @counterClockWise)
    @context.lineWidth = 15

    console.log('drawn')

    text = "28px sans-serif";
    @context.fillText(text, @center_x - 28, @center_y - @canvas.width / 5)

    @context.stroke()


    currentAngle++;
    if currentAngle < @endAngle
        requestAnimationFrame( -> @drawFirstLine(currentAngle / 100) )

As you can see at the bottom of the above code I am trying to call the function where we are in, again and again. But the problem is that I can't use @drawFirstLine inside another function(the requestAnimationFrame function). In plain javascript I can use var self = this and refer to self. But does anyone know how to deal with this in coffeescript?

Thanks in advance,

Answer 1

Use the fat arrow.

requestAnimationFrame( => @drawFirstLine(currentAngle / 100) )

which compiles to:

var _this = this;

requestAnimationFrame(function() {
  return _this.drawFirstLine(currentAngle / 100);
});

It basically does the self = this for you, making this or @ inside the function what this is when that function is declared. It's very handy, and it's probably my favorite feature of coffeescript.

Answer 2

I do this all the time in my app at work.

drawFirstLine: (currentAngle)  ->
    currentAngle = currentAngle # = 1
    self = @

    ....

Remember, in Coffeescript you don't need var: this will stay local to the context of the drawFirstLine function. (it'll generate var self = this).