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

Posted 2021-04-16

我有一个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)

答案

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

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

另一答案

使用evt.currentTarget

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

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

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

回答问题 - 得到`=>`和`this`：

你可以做以下......

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

这些空间是至关重要的，因为它们阻止咖啡将this咀嚼到_this。

使用`self`和` - >`

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

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

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

另一答案

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

class PostForm
    constructor: ->
        post_form = this

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

另一答案

您可能希望从函数中访问构造函数中设置的变量。这将是你如何做到的（关键是通过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. 您想稍后执行该功能，可能来自不同的范围吗？