在同一个类的函数内部调用一个类的函数答案

【问题标题】：Call a function of a class, inside a function of the same class在同一个类的函数内部调用一个类的函数
【发布时间】：2017-05-21 11:56:23
【问题描述】：

我有以下咖啡脚本类：

class Teams
  rankings: ->
    this.nav_tabs_ajax_calls()

    window.history.pushState(
      '',
      '',
      CoffeeRoutes.path('rankings_team', { 'id': this.team_id() })
    )

    $('li.active').removeClass('active')
    $('li:has(a[href="#rankings"])').addClass('active')

  exercises: ->
    this.nav_tabs_ajax_calls()

    window.history.pushState(
      '',
      '',
      CoffeeRoutes.path('exercises_team', { 'id': this.team_id() })
    )

    $('li.active').removeClass('active')
    $('li:has(a[href="#exercises-list"])').addClass('active')

    $(document).on 'click', '#add-exercise', ->
      showModal("exercises", false, createModal);

    createModal("exercises");

  users: ->
    window.history.pushState(
      '',
      '',
      CoffeeRoutes.path('users_team', { 'id': this.team_id() })
    )

    $('li.active').removeClass('active')
    $('li:has(a[href="#enrolled-students"])').addClass('active')

  graph: ->
    window.history.pushState(
      '',
      '',
      CoffeeRoutes.path('graph_team', { 'id': this.team_id() })
    )

    $('li.active').removeClass('active')
    $('li:has(a[href="#graph"])').addClass('active')

    initialize_graph();

    $('#pause-resume').click ->
      if $('#pause-resume i').attr('class') == "fa fa-pause"
        pause()
        $('#pause-resume i').attr('class', 'fa fa-play')
        $('#pause-resume i').attr('title', 'Resume graph animation')

      else
        resume()
        $('#pause-resume i').attr('class', 'fa fa-pause')
        $('#pause-resume i').attr('title', "Stop graph animation")


     $('#back-center').click ->
       reset()

     $('#remove-graph').click ->
       dispose()

     $(document).on 'click', '#add-nodes', ->
       showModal('search', false, createModal)

     $(document).on 'click', '#search-btn', ->
       div = $(document.createElement('div'))
       div.attr('id', 'loading-modal')
       $('.modal-content').append(div)

  team_id: ->
    $('#show-team').data('team-id')

  nav_tabs_ajax_calls: ->
    $('a[href="#rankings"]').click ->
      $.ajax CoffeeRoutes.path('rankings_team', { 'id': this.team_id() })
         type: 'GET',
         dataType: 'script'

    $('a[href="#exercises-list"]').click ->
      $.ajax CoffeeRoutes.path('exercises_team', { 'id': this.team_id() })
         type: "GET",
         dataType: 'script'

    $('a[href="#enrolled-students"]').click ->
      $.ajax CoffeeRoutes.path('users_team', { 'id': this.team_id() })
         type: "GET",
         dataType: 'script'

    $('a[href="#graph"]').click ->
      $.ajax CoffeeRoutes.path('graph_team', { 'id': this.team_id() })
         type: "GET",
         dataType: 'script'

在my nav_tabs_ajax_calls 函数中，我收到以下错误（例如，如果我调用rankings 函数）：Uncaught TypeError: this.team_id is not a function(…)。

从我的函数中删除this.nav_tabs_ajax_calls()，它工作正常，在我的其他函数中调用this.team_id() 没有错误。

我做错了什么，我该如何解决？

【问题讨论】：

标签： javascript coffeescript

【解决方案1】：

“this”上下文可能是全局窗口，因为“this.team_id()”实际上是从“click”事件回调中调用的。您可以在附加“click”事件侦听器之前捕获 team_id，也可以代理“click”回调函数。

nav_tabs_ajax_calls: ->
tID = this.team_id();
$('a[href="#rankings"]').click ->
  $.ajax CoffeeRoutes.path('rankings_team', { 'id': tID })
     type: 'GET',
     dataType: 'script'
// etc. replacing "this.team_id()" with "tID"

或者（我不是咖啡脚本专家，所以这可能不是正确的语法）

$('a[href="#rankings"]').click ->
  $.proxy($.ajax(CoffeeRoutes.path('rankings_team', { 'id': tID }), {
     type: 'GET',
     dataType: 'script'
  }, this)
// etc.

【讨论】：

但是...我喜欢@partho222 的回答 - 似乎更像是咖啡脚本标准。
我知道=> 是最好的解决方案，但我花了一些时间来了解hot to use。事实上，这是最好的解决方案。保持我所做的，只需在click 事件中添加=> 而不是->，就解决了我的问题。您的示例有助于找出我做错了什么，非常感谢！
看看这个答案以完全理解 => stackoverflow.com/questions/13184209/…

【解决方案2】：

内部函数需要使用=>。

内部函数，-> 是默认绑定到 undefined 的普通函数。使用 =>，您可以将其与函数实例化上下文的 this 值绑定。

检查这个： Call method in class from another method in same class which is running inside a instance function

【讨论】：