javascript闭包入门

作者：王先帅

  在我的另一篇文章中已经对javascript函数进行了入门学习，今天我们就来聊一聊javascript函数比较重要的一个技术点——闭包。

1.了解作用域链的概念

  在了解闭包之前，先对我的另一篇博文的变量的作用域再进一步的复习一下，这里我列出两个例子来做进一步讲解，也再引入一个作用域链的概念，请看代码：

  var a=1;

function Fun(){

  var b=2;

function Fun2(){

  var c=3;

} 

};

大家看这段代码，a为全局变量，b为Fun中的变量，c为Fun2中的变量，通过上篇文章的内容可以了解到，Fun无法访问Fun2函数中的变量c，因为c的作用域仅为Fun2内部，这里就多做解释了，但是，大家可以看Fun2函数，因为他是最内部的函数，他可以用到自己的本身的变量，也可以用Fun函数的变量，和全局变量，也就是说，Fun2函数可调用本身变量和父类变量，那么Fun2函数所能调用的这一串变量就成为作用域链。这个概念很好理解，这里就不多做解释了。

2.词法作用域

 这里来和大家了解一下一个比较容易出错的例子：

function Fun1（）{

var a=1;

return Fun2();

}

 function Fun2(){

return a;

};

这里如果要是调用Fun1();函数会返回什么呢？请看控制台输出：

                                                                                

那通过上一小节的学习，内部的子函数不是应该能访问父类函数的变量吗？其实这就涉及到了词法作用域的问题，每个函数函数在被定义时都会创建一个自己的作用域，在Fun2被定义时Fun1中的函数只属于它自己。所以这个特例还是要着重记录一下。

  讲完了作用域链，我们就正式来看一下闭包：

  1.闭包的第一种示例

function F1(){

var b=1;

return fucntion(){

return b;

}

}

这个时候调用b，没有悬念，肯定变量b是没有定义的，因为变量b存在与函数F1中，全局无法访问调用，其实，我们可以看一下，函数F1的返回值，当调用F1返回值值为function(){return b};那么我们可以将这个返回值赋值给一个全局变量，例如：var c=F1();这个时候c=function(){return b;}，那么我们只需要执行这个c函数就可以return b了。

这个时候就可以在函数外获取函数内的变量了。这个也是闭包应用的一种。

                                                                                        

2.闭包的第二种示例

这里的第二种示例与第一种示例其实是有着相似的地方的，例如：

function F1(){

var b=1;

a=return function(){

return b;

}

}                                                                                  

                                                                                                   

这里的代码与上面的代码有着相似也有着不同的地方，这里a=function(){return b},大家看a变量的前面没有var，那么这个意思就是a为全局变量，这个大家还是要记住的。在函数内部，变量前没有var时，其变量就为全局变量。

3.闭包的第三种示例

这里的第三种示例是关于函数参数的，亲看代码：

function a(arg){
var n=function(){
return arg;

}

arg++;

return n;
}

                                                                                             

这里就可以对a函数的参数进行调用，同时也可以对其进行操作，这里要注意一下，为什么返回的是101呢，因为这里a函数已经执行了一遍之后才会返回函数n，这里又把n赋值给了c，所以在执行c函数的时候arg已经进行过了自增的操作。

4.闭包的简单应用-1

var setvalue,getValue;

（function(){

var value=0;

setValue=function(z){

value=z;

};

getValue=function(){

}

}）（）；

                                                                                            

这个小应用就是函数闭包的一个比较简单常见的，这里将secret值放在函数内部以至于其不被外界的一些变量所影响，通过自调用来执行本身的函数，自身执行后会有两个返回值函数，一个是setValue,一个事getValue，执行setvalue();可以给其传一个参数z，这时候secret就会被改为z，当调用下面getValue时，因为他会返回secret所以，这个时候就返回setValue所传的z值，这是一个闭包的简单而且广泛的应用。

6.闭包的简单应用-2

其实我们在实际的开发过程中都经常要做一个功能，就是后台给你一串数据，就好比一个数组吧，这个数组可能是商品的名字也可能是用户的名字，要求你每隔一秒钟显示一个用户的名字，直到这个数组显示完。这个需求是我在实际开发过程中遇过的一个需求，我只是把他简化之后拿到了这篇文章中，实际比这个要复杂一点，就上面这个需求如果需求单拿给你你要怎么做呢，我想肯定第一时间会想到迭代，那么我们现在就来看一下迭代怎么将这个需求实现呢？请看代码：

function nextMath(arg){

var i=0;

return function(){

return arg[i++];

}

}

大家看上面的那个代码，arg你就把它当作有一个数组，例如arg=[1,2,3,4,5,6,7];在你执行nextMath函数之后返回function(){return arg[i++]}这个函数，第一次执行返回function(){return arg[0]};第二次返回function(){return arg[1]},一次类推。然后我们把这个返回函数赋值给一个next变量，var next=nextMath(arg);这样再执行这个返回函数即next();这样就会依次return arg[0],return arg[1],我们也就完成了真正next函数的编写;请看控制台的输出：

                                                                       

这样的话，函数的闭包就差不多学完了，不过这个仅仅是一个开始，想要把闭包运用及了解的更加深入还要多练习多做项目。