分享一道关于闭包、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();

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

赞 (0)

相关推荐

  • 浅谈JavaScript中的apply/call/bind和this的使用

    fun.apply(context,[argsArray]) 立即调用fun,同时将fun函数原来的this指向传入的新context对象,实现同一个方法在不同对象上重复使用. context:传入的对象,替代fun函数原来的this: argsArray:一个数组或者类数组对象,其中的数组参数会被展开作为单独的实参传给 fun 函数,需要注意参数的顺序. fun.call(context,[arg1],[arg2],[-]) 同apply,只是参数列表不同,call的参数需要分开一个一个传入.

  • react实现pure render时bind(this)隐患需注意!

    pure render 我就不多说了,附上我另一片文章链接 react如何性能达到最大化(前传) 不论你用不用immutable,只要你想达到pure render,下面值得你注意! 一天我和往常一样,开开心心得写着react,用着@pureRender, export default class extends Component { ... render() { const {name,age} =this.state; return ( <div> <Person name={na

  • JS中改变this指向的方法(call和apply、bind)

    this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式: 1.call用作继承时: function Parent(age){ this.name=['mike','jack','smith']; this.age=age; } function Child(age){ Parent.call(this,age);

  • 分享一道关于闭包、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.getElement

  • 分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]

    复制代码 代码如下: <html> 题:<br /> 有n个直线最多可以把一个平面分成多少个部分<br /><br /> 线条数:<input type="text" id="line"/><br /> 内交点:<label id="innerPoint"></label><br /> 分割数:<label id="part

  • 分享几道关于MySQL索引的重点面试题

    分享几道关于MySQL索引的重点面试题

    前言 索引是对数据库中一或多个列值的排序,帮助数据库高效获取数据的数据结构 假如我们用类比的方法,数据库中的索引就相当于书籍中的目录一样,当我们想找到书中的摸个知识点,我们可以直接去目录中找而不是在书中每页的找,但是这也抛出了索引的一个缺点,在对数据库修改的时候要修改索引到导致时间变多. 但MySQL 索引你真的懂吗?这几道题带你了解索引的几个重要知识点 1. 什么是最左前缀原则? 以下回答全部是基于MySQL的InnoDB引擎 例如对于下面这一张表 如果我们按照 name 字段来建立索引的话,

  • 分享面试官常用16个c/c++面试题

    目录 1. C中static有什么作用 2.C++中const有什么用? 3. C与C++各自是如何定义常量的?有什么不同? 4. 既然C++中有更好的const为什么还要使用宏? 5. C++中引用和指针的区别? 6. 说一说C与C++的内存分配方式? 7. new/delete 与 malloc()/free() 的区别? 8. #include<a.h>和#include"a.h" 有什么区别? 9. 在C++ 程序中调用被 C编译器编译后的函数,为什么要加 exte

  • c++中拷贝构造函数的参数类型必须是引用

    在C++中, 构造函数,拷贝构造函数,析构函数和赋值函数(赋值运算符重载)是最基本不过的需要掌握的知识. 但是如果我问你"拷贝构造函数的参数为什么必须使用引用类型?"这个问题, 你会怎么回答? 或许你会回答为了减少一次内存拷贝? 很惭愧的是,我的第一感觉也是这么回答.不过还好,我思索一下以后,发现这个答案是不对的. 原因:如果拷贝构造函数中的参数不是一个引用,即形如CClass(const CClass c_class),那么就相当于采用了传值的方式(pass-by-value),而传

  • 每个 JavaScript 工程师都应懂的33个概念

    简介 这个项目是为了帮助开发者掌握 JavaScript 概念而创立的.它不是必备,但在未来学习(JavaScript)中,可以作为一篇指南. 本篇文章是参照 @leonardomso 创立,英文版项目地址在这里. 由于原版资源都要翻墙,所以本人创立一个中文版,附上关于这些概念在国内的一些文章和视频. 若有觉得更好的文章或者视频,可以贡献出来,觉得有误的,请联系我删除. 若有觉得更好的文章或者视频,可以贡献出来,觉得有误的,请联系我删除. 文章的排序优化,前面的文章是介绍概念,后面的文章是深入解

  • 一口气说出Java 6种延时队列的实现方法(面试官也得服)

    五一期间原计划是写两篇文章,看一本技术类书籍,结果这五天由于自律性过于差,禁不住各种诱惑,我连电脑都没打开过,计划完美宣告失败.所以在这能看出和大佬之间的差距,人家没白没夜的更文,比你优秀的人比你更努力,难以望其项背,真是让我自愧不如. 知耻而后勇,这不逼着自己又学起来了,个人比较喜欢一些实践类的东西,既学习到知识又能让技术落地,能搞出个demo最好,本来不知道该分享什么主题,好在最近项目紧急招人中,而我有幸做了回面试官,就给大家整理分享一道面试题:"如何实现延时队列?". 下边会介绍

  • 推箱子游戏C语言实现代码

    推箱子游戏C语言实现代码

    今天我来分享一道对于初学C语言的同学非常有启发作用的编程例题,是用C语言实现单张地图推箱子的小游戏. 这个游戏是基于Linux环境下编程的,所用工具为ubuntu.和gcc编译器. 首先推箱子的地图,我们根据经典游戏推箱子中的其中一幅地图来自做,图片如下. 用图片形式实现这张图片对于初学编程的同学来说,难以实现,所以我们选择用字符代替的形式来实现这张地图. 我们采用2为数组的方式来存储这张地图,具体的数字与字符含义转换如下: 0 printf(" "); 路 2 printf(&quo

  • C++初学者之根据输入的任何一个正整数，输出可能被表示的连续正整数

    题目描述:一个正整数有可能可以被表示为 n(>=2) 个连续正整数之和,如: 15=1+2+3+4+5 15=4+5+6 15=7+8 请编写程序,根据输入的任何一个正整数,找出符合这种要求的所有连续正整数序列. 输入数据:一个正整数,以命令行参数的形式提供给程序. 输出数据:在标准输出上打印出符合题目描述的全部正整数序列,每行一个序列,每个序列都从该序列的最小正整数开始.以从小到大的顺序打印.如果结果有多个序列,按各序列的最小正整数的大小从小到大打印各序列.此外,序列不允许重复,序列内的整数用

  • 13道关于JavaScript正则表达式的面试题

    1.要想在正则表达式中按照直接量匹配反斜线本身,必须使用反斜线将其转义.() A.正确  B.错误 2.2.WINDOWS下,要摘取绝对路径字符串最前端的磁盘驱动器部分(即A:/B:/C:/...),用正则表达式实现是/^[A-Za-z]:/() A.正确  B.错误 3.3.\W这个字符类等价于字符类[a-zA-Z0-8].() A.正确  B.错误 4.4.0到999间的任意整数对应正则表达式是/[^0-9]{1,3}$/.() A.正确  B.错误 5.在JS正则表达式中,当n=m时,{n

随机推荐