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)

document.addEventListener“this”上下文

1 个答案: