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 ...
随机推荐
- java线程基础巩固---多线程与JVM内存结构的关系及Thread构造函数StackSize的理解
继续学习一下Thread的构造函数,在上次[http://www.cnblogs.com/webor2006/p/7760422.html]已经对如下构造都已经学习过了: 多线程与JVM内存结构的关系 ...
- hashmap C++实现分析及std::unordered_map拓展
今天想到哈希函数,好像解决冲突的只了解了一种链地址法而且也很模糊,就查了些资料复习一下 1.哈希Hash 就是把任意长度的输入,通过哈希算法,变换成固定长度的输出(通常是整型),该输出就是哈希值. 这 ...
- 系列文章--Python Web编程
我从网上找到了其他园友的文章,很不错,留着自己学习学习. Python Web编程(一)Python Web编程(二)Python Web编程(三)Python Web编程(四)Python Web编 ...
- 第六章 组件 63 组件传值-父组件向子组件传值和data与props的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- org.apache.ibatis.binding.BindingException: Parameter '0' not found. Available parameters are [arg1, arg0, param1, param2]
报错信息如下: org.apache.ibatis.binding.BindingException: Parameter '0' not found. Available parameters ar ...
- phpStudy环境下composer的安装
前言 原来是做php开发的,现在转行前端工程师,因为很久没有接触了,可能会有其他问题,这里简单记录一下,后期遇到什么问题再进行更新~ 话说下载特别慢所以这里给个网盘链接Composer-Setup.e ...
- elementUI + vue 输入框只能输入正整数 不能输入字母 e 以及+ - 号
<el-input :inline="true" v-model="dialogForm.closeTime" onKeypress="retu ...
- ibatis和mybatis中的BatchExecutor
ibatis中的的处理方法 spring集成了ibatis的批量提交的功能,我们只要调用API就可以了 首先在你的dao中需要继承org.springframework.orm.ibatis.supp ...
- [Centos7]Centos7安装
Centos7安装 安装wget yum -y install wget 更换镜像源 # 备份本地yum源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum. ...
- Confluence 6 编辑一个附加文件的属性
你需要具有空间的 添加附件(Add Attachment)权限来编辑文件的属性. 希望编辑一个附加文件的属性: Go to > Attachments 单击你希望编辑附件边上的 属性(Prop ...