源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

分享一道关于闭包、bind和this的面试题

  • 时间:2022-11-14 01:47 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:分享一道关于闭包、bind和this的面试题
要解决的问题是针对下面这个ul,为每一个li添加一个点击事件,弹出对应的index
<ul id="text">
 <li>这是第一个li</li>
 <li>这是第二个li</li>
 <li>这是第三个li</li>
</ul>
[b]解答一:[/b]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();
[b]解答二:[/b]闭包
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();
[b]解答三:[/b]最笨的方法,匹配
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();
[b]总结[/b] 以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部