js 匿名函数和闭包函数（js练习）

一、闭包的定义：闭包说白了就是函数的嵌套，内层的函数可以使用外层函数的所有变量，即使外层函数已经执行完毕（这点涉及JavaScript作用域链）。

二、闭包的练习代码

1、首先（保证页面引入了jQuery）创建

window.document.body.innerHTML="<p>开始练习document对象</p>"

2、js创建ul和li标签，并且添加ul标签在body里面

var UL1=jQuery("<ul>,{name:'ul1'}");
UL1.appendTo(window.document.body);
var Li1=jQuery("<li>",{value:'01',text:'01li'});
var Li2=jQuery("<li>",{value:'02',text:'02li'});
var Li3=jQuery("<li>",{value:'03',text:'03li'});

Li1.appendTo(document.body.getElementsByTagName("ul"));
Li2.appendTo(document.body.getElementsByTagName("ul"));								                   			  Li3.appendTo(document.body.getElementsByTagName("ul"));

3、若执行下面的代码：

var Lis = document.getElementsByTagName("li");//找到Li标签
function showAllLi(){for(var i = 0 ; i <Lis.length ; i++)
{
Lis[i].onclick = function(){console.log(i,$(Lis[i]).text())}
}}

本想挨个输出Lis[0] 、Lis[1] 、Lis[2] 的值，但是最终结果却是：

VM30474:3 ""

三个都是一样的结果，原来i变量已经被加到了3;

（运用立即函数，不带返回值的情况）：

for(var i = 0 ; i <Lis.length ; i++)
{
Lis[i].onclick = (function(i){ console.log($(Lis[i]).text()) })(i)
}

得到的结果是，立即分别输出了三个<li>标签的内容；

但是，值得注意的是：<li>标签在chrome浏览器中，立即执行函数却并未绑定到click事件；

解决办法一（Reference1）：

for(var i = 0 ; i <Lis.length ; i++){
(function(i){
Lis[i].onclick = function(){
return function(){
console.log($(Lis[i]).text())
}
}
})(i)
}

解决办法二：

for(var i = 0 ; i <Lis.length ; i++)
{
Lis[i].onclick = function(){ console.log($(this).text()) }
}

Reference:

1、http://www.360doc.com/content/15/0615/09/10504424_478206402.shtml