• 技术文章 >web前端 >js教程

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

    高洛峰高洛峰2017-02-21 14:50:15原创497
    这篇文章主要给大家介绍了一道关于闭包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();

    更多分享一道关于闭包、bind和this的面试题相关文章请关注PHP中文网!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:js 闭包 面试题
    上一篇:BootStrap fileinput.js文件上传组件实例代码 下一篇:原生JS实现跑马灯效果
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 总结Node.js模块开发及常用技巧分享• 实例讲解node中http模块和url模块的使用方法• 示例解析Json对象Json字符串的序列化与反序列化• Node文件系统:fs异步与同步(文件读写)• Module模块化编程的优点(总结分享)
    1/1

    PHP中文网