javascript - 在 jquery 每个循环中调用对象方法 - 范围问题？

Question

My.Awesome.Obj = function() {
    return {
        // PUBLIC PROPERTIES
        legendObj:  null,

        // PUBLIC METHODS
        init: function() {
            this.assignLegendClick();
        },

        assignLegendClick: function() {
            console.log('*** drawLegend()');
            var checkboxes = this.legendObj.find("input");
            checkboxes.each(function() {
                $(this).click(function() {
                    this.handleLegendClick();
                });
            })
        },

        handleLegendClick: function() {
            console.log('*** handleLegendClick()');
        },

        EOF: null
    };
}();

所以我收到一个错误说

未定义 handleLegendClick

我假设这是一个范围问题，但我不确定如何在循环中引用父对象......

Answer 1

问题在于this调用window单击事件处理程序的时间。

你可以这样做：

My.Awesome.Obj = function() {
    var obj = {
        // PUBLIC PROPERTIES
        legendObj:  null,

        // PUBLIC METHODS
        init: function() {
            obj.assignLegendClick();
        },

        assignLegendClick: function() {
            console.log('*** drawLegend()');
            var checkboxes = obj.legendObj.find("input");
            checkboxes.each(function() {
                $(this).click(function() {
                    obj.handleLegendClick(); // <=== replace this with obj
                });
            })
        },

        handleLegendClick: function() {
            console.log('*** handleLegendClick()');
        },

        EOF: null
    };
    return obj;
}();

Answer 2

是的，这是一个范围界定问题：

assignLegendClick: function() {
  console.log('*** drawLegend()');
  var checkboxes = this.legendObj.find("input");
  checkboxes.each(function() {
    $(this).click(function() {
      this.handleLegendClick();
    });
  })

使用辅助参数来保留范围（通常称为 self 或 _self）

assignLegendClick: function() {
  console.log('*** drawLegend()');
  var self = this
    , checkboxes = this.legendObj.find("input");
  checkboxes.each(function() {
    $(this).click(function() {
      self.handleLegendClick();
    });
  })