coffeescript - 如何使用 Coffeescript 胖箭头在事件处理程序中引用父对象

Question

嗨，我是 Js 和 Coffeescript 的新手，我觉得很难引用App以下示例中的父对象的属性

App =
  init: ->
    this.foo = 'bar'
    this.bindEvent()
  bindEvent: ->  
    $('#test').click(this.show)
  show: ->
    alert this.foo

App.init()

我认为胖箭头可能会起作用，但是一旦我更改为show: =>，this在show方法的上下文中指的是窗口对象，而不是App我想要的对象。任何人都可以告诉我如何做对吗？

http://jsfiddle.net/kZpHX/

Answer 1

当你定义你的show函数时，@(AKA this) 实际上是window这样的

show: => console.log(@)

将绑定show到window. 问题是您只是在定义一个对象，所以没有任何东西可以绑定：您没有定义一个类，this所以window. 您可以App像这样明确引用：

App =
  #...
  show: -> alert(App.foo)

演示：http: //jsfiddle.net/ambiguous/3sRVh/

this.fooin会做正确的init事，因为说App.init()建立了预期this。

您也可以this手动连接所需的：

bindEvent: ->
  $('#test').click => @show()

# or
bindEvent: ->
  _this = @ # JavaScript style
  $('#test').click -> _this.show()

演示： http: //jsfiddle.net/ambiguous/byL45/，http : //jsfiddle.net/ambiguous/MT8fG/

或者您可以为您的应用创建一个类：

class App
  constructor: ->
    @foo = 'bar'
    @bindEvent()
  bindEvent: ->  
    $('#test').click(@show)
  show: =>
    console.log(@foo)

new App

这样你的show: =>行为就会像你期望的那样。

演示：http: //jsfiddle.net/ambiguous/byatH/