Hinzufügen von Bind zu einem Prototyp-Objekt in Vanille Javascript in einer for-Schleife

Question

Ich habe eine JavaScript-Klasse mit einer Prototyped-Methode, die eine For-Schleife verwendet, um eine Gruppe von Objekten einen Ereignis-Listener hinzuzufügen und eine andere Methode in der Klasse aufzurufen.

Um auf die andere Methode in der Klasse zugreifen zu können, muss ich die Funktion im Ereignis-Listener binden, die mir Zugriff auf die andere Klassenmethode gibt. Allerdings bekomme ich immer den höchsten Wert in der for-Schleife, also gebe ich eine Funktion in einer anonymen Funktion zurück, aber jetzt kann ich die bind-Funktion nicht mehr zum Laufen bringen und finde die andere Klassenmethode.

ToDoList.prototype = { 
     addListener : function(){ 
     //inside for loop 
     for(var i = 0; i < ToDoList.counter; i++){ 
      el.addEventListener("click", ((function(value){    
      return function(){ 
       this.remove(value); //trying to call this method 
      }; 
      })(i)).bind(this)    
     ); 
     } 

     } 

     remove : function(index){ 
     //do some stuff if you can get to me   
     } 
    } 

Der obige Code funktioniert nur mit dem letzten Wert der for-Schleife. Gibt es eine Möglichkeit, dass ich den Code auf alle Werte in der For-Schleife arbeiten kann.

Vielen Dank im Voraus

Answer 1

Die bind Funktion eine neue Funktion mit this zurück auf das erste Argument von bind gesetzt, und alle nachfolgenden Argumente als Parameter übergeben.

Sie brauchen nicht einen Verschluss, wenn bind mit:

ToDoList.prototype = { 
    addListener: function() { 
    for (var i = 0; i < ToDoList.counter; i++) { 
     el.addEventListener("click", function(value) { 
     // `this` is the same as outer `this` 
     // `value` is `i` 
     this.remove(value); 
     }.bind(this, i)); 
    } 
    }, 
    remove: function(index) { 
    } 
} 

Answer 2

Mit ES2015 verfügt über:

ToDoList.prototype = { 
    addListener() { 
    for (let i = 0; i < ToDoList.counter; i++) { 
     el.addEventListener("click",() => this.remove(i)); 
    } 
    } 
} 

Ordentlich huh?

Die let wird es so machen, dass jede Iteration der Schleife eigene i statt einer gemeinsamen für die gesamte Funktion hat. Dies löst das Problem, dass i gleich ToDoList.counter ist.

Der Pfeil Funktion => automatisch gebunden ist, so dass Sie kümmern müssen nicht über this, wird es automatisch auf die externe this korrekt gebunden sein.