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 ...
随机推荐
- Linux——grep binary file
原创声明:本文系博主原创文章,转载或引用请注明出处. grep命令是linux下常用的文本查找命令.当grep检索的文件是二进制文件时,grep命令会提示: $grep pattern filenam ...
- Solr初步
Solr是一个独立的,基于Lucene的全文搜索服务器企业级搜索应用服务器,它对外提供API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引(solr生成倒排索引,数 ...
- mybatic进阶遗留
参考文章: MyBatis的架构设计以及实例分析 MyBatis缓存机制的设计与实现 MyBatis的一级缓存实现详解 及使用注意事项 MyBatis的二级缓存的设计原理
- js栈和堆的区别
一. 堆(heap)和栈(stack) 栈(stack)会自动分配内存空间,会自动释放.堆(heap)动态分配的内存,大小不定也不会自动释放. 二. 基本类型和引用类型 基本类型:简单的数据段,存 ...
- luogu3720 [AHOI2017初中组]guide[最短路]
初中组..唉 题意有点误解,当前在x点走一步,gps产生代价条件是沿非x到n的最短路走. 直接倒着跑两遍$i\sim n$的两种最短路,然后枚举每条边走的时候是否可以在两种最短路上,不是就产生1个代价 ...
- 04 vue-cli 脚手架、webpack-simple模板项目生成、组件使用
alice https://www.cnblogs.com/alice-bj/p/9317504.html https://www.cnblogs.com/alice-bj/p/9318069.htm ...
- 2. SaltStack数据系统: Grains、Pillar
1. SaltStack数据系统 Grains (谷物) Pillar (支柱) 2.Grains Grains存放着Salt命令启动时收集的信息,运行时不收集 2.1 信息查询 收集资产 网卡,i ...
- 【leetcode】1284. Minimum Number of Flips to Convert Binary Matrix to Zero Matrix
题目如下: Given a m x n binary matrix mat. In one step, you can choose one cell and flip it and all the ...
- easyui datagrid 选中行效果
转:http://blog.csdn.net/hzw2312/article/details/27534065 jquery easyui datagrid 获取Checked选择行(勾选行)数据 g ...
- hdu 5792 World is Exploding 树状数组+离散化+容斥
World is Exploding Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Other ...