javascript - 无法调用 java/coffeescript 中的实例方法

Question

这个问题已经有答案了:

How can I use Coffeescript 'this' from within jQuery $.bind()? (3 个回答)

已关闭 9 年前。

我是coffeescript 和javascript 的新手。我写了下面的例子。当bar时此操作失败被调用。

class FooBar
  constructor: ->
    @cleanBinding()
    @addBinding()
    @foo

  addBinding: ->
    $(document).on 'click', '.foo', @foo
    $(document).on 'input', 'input#bar', @bar

  cleanBinding: ->
    $(document).off 'click', '.foo'
    $(document).off 'input', 'input#bar'

  foo: ->
    alert('foo')

  bar: (e) ->
    @foo()
    e.preventDefault()

@FooBar = FooBar

调用@foo bar内被编译为this.foo()在 JavaScript 中。然而，这失败了，因为this.foo未定义。奇怪的this是一个链接，<a href> 。有人可以帮我弄清楚发生了什么事吗？

Answer 1

我想我已经明白你的问题所在了。

真正的问题是如何注册事件处理程序:

$(document).on 'click', '.foo', @foo

因为这里的@foo只是一个没有任何上下文的FooBar::foo函数。

有两种方法可以修复它。

<小时/>

首先，你可以显式地将@foo与this绑定(bind)，这是常见的JS解决方案:

$(document).on 'click', '.foo', @foo.bind this

<小时/>

其次，您可以在定义方法时使用 CoffeeScript 粗箭头运算符 =>:

class FooBar
  constructor: ->
    @cleanBinding()
    @addBinding()
    @foo

  addBinding: ->
    $(document).on 'click', '.foo', @foo
    $(document).on 'input', 'input#bar', @bar

  cleanBinding: ->
    $(document).off 'click', '.foo'
    $(document).off 'input', 'input#bar'

  foo: =>
    alert('foo')

  bar: (e) =>
    @foo()
    e.preventDefault()

当创建 FooBar 类的新实例时，它会自动告诉 CoffeeScript 编译器 .bind() 这些方法。