js闭包浅了解

浏览数：36 / 时间：2015年06月09日

js闭包浅理解

要理解闭包，得先知道js的变量作用域，在js中，有两种变量作用域：

全局作用域
局部作用域

一、在函数内可以访问全局变量

比如，下面的例子：

<!--lang:js-->
<script>
    var n = 100;
    function f1(){
        console.log(n);
    }
    f1()//返回100
</script>

上面的例子很简单，下面是另一种情况。

二、在函数外无法读取函数内的局部变量

还是一个小例子：

<!--lang:js-->
<script>
function f1(){
    n = 100;
}
f1();
console.log(n);//发挥100
</script>

咦？怎么回事，不是无法读取内部的局部变量吗？怎么可以再控制台输出？？

这里有个注意的地方，在函数内定义局部变量，得用var进行生命，否则的话定义的还是全局变量！

<!--lang:js-->
<script>
function f1(){
    var n = 100;
}
f1();
console.log(n);//error
</script>

这些是不是也很容易理解？那么我们就继续讨论下去。上面说了，我们在函数外无法访问函数内的局部变量，那么，这就是绝对的吗？在函数外就永远不能获得函数内的局部变量了吗？

必然不是！

三、如何从函数外访问函数内的局部变量？

很多时候我们需要访问函数内的局部变量，当然用常规方式肯定不行，那么我们就得变通一下：

我么可以在函数内在定义一个函数，就像这样：

<!--lang:js-->
<script>
function f1(){
    n = 100;
    function f2(){
        console,log(n);
    }
}
</script>

那么在f1中的所有局部变量对于f2都是可见的，但是反过来f2中的局部变量却不让f1看到。这就是js特有的“链式作用域”结构。

那么，既然f2可以访问f1的内容，我们就让f2作为返回值，这样，我们不就可以在f1外部读取它的内部变量了吗？

那么，我们让f2访问f1，然后在返回f2，就像这样：

<!--lang:js-->
<script>
function f1(){
    var n = 100;
    function f2(){
        console.log(n);
    }
    return f2();
}
f1();
</script>

那么，这个f2函数，就是闭包！

四、闭包

各种资料对于闭包的理解很抽象，从我们的实例来看，闭包就是一个能访问其他函数内部变量的函数！

大家可以以上面的函数f2作为参考分析一下，我们通过正常的方法无法从外部获取f1中的局部变量n，但是f1内部的函数f2便可以访问f1的局部变量n，因为对于f2来说，f1是父辈，就像基因遗传一样，在f2中，可以顺着这个纽带向上去找f1中的变量，这样，f2读取了f1的变量后，我们将f2返回，我们在外部调用f1的时候，返回的是f2，而f2可以读取f1中的变量。

好吧，上面一大段确实很绕，不过，就我自己来看，还是有了一丝清晰的脉络。

因为只有在一个函数内部的函数才可以读取其变量，那么闭包也可以这么理解：

闭包就是定义在一个函数内的函数。