CoffeeScript：如何使用胖箭头和这个？

Question

我有一个coffeescript类，它有一些jquery事件监听器。我想使用胖箭=>来避免引用该类，但我仍然需要引用通常与this一起使用的元素。我怎样才能同时使用它们？

class PostForm
    constructor: ->
        $('ul.tabs li').on 'click', =>
            tab = $(this)
            @highlight_tab(tab)
            @set_post_type(tab.attr('data-id'))

    highlight_tab: (tab)->
        tab.addClass 'active'

    set_post_type: (id) ->
        $('#post_type_id').val(id)

Answer 1

CoffeeScript将this和@链接到外部上下文，因此您无法访问jQuery提供的上下文（也就是所需的“this”）。请改用event.target：

class PostForm
    constructor: ->
        $('ul.tabs li').on 'click', (event) =>
            tab = $(event.target)
            @highlight_tab(tab)

Answer 2

使用evt.currentTarget

您应该使用evt.currentTarget（相当于this）而不是evt.target（不是）。如果您正在点击click通知的节点具有子节点，evt.target可能是这些子节点之一，而不是您添加click处理程序的节点。

有关此行为的演示，请参阅http://codepen.io/ddopson/pen/erLiv。 （单击内部红色框以查看红色div处的currentTarget点，而target指向事件处理程序注册的外部蓝色div处

$('ul.tabs li').on 'click', (event) =>
  tab = $(event.currentTarget)
  @highlight_tab(tab)

回答问题 - 得到`=＆gt;`和`this`：

您可以执行以下操作...

$('ul.tabs li').on 'click', (event) =>
  tab = $(` this `)     # MAKE SURE TO ADD THE SPACES AROUND `this`
  @highlight_tab(tab)

这些空间至关重要，因为它们会阻止咖啡将this篡改为_this。

使用`self`和` - ＆gt;`

或者，请执行以下操作...

self = this
$('ul.tabs li').on 'click', (event) ->
  tab = $(this)
  self.highlight_tab(tab)

这类似于CQQL的答案，除了我更喜欢使用self作为变量名称的惯用法;我的VIM syntax highlighting rules颜色self作为“特殊”变量，与this，arguments或prototype一样。

Answer 3

我更喜欢这个版本，因为我可以更容易理解它。

class PostForm
    constructor: ->
        post_form = this

        $('ul.tabs li').on 'click', (event) ->
            tab = $(this)
            post_form.highlight_tab(tab)

Answer 4

您可能想从函数访问构造函数中设置的变量。这就是您的操作方式（关键是先通过细箭头提取self的同时通过this调用函数）

class PostForm
    constructor: ->
        self = this

        @some_contrived_variable = true

        $('ul.tabs li').on 'click', ->
            tab = $(this)
            self.highlight_tab(tab)
            self.set_post_type(tab.attr('data-id'))

    highlight_tab: (tab) ->
        # Because of the fat arrow here you can now access @ again
        if @some_contrived_variable
            tab.addClass 'active'

    set_post_type: (id) ->
        $('#post_type_id').val(id)

顺便说一句：This is a great explanation of when to use the fat and thin arrow.

摘要：

1. 您在函数中使用此（@）吗？
2. 您是否想稍后再执行该功能，可能是在其他范围内执行？