Document.addEventListener "this" 上下文

Question

我正在编写一个简单的 CoffeeScript 类，但我遇到了这段代码的上下文问题：

class DragDrop
constructor: (@selector, @bodyDragEnterClass = "drag-over") ->
    @attachEventHandlers()

attachEventHandlers: () ->
    document.write(@bodyDragEnterClass) # this line tells me, that @bodyDragEnterClass is "drag-over"
    document.addEventListener("dragenter", @onDragEnter, false)

onDragEnter: () ->
    document.write(@bodyDragEnterClass) # this line tells me, that @bodyDragEnterClass is undefined
    jQuery("body").addClass(@bodyDragEnterClass)

window.DragDrop = DragDrop

当调用attachEventHandlers 方法时，@bodyDragEnterClass 按预期设置为“拖动”。但是，当dragenter 事件被触发并调用onDragEnter 方法时，@bodyDragEnterClass 为“未定义”。

我在这里创建了一个 jsfiddle 来演示上下文问题：http://jsfiddle.net/SVvrM/

我该如何解决这个问题？

Answer 1

CoffeeScript 中有一个“fat arrow”的经典案例。

您需要在不同上下文中执行的回调中访问您的 DragDrop this 值。使用粗箭头会将this 的当前值绑定到您的onDragEnter 函数：

# "fat arrow" function binding
onDragEnter: () =>
  document.write(@bodyDragEnterClass) # this line tells me, that @bodyDragEnterClass is undefined
  jQuery("body").addClass(@bodyDragEnterClass)