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


Posted in Javascript onFebruary 20, 2017

要解决的问题是针对下面这个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();

总结

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

Javascript 相关文章推荐
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
JavaScript打字小游戏代码
Dec 26 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
详解vue的diff算法原理
May 20 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
原生JS实现跑马灯效果
Feb 20 #Javascript
js 实现省市区三级联动菜单效果
Feb 20 #Javascript
js事件冒泡与事件捕获详解
Feb 20 #Javascript
关于ES6的六个小特性(二)
Feb 20 #Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 #Javascript
JS批量替换内容中关键词为超链接
Feb 20 #Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 #Javascript
You might like
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
php实现分页工具类分享
2014/01/09 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
PDO::inTransaction讲解
2019/01/28 PHP
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
python支持断点续传的多线程下载示例
2014/01/16 Python
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
MySQL面试题
2014/01/12 面试题
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
大学生实习证明范本
2014/09/19 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
财务管理制度范本
2015/08/04 职场文书
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫