javascript - 尝试在 Fancybox 回调中调用 CoffeeScript 方法时出现范围问题

Question

我有以下名为 Course 的 CoffeeScript 模块。我有一小段代码想重复使用，我创建了一个名为 preSelectItemSize 的方法。

我想在调用 init 时以及在 afterShow Fancybox 回调中调用此方法。以下代码可以工作，但它不认为使用模块名称是正确的，我应该使用对“this”的@引用。

我做错了什么？ (为简洁起见，减少了代码片段)

$ = window.jQuery = require("jquery")
Course =

  init: ->

    $('.js-product-overlay').on 'click', (e) =>
      @viewProductClickHandler(e, MediaDetection)

    @preSelectItemSize()

  viewProductClickHandler: (e, mediaDetection) =>

    $('.js-product-overlay').fancybox({
      href: wishlist_overlay_href
      maxWidth: '775px'
      minHeight: '495px'
      autoCenter: '!isTouch'
      height: 'auto'
      scrolling: true
      fitToView: false
      autoSize: false
      padding: 0
      tpl:
        closeBtn: '<a class="fancybox-item modal__close fancybox-close" href="javascript:;">Close</a>'
      afterShow: ->
        $('.js-fancybox-close').on 'click', (e) ->
          e.preventDefault()
          $.fancybox.close()

        Course.preSelectItemSize()
    })

  preSelectItemSize: ->
    itemId = $('.modal__product-info').attr('data-item-id')
    $('#size-' + itemId).click()

module.exports = Course

Answer 1

我认为你真正的问题是你使用的是简单的对象文字而不是类，因此 => 的行为不太符合你的预期，你只能引用类(class)按名称。

如果我们看一个简化的示例:

o =
  m: =>

我们可以通过查看生成的 JavaScript 来了解发生了什么:

var o;
o = {
  m: (function(_this) {
    return function() {};
  })(this)
};

因为我们只有一个简单的数据结构(即一个普通的旧对象文字)，所以没有构造函数将 m 绑定(bind)到任何实例，它的行为就像您所说的:

m = =>
o = m: m

因此，o(或您的情况下的Course)的任何函数属性都只是碰巧是函数的普通旧属性，它们不是真正的方法。

您可以删除所有粗箭头并按名称引用类(class)，或者您可以切换到一个类，以便有一个 CoffeeScript 实例将事物绑定(bind)到:

class Course
  #...
module.exports = new Course