一个关于闭包/bind/this的面试题

发表于
针对下面这个ul，为每一个li添加一个点击事件，弹出对应的index
<ul id="text">
    <li>这是第一个li</li>
    <li>这是第二个li</li>
    <li>这是第三个li</li>
</ul>
解答一：bind，将当前匿名函数指向this，将i当参数传入
var init = function(){
var obj = document.getElementById('text');
for(var i=0;i<obj.children.length;i++){
  obj.children[i].addEventListener('click',function(i){
    alert(i)
  }.bind(this,i))
}
}
init();
解答二：闭包
var init = function(){
var lis=document.querySelectorAll("#text li");
  for(var i=0;i<lis.length;i++){
        lis[i].onclick=(function(i){
              return function(){
                    alert(i);
              };
        })(i)
  }
}
init();
解答三：最笨的方法，匹配
var init = function(){
  var obj = document.getElementById('text');
  for(var i=0;i<obj.children.length;i++){
    obj.children[i].addEventListener('click',function(item){
      var self = item.target;
      for(var j=0;j<obj.children.length;j++){
        if(self == obj.children[j]){
          alert(j);
        }
      }
    })
  }
}
init();

money☜☜☜ wechat 『『『 reward 点击扫码打赏 ~~~ ^_^ 』』』alipay ☞☞☞ money