javascript - document.addEventListener“此”上下文

我正在编写一个简单的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/

我该如何解决这个问题？

最佳答案

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)