biến Instance trở nên không xác định - 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() 

Nhật ký trong phương pháp sinh động trong trò chơi sản xuất:

foo = 2

foo = không xác định

Vì vậy foo là 2 về cuộc gọi đầu tiên để animate và sau đó không xác định sau đó. Ai đó có thể vui lòng giải thích lý do tại sao và làm thế nào tôi có thể sửa lỗi này. Bất kỳ sự giúp đỡ nào cũng được đánh giá cao.

Answer 1

Khi bạn gọi setInterval, ngữ cảnh bị mất và lần thứ hai @ là window. Bạn cần chất béo mũi tên phương pháp để giữ lại phù hợp this:

animate: => 

Answer 2

Bạn có thể xác định animate như sau:

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

Kỹ thuật ở đây là để có được một phương pháp ràng buộc. @animate của chính nó là không bị ràng buộc, nhưng (=> @animate()) là phiên bản bị ràng buộc của nó.

Bạn có thể có được một kết quả tương tự nếu bạn đang sử dụng UnderscoreJS như sau:

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

Và nếu bạn đang sử dụng một phiên bản sau của JavaScript, bạn có thể làm như sau:

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