在 for 循环中添加 Bind 到 vanilla Javascript 中的原型对象答案

【问题标题】：Adding Bind to a prototyped object in vanilla Javascript in a for loop在 for 循环中添加 Bind 到 vanilla Javascript 中的原型对象
【发布时间】：2017-03-05 09:25:50
【问题描述】：

我有一个带有原型方法的 Javascript 类，它使用 for 循环将事件侦听器添加到一组对象并调用类中的另一个方法。

为了能够访问类中的其他方法，我必须在事件侦听器中绑定函数，以便我可以访问其他类方法。但是我总是在 for 循环中获得最高值，所以我在匿名函数中返回一个函数，但现在我无法让绑定函数工作并找到其他类方法。

    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         
      }
    }

上面的代码只适用于 for 循环的最后一个值。有什么方法可以让代码处理 for 循环中的所有值。

【问题讨论】：

什么for循环？
它在一个 for 循环中，我只是为了简单而省略了
好的，为了简单起见，我只是更改了您的代码 -> jsfiddle.net/4onwcf3n

标签： javascript javascript-objects dom-events

【解决方案1】：

bind 函数返回一个新函数，其中this 设置为bind 的第一个参数，所有后续参数都作为参数传递。

如果使用bind，则不需要闭包：

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) {
  }
}

【讨论】：

【解决方案2】：

具有 ES2015 功能：

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

不错吧？

let 将使循环的每次迭代都有自己的i，而不是整个函数的共享i。这样就解决了i等于ToDoList.counter的问题。

箭头函数=>是自动绑定的，不用担心this，它会自动正确绑定到外部this。

【讨论】：