variabile istanza diventa undefined - CoffeeScript

Question

class Game 

    foo: null 

    play: -> 

    @foo = 2 
    @animate() 

    animate: -> 

    requestAnimationFrame(@animate, 1000) 
    console.log('foo = ', @foo) 


$ -> 
    game = null 

    init = -> 

    game = new Game() 
    game.play() 

    init() 

Il registro nel metodo animato nel gioco produce:

foo = 2

foo = undefined

Quindi foo è 2 in prima convocazione per animare e quindi indefinito da allora in poi. Qualcuno potrebbe spiegare perché e come posso risolvere questo problema. Ogni aiuto è molto apprezzato.

Answer 1

Quando si chiama setInterval, il contesto viene perso e la seconda volta @ è window. Hai bisogno di metodi di grasso-freccia per mantenere l'appropriata this:

animate: => 

Answer 2

È possibile definire animate come segue:

animate: -> 
    callback = (=> @animate()) 
    requestAnimationFrame(callback, 1000) 
    console.log('foo = ', @foo) 

La tecnica qui è quello di ottenere un metodo vincolato. @animate di per sé è non associato, ma (=> @animate()) è la versione associata di esso.

È possibile ottenere un risultato simile se si sta utilizzando UnderscoreJS come segue:

animate: -> 
    callback = _.bind(@animate, @) 
    requestAnimationFrame(callback, 1000) 
    console.log('foo = ', @foo) 

E se si utilizza una versione successiva di JavaScript, si può essere in grado di fare come segue:

animate: -> 
    callback = @animate.bind(@) 
    requestAnimationFrame(callback, 1000) 
    console.log('foo = ', @foo)