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 ...
随机推荐
- 转 SQL连接查询语句（内、外、交叉和合并查询）
转 http://blog.csdn.net/u010011371/article/details/50596535 1.内连接 (INNER JOIN) 内连接也称自然连接,它是根据两个或多个表中的 ...
- 同一电脑如何安装多个jdk
1.安装对应的jdk 本机测试只安装jdk1.7和1.8 2.切换jdk 以我的环境为例,一开始装的是jdk1.7,要切换到jdk1.8时,需修改以下内容 环境变量,该为对应jdk的bin路径 修改注 ...
- Java常用类(一)Math类和Random类
一.Math类 Math类中有一些常用的数学函数,比较简单,不进行详细解释,仅举例说明: 1.绝对值和取整 import java.lang.Math; public class Mat { publ ...
- 报表开发神器！DevExpress Reporting v19.1全平台新功能解析
行业领先的.NET界面控件DevExpress Reporting全新发布了v19.1版本,本文主要为大家介绍.NET Reporting v19.1中发布的所有平台的新功能,欢迎下载v19.1试用, ...
- Json中相关注解解释说明
@JsonProperty用法: @JsonProperty 此注解用于属性上,作用是把该属性的名称序列化为另外一个名称,如把trueName属性序列化为name,@JsonProperty(“nam ...
- jQuery和vue 设置ajax全局请求
一个很常见的问题,如果用户登录网站session过期,需要用户返回登录页面重新登录. 如果是http请求可以在后台设置拦截器,统一拦截并跳转.但是ajax方法并不能通过后台直接跳转. 所以我们可以写一 ...
- hdu 6088 Rikka with Rock-paper-scissors (2017 多校第五场 1004） 【组合数学 + 数论 + 模意义下的FFT】
题目链接 首先利用组合数学知识,枚举两人的总胜场数容易得到 这还不是卷积的形式,直接搞的话复杂度大概是O(n^2)的,肯定会TLE.但似乎和卷积有点像?想半天没想出来..多谢Q巨提醒,才知道可以用下面 ...
- 安装交叉工具链arm-linux-gcc
基本步骤如下: (1)建立目录 $ sudo mkdir /usr/local/arm (2)复制文件 文件arm-linux-gcc-4.4.3.tar.gz,放在/var/ftp中,进入ftp,$ ...
- mysql8.0.11安装
1.下载mysql-->下载 2.解压 3.添加my.ini配置文件 [mysqld]# 设置3306端口port=3306# 设置mysql的安装目录basedir=C:\wnmp\mysql ...
- Linux之防火墙iptables
一.检查iptables服务状态 1.首先检查iptables服务的状态 [root@bogon ~]# service iptables status iptables: Firewall is n ...