分享一道关于闭包、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 相关文章推荐
JS修改css样式style浅谈
May 06 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
JS script脚本中async和defer区别详解
Jun 24 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 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
多人战的战术与战略
2020/03/04 星际争霸
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
PHP header函数分析详解
2011/08/06 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
定义select的边框颜色
2008/04/28 Javascript
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
python实现简单的socket server实例
2015/04/29 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
毕业班联欢会主持词
2014/03/27 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
教师节简报
2015/07/20 职场文书
公司员工培训管理制度
2015/08/04 职场文书