5 
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メソッドのログは次のようになります。

foo = 2

foo = undefined

したがって、fooはanimateの最初の呼び出しで2であり、その後は未定義です。誰かが私がこれを修正できる理由と方法を説明してもらえますか？どんな助けでも大歓迎です。

4

2 に答える 2

11

を呼び出すとsetInterval、コンテキストが失われ、2回目@はwindowです。適切なものを保持するには、fat-arrowメソッドが必要ですthis。

animate: =>
于 2012-07-07T23:21:41.747 に答える
5

animate次のように定義できます。

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

ここでのテクニックは、バインドされたメソッドを取得することです。@animateそれ自体はバインドされていません(=> @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)
于 2012-07-08T01:50:48.567 に答える