wie Parameter in einem Funktionsobjektliteral übergeben werden

Question

Ich möchte Integer als Min- und Max-Parameter an eine Funktion übergeben, um eine Zufallszahl zur Verwendung in einer anderen Funktion zurückzugeben. Ich bin neu in Javascript und ich verwende ein Objekt literal Muster. Zur Zeit bekomme ich den Fehler "this.randomGenerator ist keine Funktion". Wie kann ich eine Nummer von randomGenerator zur Verwendung in interaction zurückgeben?

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

Das Problem liegt daran, dass innerhalb der thisclick Handler auf das Element bezieht, die angeklickt wurde, nicht das Objekt, das die randomGenerator() Funktion enthält.

um dieses Problem zu beheben Sie einen Verweis auf this in einer Variablen halten kann, bevor $.proxy() (oder bind()), sie als den Rahmen zu setzen, dass die randomGenerator() Funktion unter ausgeführt werden soll. Versuchen Sie folgendes:

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>