试图从点击事件咖啡脚本中调用“this”答案

【问题标题】：Trying to call 'this' from click event coffeescript试图从点击事件咖啡脚本中调用“this”
【发布时间】：2014-02-15 21:35:27
【问题描述】：

我正在尝试让画布中的某些内容在单击时做出响应。我在类Board内的一个函数中向画布添加了一个mousedown事件侦听器

addEvents : () ->
    @.canvas.addEventListener('mousedown',@.mouseDown)
mouseDown : (e) ->
    console.log(e,@)

上面的两个函数在Board类中，当点击画布时，我想从@返回板，但实际上是返回画布。

我尝试将事件侦听器/mousedown 函数更改为：

addEvents : () ->
    @.canvas.addEventListener('mousedown',(e)->@.mouseDown(e,@))
mouseDown : (e,@) ->
    console.log(e,@)

但这会引发unexpected PARAM_END的错误

【问题讨论】：

标签： javascript html canvas coffeescript

【解决方案1】：

您似乎已经知道，您需要使用粗箭头=> 将this（又名@）在函数体内进行词法绑定。

class Board
  constructor: (@canvas) ->
  addEvent: ->
    @canvas.addEventListener 'mousedown', @mouseDown
  mouseDown: (event) =>       
    # handle the event here

对mouseDown 方法使用粗箭头意味着@ 是在函数内部而不是在调用时按词法定义的...所以它是您看到的class 的实例在您的代码中，而不是事件的接收者（一个 DOM 元素）。

请注意，您不需要在 @ 之后添加 . - 您可以编写 @canvas 而不是 @.canvas。

【讨论】：

【解决方案2】：

你需要从函数中返回@...

addEvents : () ->
    @.canvas.addEventListener('mousedown',@.mouseDown)
    return @
mouseDown : (e) ->
    console.log(e,@)

你仍然可以在 Coffee 中显式地返回...

【讨论】：

【解决方案3】：

感谢那个删除答案的人将我推向正确的方向，

@.canvas.addEventListener('mousedown',(e) => @.mouseDown(e))

是我的最终解决方案

【讨论】：