js 闭包解决方案
相比很多人都遇见过这样的情况: 给一个ul的所有li绑定行为，在点击时获取其index。
假设结构如下:
<body>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
很多人会这么做:
var list= document.querySelectorAll('ul li')
for(var i= 0; i< list.length; i ++){
list[i].addEventListener('click', function(){
console.log(i)
})
}
结果输出的全是5，这便是闭包的最常见的出现情形。
解决方案:
1.利用let块级作用域的特性
var list= document.querySelectorAll('ul li')
for(let i= 0; i< list.length; i ++){
list[i].addEventListener('click', function(){
console.log(i)
})
}
2.利用自执行函数独立作用域，也是红宝书里推荐的写法
var list= document.querySelectorAll('ul li')
for(var i= 0; i< list.length; i ++){
(function(i){
list[i].addEventListener('click', function(){
console.log(i)
})
}(i))
}
3.利用事件委托机制(只适用于li内没有其余元素的情况)
var list= document.querySelector('ul')
list.onclick= function(e){
var e= window.event||e
var target= e.target||e.srcElement
if(target.nodeName.toLowerCase()== 'li'){
console.log([].indexOf.call(document.querySelectorAll('li'), target))
}
}
js 闭包解决方案的更多相关文章
- js闭包理解实例小结
Js闭包 闭包前要了解的知识 1. 函数作用域 (1).Js语言特殊之处在于函数内部可以直接读取全局变量 <script type="text/javascript"> ...
- js闭包实例汇总
本文是通过实例来帮助大家深刻理解js闭包,是篇非常不错的文章,这里推荐给大家,有需要的小伙伴可以参考下 Js闭包 闭包前要了解的知识 1. 函数作用域 (1).Js语言特殊之处在于函数内部可以直接读取 ...
- 深入贯彻闭包思想，全面理解JS闭包形成过程
谈起闭包,它可是JavaScript两个核心技术之一(异步和闭包),在面试以及实际应用当中,我们都离不开它们,甚至可以说它们是衡量js工程师实力的一个重要指标.下面我们就罗列闭包的几个常见问题,从回答 ...
- JS闭包的理解及常见应用场景
JS闭包的理解及常见应用场景 一.总结 一句话总结: 闭包是指有权访问另一个函数作用域中的变量的函数 1.如何从外部读取函数内部的变量,为什么? 闭包:f2可以读取f1中的变量,只要把f2作为返回值, ...
- js闭包的作用域以及闭包案列的介绍：
转载▼ 标签: it js闭包的作用域以及闭包案列的介绍: 首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...
- 大部分人都会做错的经典JS闭包面试题
由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...
- Js闭包常见三种用法
Js闭包特性源于内部函数可以将外部函数的活动对象保存在自己的作用域链上,所以使内部函数的可以将外部函数的活动对象占为己有,可以在外部函数销毁时依然存有外部函数内的活动对象内容,这样做的好处是可 ...
- js闭包之初步理解（ JavaScript closure）
闭包一直是js中一个比较难于理解的东西,而平时用途又非常多,因此不得不对闭包进行必要的理解,现在来说说我对js闭包的理解. 要理解闭包,肯定是要先了解js的一个重要特性, 回想一下,那就是函数作用域, ...
- (原创)JS闭包看代码理解
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
随机推荐
- Spring boot传值注意事项
后台debug看到有获取到这个字段的值了,但就是传到前端后,就丢失了这个userId字段,觉得非常奇怪,想不通 后来看到 @JsonIgnore 这个注解就知道原因了 共同学习,共同进步,若有补充,欢 ...
- PLS做soft particle
这个pixel local storage frame fetch 可以一个pass做出soft particle/deferred lighting/soft edge water programb ...
- java学习记录--ThreadLocal使用案例（转）
本文借由并发环境下使用线程不安全的SimpleDateFormat优化案例,帮助大家理解ThreadLocal. 最近整理公司项目,发现不少写的比较糟糕的地方,比如下面这个: public class ...
- centos6实现基于google authenticator 的ssh登录二次验证
1.手机安装google身份验证器,在浏览器搜索身份验证器安装即可. centos6安装所需要的软件--- google-authenticator 2.查看这个包生成的所有文件和命令 3.输入goo ...
- web文件夹上传源码
文件夹数据库处理逻辑 publicclass DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject(); ...
- java+Word图片上传控件
这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用 后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下) ...
- vue中单选框与多选框的实现与美化
我们在做一些页面时,可能会用到很多的单选框和复选框,但是原生的radio和checkbox前面的原型图标或方框样式不尽人意.于是,决定自己来实现单选框和复选框.我用的是vue,所以就用vue的方式实现 ...
- 创建虚拟机，安装操作系统，xshell6远程链接
一.创建虚拟机 1. 首先安装vmware,注意在安装中,下面的两项不要勾选,一路下一步 2.完成安装打开之后,创建新的虚拟机 3.虚拟机创建完成,需要改配置 4.然后设置网段 5.查看服务,在运行状 ...
- vuex和localStorage的存储区别
vuex中的数据是存储在内存中的,localStorage中的数据是存储在浏览器的application中的
- 分享代码到GitHub
1.本地安装git 2.项目文件夹右键Git bash here,弹出git命令窗口 3.输入git init,使项目加入Git管理 4.输入git add .,将项目全部内容添加到git 5.输入“ ...