为什么我在这个JS类中得到一个‘不是函数’的错误？

Question

我有个小班：

var SwitchHider;

SwitchHider = {
  inputSelector: 'body.socials input',
  _showOrHideClosestSwitch: function(element) {
    var socialUrl, swich_wrapper;
    socialUrl = $(element).val();
    swich_wrapper = $(element).closest('.white-box').find('.switch');
    if (socialUrl.length > 0) {
      return swich_wrapper.show();
    } else {
      return swich_wrapper.hide();
    }
  },
  _bindCallbacks: function() {
    $(document).on('ready', function() {
      return $(self.inputSelector).each(function(index, element) {
        return self._showOrHideClosestSwitch(element);
      });
    });
    return $(document).on('change keyup input', self.inputSelector, function() {
      return self._showOrHideClosestSwitch(this);
    });
  },
  initialize: function() {
    var self;
    self = this;
    this._bindCallbacks();
  }
};

window.SwitchHider = SwitchHider;

$(function() {
  SwitchHider.initialize();
});

(它是从这个CoffeeScript文件编译的，希望它有意义)：

SwitchHider =
  inputSelector: 'body.socials input'

  _showOrHideClosestSwitch: (element) ->
    socialUrl = $(element).val()
    swich_wrapper = $(element).closest('.white-box').find('.switch')
    if socialUrl.length > 0
      swich_wrapper.show()
    else
      swich_wrapper.hide()

  _bindCallbacks: ->
    $(document).on 'ready', ->
      $(self.inputSelector).each (index, element) ->
        self._showOrHideClosestSwitch(element)

    $(document).on 'change keyup input', self.inputSelector, ->
      self._showOrHideClosestSwitch(@)

  initialize: ->
    self = this
    @_bindCallbacks()
    return

# Send to global namespace
window.SwitchHider = SwitchHider

# DOM Ready
$ ->
  SwitchHider.initialize()
  return

当事件被触发时，它会产生以下错误：

TypeError: self._showOrHideClosestSwitch is not a function

有人知道为什么吗？这是我第一次尝试写这样的类，不要完全理解我在做什么。

Answer 1

self不在范围内。这是在乞求一个类语法：

class SwitchHider
  @inputSelector: 'body.socials input'
  constructor: ->
    $(document).on 'ready', =>
      $(SwitchHider.inputSelector).each (index, element) =>
        @_showOrHideClosestSwitch(element)

    $(document).on 'change keyup input', SwitchHider.inputSelector, (e) =>
      @_showOrHideClosestSwitch(e.target)


  _showOrHideClosestSwitch: (element) ->
    socialUrl = $(element).val()
    swich_wrapper = $(element).closest('.white-box').find('.switch')
    if socialUrl.length > 0
      swich_wrapper.show()
    else
      swich_wrapper.hide()

# Send to global namespace
window.SwitchHider = SwitchHider

# DOM Ready
$ ->
  new SwitchHider()

我使用=>来处理适当的this范围

Answer 2

self仅定义为initialize下的局部变量。它不会被其他方法使用。

  initialize: function() {
    var self;
    self = this;
    this._bindCallbacks();
  }

您要么必须在需要它的每个方法中定义一个本地self：

  _showOrHideClosestSwitch: (element) ->
    self = this
    # ...

  _bindCallbacks: ->
    self = this
    # ...

或者，您可以对周围的上下文使用脂肪箭每个回调，然后使用this或@：

  _bindCallbacks: ->
    $(document).on 'ready', =>
      $(@inputSelector).each (index, element) =>
        @_showOrHideClosestSwitch(element)

    $(document).on 'change keyup input', self.inputSelector, (ev) =>
      @_showOrHideClosestSwitch(ev.currentTarget)

在事件处理程序中，通常是上下文值的Element仍然可以通过event.currentTarget检索。