javascript - 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中的“胖箭头”有一个经典案例。

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

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