Javascript 实例变量变为未定义-CoffeeScript

游戏中动画方法中的日志生成：

foo=2

foo=未定义

---

因此，foo在第一次调用animate时为2，此后未定义。有人能解释一下我为什么以及如何解决这个问题吗。非常感谢您的帮助。

当您调用

setInterval

时，上下文将丢失，第二次

@

是

窗口

。您需要fat arrow方法来保留相应的

this

：

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()

---

您可以定义

动画

，如下所示：

animate: =>

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

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

这里的技巧是获得一个绑定方法

@animate

本身是未绑定的，但是

（=>@animate（））

是它的绑定版本

如果使用下划线JS，可以得到类似的结果，如下所示：

animate: =>

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

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

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

animate: =>

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

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

---

谢谢你的回答。这起到了作用，但在requestAnimationFrame中导致了非常奇怪的行为。我正在调用requestAnimationFrame，这是应该做的，但是使用胖箭头，它有点像是在重复调用requestAnimationFrame。@user881920这种重复是正确的行为。你应该接受亚伦的回答。如果您对

requestAnimationFrame

有问题，您应该单独问一个问题。

requestAnimationFrame

不将数字作为第二个参数；相反，如果浏览器选项卡位于前台，它会尽快调用给定函数（通常比setTimeout（func，0）更快）。看见