闭包 - javascript 循环赋值问题能否使用bind解决？

问题描述

问 题

html代码：

<div id="t1">
  <button>btn1</button>
  <button>btn2</button>
  <button>btn3</button>
  <button>btn4</button>
  <button>btn5</button>
</div>

js代码

$(function(){
  var div = $("#t1");
  for(var i=0,tmp;i<5;i++){
    div.find("button:eq("+i+")").on("click",function(){
      alert(i);
    });
  }
});

这个问题就是每次点击按钮应该弹出0,1,2,3,4
解决办法我知道的是使用闭包，代码如下：

$(function(){
  var div = $("#t1");
  for(var i=0,tmp;i<5;i++){
    (function (b){
      div.find("button:eq("+b+")").on("click",function(){
        alert(b);
      });
    })(i)
  }
});

bind的作用是改变函数的this指向，如果不使用这种方式还有其他解决方式么？
**不要在按钮上添加其他属性的方案以及类似的修改html的解决方案？
防止别人再回答关联到html、DOM元素上，就是闭包、bind、自执行函数问题**
我上次面试面试官问过bind可以解决这样的问题么？

解决方案

bind除了可以传入绑定对象，还可以传入调用时的参数。

var btns = document.querySelectorAll('button');
function say(idx){
    alert(idx);
}
for(var i=0;i<5;i++){
    btns[i].onclick = say.bind(btns[i], i);
}

这篇关于闭包 - javascript 循环赋值问题能否使用bind解决？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！