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闭包理解【关键字：普通函数、变量访问作用域、闭包、解决获取元素标签索引】
一.闭包(Closure)模糊概述 之前总觉得闭包(Closure)很抽象而且难理解,百度一下"闭包"名词,百度的解释是:“闭包是指可以包含自由(未绑定到特定对象)变量的代 ...
- JavaScript 使用new关键字调用函数
使用new关键字调用函数 test.js 代码如下 function Person(name, age, obj) { var o = new Object(); o.name = name; o.a ...
- 深入解析Javascript中this关键字的使用
深入解析Javascript中面向对象编程中的this关键字 在Javascript中this关键字代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如: function TestFun ...
- 第一百二十九节，JavaScript，理解JavaScript库
JavaScript,理解JavaScript库 学习要点: 1.项目介绍 2.理解JavaScript库 3.创建基础库 从本章,我们来用之前的基础知识来写一个项目,用以巩固之前所学.那么,每个项目 ...
- JavaScript 数组，字符串，函数
数组 创建数组 利用 new 创建数组 var arr = new Array(); console.log(arr); // Array(0) 数组字面量创建 var arr = []; // 空数 ...
- 理解javascript的闭包,原型,和匿名函数及IIFE
理解javascript的闭包,原型,和匿名函数(自己总结) 一 .>关于闭包 理解闭包 需要的知识1.变量的作用域 例1: var n =99; //建立函数外的全局变量 function r ...
- javascript深入理解js闭包
一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...
- 对于 Javascript 闭包理解
一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...
- javascript深入理解闭包
一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...
随机推荐
- Atitit 深入理解抽象类与接口 attilax总结
Atitit 深入理解抽象类与接口 attilax总结 1.1. 主要区别接口侧重于动作抽象..抽象类是属性名词抽象..1 1.2. 抽象层次类>>抽象类>>接口1 1.3. ...
- PDO 数据访问抽象层
1.操作其它数据库 (1)造对象 $dsn = "mysql:dbname=test3;host=localhost"; //数据源:两个参数:数据库驱动,链接数据库 $pdo = ...
- WPF入门教程系列十九——ListView示例(一)
经过前面的学习,今天我做一个比较综合的WPF程序示例,主要包括以下功能: 1) 查询功能.从数据库(本地数据库(local)/Test中的S_City表中读取城市信息数据,然后展示到WPF的Windo ...
- 用SQL语句创建四个表并完成相关题目-10月18日更新
1. 查询Student表中的所有记录的Sname.Ssex和Class列. 2. 查询教师所有的单位即不重复的Depart列. 3. 查询Student表的所有记录. 4. 查询Score表中成绩在 ...
- 【hbase0.96】基于hadoop搭建hbase的心得
hbase是基于hadoop的hdfs框架做的分布式表格存储系统,所谓表格系统就是在k/v系统的基础上,对value部分支持column family和column,并支持多版本读写. hbase的工 ...
- 使用Event Message 对 Package 进行Troubleshoot
在SSIS Server上,发现一个Package Job运行异常,该Package处于僵死状态.从 Job Activity Monitor中看到该Job一直处于运行状态,但是,DW中没有执行任何Q ...
- Autocomplete 自动补全（Webform实战篇）
开篇语 因为项目中需要用到一个自动补全的功能,功能描述: 需求一:新增收件人的时候,自动下拉显示出数据库中所有的收件人信息(显示的信息包括:姓名-收件地址-联系方式) 需求二:选中一个值得时候,分别赋 ...
- EntityFramework之数据库以及表基本创建（一）
前言 之前有学过EF一段时间那时EF才4.0似乎还不太稳定,而现在EF都已7.0版本,同时AspNet Identity都与此大有关联,看来是大势所趋于是开始学习EF,在学EF过程中也遇到一些小问题, ...
- EasyUI DataGrid 实用例子(2015-05-22)
代码经过精心改良,可以直接使用,具体看注释吧. 1,前台,代码如下: <%@ Page Language="C#" AutoEventWireup=" ...
- C算法编程题（七）购物
前言 上一篇<C算法编程题(六)串的处理> 有些朋友看过我写的这个算法编程题系列,都说你写的不是什么算法,也不是什么C++,大家也给我提出用一些C++特性去实现问题更方便些,在这里谢谢大家 ...