关于JavaScript闭包的个人思考与应用

一、闭包的概念

先说一下百度百科的解释——“闭包是可以包含自由（未绑定到特定对象）变量的代码块；这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义（局部变量）。“闭包” 一词来源于以下两者的结合：要执行的代码块（由于自由变量被包含在代码块中，这些自由变量以及它们引用的对象没有被释放）和为自由变量提供绑定的计算环境（作用域）。

以上的闭包解释其实已经不局限于JavaScript了，其实很多语言都支持闭包这个概念。下面我来通俗的说一下我对闭包的理解——闭包就是可以用于访问其他函数内部变量并且将其“包养”起来的函数。下面通过代码来讲解下作用域进而引出闭包的使用。

二、作用域与闭包

先看下面两个例子

代码一：

var name = "The Window";var object = {　　name : "My Object",　　getNameFunc : function(){　　　　return function(){　　　　　　return this.name;　　　　};　　}};alert(object.getNameFunc()());

代码二：

var name = "The Window";var object = {　　name : "My Object",　　getNameFunc : function(){　　　　var that = this;　　　　return function(){　　　　　　return that.name;　　　　};　　}};alert(object.getNameFunc()());

代码一 执行弹出来的是“The Window”，代码二执行弹出来的时“My Object”。

结果解释：代码二中的getNameFunc方法比代码一中多定义了一个that变量并且将它指向this，当它执行到object.getNameFunc()()得到了内部嵌套函数返回的that.name，此时that这个变量在嵌套函数中并没有定义，于是它就会到定义这个嵌套函数的作用域（getNameFunc函数内的作用域）中找that，由于嵌套函数中使用了外部getNameFunc函数中定义的that，所以在执行完object.getNameFunc()这个方法后，that变量保存依然在内存中，这便是闭包的神奇之处，由于that=this，而此时this指向的是调getNameFunc方法的对象即object，所以that.name="My Object"。

而在在代码一中在执行完object.getNameFunc()()得到了内部嵌套函数返回的this.name，此时由于this在嵌套函数中，this并不指向调用getNameFunc方法的object，而是指向全局变量Window，this.name=Window,name 于是便得到了“The Window” 。

总结：要理解闭包得先理解作用域的概念，当函数内部引用了了自由变量（函数体内没有定义的变量），函数便会到定义自己的作用域中找这个变量，而这个变量在这个函数执行之前会一直保存在内存中（尽管定义它的方法执行完）等待调用，我们可以将调用该自由变量的函数看成闭包，闭包“包养”了这个自由变量。 

三、闭包的使用

首先看一段代码，for循环给元素绑定事件：

现有如下html结构

<ul> <li>click me</li> <li>click me</li> <li>click me</li> <li>click me</li></ul>

执行如下JavaScript代码

var elements=document.getElementsByTagName('li');    var length=elements.length;    for(var i=0;i<length;i++){        elements[i].onclick=function(){        alert(i);    } }

结果分别依次点击4个li标签弹出的均为“4”，而不是”0“，”1“，”2“，”3“这是为什么呢？

因为绑定的事件方法是异步执行的，当他们还没有执行的时候，for循环就完毕了，此时i=4，而每个事件函数中的alert(i),均指向全局变量i，所以弹出的都是“4”。

下面我们用闭包“包养”自由变量 这一特性，让它依次弹出”0“，”1“，”2“，”3“，将JavaScript按如下写：

var elements=document.getElementsByTagName('li');    var length=elements.length;    for(var i=0;i<length;i++){        elements[i].onclick=(function(a){            return function(){            alert(a);            }                  })(i);    }//用此代码可以依次弹出 0，1，2，3（闭包可以“包养”外部函数变量

这里我们使用了一个自执行的匿名函数来将原来的事件函数返回， 把for循环中每一次的i的值传入该匿名函数，它内部返回的事件函数便成了一个闭包，

可以包养每一次传入的i值，将它保存在内存中，于是就达到了目的。

以上只是个人的一些思考，可能表述有误，欢迎指正！