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 中“粗箭頭”的經典案例。

您需要在不同上下文中執行的回調中訪問您的 DragDrop this值。 使用onDragEnter箭頭會將this的當前值綁定到您的onDragEnter函數：

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