分享一道关于闭包、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 相关文章推荐
jQuery chili图片远处放大插件
Nov 30 Javascript
浏览器常用高宽的jquery插件
Feb 24 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
element el-input directive数字进行控制
Oct 11 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
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
JS 控制小数位数的实现代码
2011/08/02 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
微信小程序开发探究
2016/12/27 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
微信小程序云开发之使用云存储
2019/05/17 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
Python魔术方法详解
2015/02/14 Python
Python编程实现正则删除命令功能
2017/08/30 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
python requests库的使用
2021/01/06 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
户外亲子活动策划方案
2014/02/07 职场文书
培训班主持词
2014/03/28 职场文书
退休教师追悼词
2015/06/23 职场文书
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL