javascript - 实例变量变得未定义 - 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()

Game 中的 animate 方法中的日志产生：

富 = 2

foo = 未定义

所以 foo 在第一次调用动画时是 2，然后是 undefined。有人可以解释为什么以及如何解决这个问题。任何帮助深表感谢。

Answer 1

当您调用时setInterval，上下文丢失，第二次@丢失window。您需要 fat-arrow 方法来保留适当的this：

animate: =>

Answer 2

你可以定义animate如下：

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

这里的技术是获取绑定方法。@animate本身是unbound，但(=> @animate())它是它的绑定版本。

如果您使用 UnderscoreJS，您可以获得类似的结果，如下所示：

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

如果您使用的是更高版本的 JavaScript，您可以执行以下操作：

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