javascript - 如何在函数对象字面量中传递参数

Question

我想将整数作为最小和最大参数传递给一个函数，以返回一个随机数供另一个函数使用。我是 Javascript 的新手，我正在使用对象文字模式。目前我收到错误“this.randomGenerator 不是一个函数”。如何从 randomGenerator 返回一个数字以用于 interaction？

bindEvents: function() {
    $('#left').on("click", this.interaction);
},
interaction: function() {
   var selector = this.randomGenerator(0, 3);
   var $columns = $('#left').find('div[col]');

   $columns.children().removeClass('show');
   $columns.eq(selector).children().addClass('show');
},
randomGenerator: function(min, max) {
    var last,      
        value,     
        count = 0, 
        getR = function () { return Math.floor(Math.random() * (max - min)) + min; };

    return function () {
        var random;
        if (count && value !== last) {
           --count;
            return last = value;
        }
        random = getR();
        while (random === last) {
             value = random;
             ++count;
            random = getR();
        }
        return last = random;
    };
},

Answer 1

问题是因为 click 处理程序中的 this 指的是被点击的元素，而不是包含 randomGenerator() 的对象> 功能。

要解决此问题，您可以在使用 $.proxy()(或 bind())之前在变量中保留对 this 的引用>) 将其设置为 randomGenerator() 函数应在其下运行的范围。试试这个:

var obj = {
  bindEvents: function() {
    var _this = this;
    $('#left').on("click", $.proxy(_this.interaction, _this));

    // Note you can also use the native bind() method, if preferred:
    // $('#left').on("click", _this.interaction.bind(_this));
  },
  interaction: function() {
    var selector = this.randomGenerator(0, 3);
    console.log(selector()); // just for testing...
    
    var $columns = $('#left').find('div[col]');

    $columns.children().removeClass('show');
    $columns.eq(selector).children().addClass('show');
  },
  randomGenerator: function(min, max) {
    var last,
      value,
      count = 0,
      getR = function() {
        return Math.floor(Math.random() * (max - min)) + min;
      };

    return function() {
      var random;
      if (count && value !== last) {
        --count;
        return last = value;
      }
      random = getR();
      while (random === last) {
        value = random;
        ++count;
        random = getR();
      }
      return last = random;
    };
  }
}

obj.bindEvents();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left">Click me</div>