JavaScript闭包理解【关键字：普通函数、变量访问作用域、闭包、解决获取元素标签索引】
一、闭包(Closure)模糊概述
之前总觉得闭包(Closure)很抽象而且难理解，百度一下"闭包"名词，百度的解释是：“闭包是指可以包含自由（未绑定到特定对象）变量的代码块；这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义（局部变量）”
看了半天，也没有看懂闭包是什么？以下将是我对闭包(Closure)的理解，如有错误欢迎指出
二、普通函数、变量访问作用域
以上普通函数的调用fn被调用了两次，变量b却没有累加？？
对于函数f1变量b在函数外部是不能访问的
如若实现局部变量b的累加，并且可以访问该怎么做呢？
三、闭包(Closure)的清晰描述
(1)闭包(Closure)简单的可以理解成函数的嵌套，闭包就是能够读取其他函数内部变量的函数。
(2)变量长期驻留在内存中
、
以上可以看出，父函数f1中的变量b对于子函数f2是可访问的或者说是可见的，父函数f1调用一次，意味着变量b始终都是同一变量，f2中的b++,实现了对同一变量的自加,
对于子函数f2形成一个最简单的闭包(或者说函数f2维持着对外部作用域f1的引用,因此总可以访问f1作用域中的变量b)
三、闭包在对象中应用
、
四、解决获取标签索引问题
需求：当点击点击标签li时，获取标签li的内容及索引
a.理想中的方案一<未使用闭包,未解决索引值问题>
效果：未解决获取到当前点击标签对应索引值，获取到的索引总是for循环完毕后的索引i
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未使用闭包获取标签索引</title>
<script type="text/javascript">
window.onload=function(){
var oLi=document.getElementsByTagName('li');
for (var i = 0; i < oLi.length; i++) {
oLi[i].onclick=function(){//当点击li的时候，for循环已经执行完毕
alert(this.innerHTML+'index'+i);//总是i==5
}
};
}
</script>
</head>
<body>
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
</ul>
</body>
</html>
b.解决方案二<使用闭包>代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>闭包解决获取标签索引问题</title>
<script type="text/javascript">
window.onload=function(){
var oLi=document.getElementsByTagName('li');
/*for (var i = 0; i < oLi.length; i++) {
oLi[i].onclick=(function(i){ //就已经存储到缓冲中
return function(){
alert(this.innerHTML+'index'+i);
}
})(i)
};*/
for (var i = 0; i < oLi.length; i++) {
(function(i){
oLi[i].onclick=function(){
alert(this.innerHTML+'index'+i);
}
})(i)
};
}
</script>
</head>
<body>
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
</ul>
</body>
</html>
五、一道思考题（for循环与setTimeout）
上述打印结果打印了10次10,而不是0~9
原因 当 console.log 被调用的时候，匿名函数保持对外部变量 i 的引用，此时 for循环已经结束， i 的值被修改成了 10.
为了打印结果是0~9，需要在每次循环时创建变量i的拷贝修改代码如下
或修改成如下
资料参考
http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
http://www.jb51.net/onlineread/JavaScript-Garden-CN/#function.closures
JavaScript闭包理解【关键字：普通函数、变量访问作用域、闭包、解决获取元素标签索引】的更多相关文章
- JavaScript闭包理解【关键字：普通函数、闭包、解决获取元素标签索引】
以前总觉得闭包很抽象,很难理解,所以百度一下"闭包"概览,百度的解释是:“闭包是指可以包含自由(未绑定到特定对象)变量的代码块:这些变量不是在这个代码块内或者任何全局上下文中定义的 ...
- class 用法 函数变量的作用域
函数变量的作用域 1. 函数体内声明的变量 2. 参数中的变量 没有赋值的 function fn(a){} 赋值的,值不是变量 function fn(a=45){} 赋的值为变量 function ...
- JavaScript 基础(五) 函数 变量和作用域
函数定义和调用 定义函数,在JavaScript中,定义函数的方式如下: function abs(x){ if(x >=0){ return x; }else{ return -x; } } ...
- JavaScript 使用new关键字调用函数
使用new关键字调用函数 test.js 代码如下 function Person(name, age, obj) { var o = new Object(); o.name = name; o.a ...
- 【追寻javascript高手之路02】变量、作用域知多少？
前言 本来想把这个与上篇博客写到一起的,但是考虑到是两个知识点还是分开算了,于是我们继续今天的学习吧. 基本类型与引用类型 ECMAScript的的变量有两种类型: 基本类型(值类型):简单数据段 引 ...
- JavaScript学习笔记（八）——变量的作用域与解构赋值
在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...
- JavaScript高级程序设计学习(三)之变量、作用域和内存问题
这次讲的主要是变量,作用域和内存问题. 任何一门编程语言,都涉及这三个. 变量,比如全局变量,局部变量等,作用域,也分全局作用域和方法作用域,内存问题,在java中就涉及到一个垃圾回收的问题,由于ja ...
- 精读《javascript高级程序设计》笔记二——变量、作用域、内存以及引用类型
变量.作用域和内存问题 执行环境共有两种类型——全局和局部 作用域链会加长,有两种情况:try-catch语句的catch块,with语句. javascript没有块级作用域,即在if,for循环中 ...
- JavaScript读书笔记（4）-变量、作用域和内存问题
1.ECMAScript数据类型分为:基本类型值和引用类型值: ECMAScript中所有函数的参数都是按值传递的: 检查对象的类型:varible instanceof constructor Al ...
随机推荐
- 安装LoadRunner时提示缺少vc2005_sp1_with_atl_fix_redist解决方案
操作系统重装后,安装LoadRunner11时,会报缺少vc2005_sp1_with_atl_fix_redist错误,类似下图所示: LR自动安装失败,在网上下载此组件安装后依然提示此信息,最终解 ...
- 【转载】网站遭遇DDoS攻击怎么办
在网站运维过程中,有些人的网站遭遇过DDoS攻击,DDos攻击又叫做分布式拒绝服务攻击.DDos攻击将多个计算机联合起来作为攻击平台,对一个或多个目标发动DDoS攻击,从而成倍地提高拒绝服务攻击的威力 ...
- spring_04bean的生命周期
一.前言 spring框架中的bean对象生命周期是面试时常考的问题 往往笔试,面试总喜欢问生命周期的问题 二.spring_bean应用上下文生命周期图: 三.生命周期流程(bean应用上下文): ...
- [面试]中高级测试工程师必备，月薪15K+
1.你的测试职业发展是什么? 测试经验越多,测试能力越高.所以我的职业发展是需要时间积累的,一步步向着高级测试工程师奔去.而且我也有初步的职业规划,前3年积累测试经验,按如何做好测试工程师的要点去要求 ...
- 深入理解Redis内存模型
前言 Redis是目前最火爆的内存数据库之一,通过在内存中读写数据,大大提高了读写速度,可以说Redis是实现网站高并发不可或缺的一部分. 我们使用Redis时,会接触Redis的5种对象类型(字符串 ...
- DNS到底是干什么用的
DNS,DomainNameSystem或者DomainNameService(域名系统或者余名服务).域名系统为Internet上的主机分配域名地址和IP地址.用户使用域名地址,该系统就会自动把域名 ...
- SqlHelper模板
在实际开发中,我们不会直接使用拼写SQL语句的方法进行数据库操作,而是使用参数化的方法进行数据库操作,这样做的好处很多,不仅提高了程序的健壮性,同时也避免的SQL注入的问题.在这里,笔者为初学者提供一 ...
- memcached 源码阅览 一
想要快速了解memcached内部原理么?那么赶紧离开本页,这会耽误您的时间. 不知时隔多少时间,今天受了些刺激,在码农路上开始犹豫起来,但是想想自己也没其他本身,就只好放下王者荣耀,重新看看技术内容 ...
- python之匿名函数以及在内置函数中的使用
一. 匿名函数 Python使用 lambda 来创建匿名函数.所谓匿名函数,它与用 def 关键字定义的函数相比,没有函数名称. 1.1 匿名函数定义及特点 语法: lambda [para1, p ...
- Dynamics 365-部分用户访问环境缓慢
链接来自MS MVP 罗勇大神的Dynamics 365中部分账号使用系统明显缓慢怎么办?先这么干! 之前项目中也遇到过客户部分账户访问环境缓慢的问题,在此做个记录,等再碰到了,以此思路进行尝试