js之闭包

前言：好久没写过东西了，今天突发奇想把自己之前学习中自己对于js理解以及做的笔记整理一下分享出来，同大家一起学习进步，如有理解不到位的地方欢迎拍砖，科科^_。

米福镇楼

其实每个人对闭包理解的侧重点多少有点差异，有些人侧重在词法作用域问题，有些人侧重在变量保存问题，整体上都大同小异，这里简单说一下我对闭包的理解，希望能对你有一些启发。

对闭包的理解基本可以分这几个点来思考：

• 什么是闭包
• 闭包的基本形式
• 闭包的作用是什么

一、什么是闭包

闭包就是把一块区域封装成一块独立的空间，从而内部的变量不受外部的污染。

我们都知道在js中，函数内部的局部变量遵从变量销毁机制（回收机制），即：一个函数执行完毕之后，当再次调用该函数时，其内部的变量会被重新赋值，而不会保存上次函数执行后变量的值 举个栗子：

function a(){
    var b = 0;
    console.log(++b);
}
a(); // 1
a(); // 1  第二次调用a()结果还是1

第二次调用a()结果还是1，说明b被重新赋值了，没有保留上次执行时的结果

也遵从作用域链的原则，即：函数内的局部变量如果没有在所在作用域内找到变量的值，便会向其父级的作用域寻找变量的值（这里的作用域指词法作用域）。再举个栗子：

function a() {
    var b = 1
    function c(){
        console.log(b);
     }
     c();
}
a(); //  1   

在ES6之前js中没有块级作用域的概念，所以一个function代表一个作用域，当函数c执行时在其内部没有找到b时，变向其上级作用域a()寻找。

闭包从字面意思上来说就是把一个区域封存起来，形成一个密封的环境，那么既然是一个密封的环境，那么它之内的局部变量就是独立的，也就是说闭包存在的目的是让函数不再遵守内存销毁机制。(划重点)
注：有人从函数执行在词法作用域而非执行时的作用域来理解闭包，可能会认为仍然在执行作用域链，这里存在争议，不过我还是举个例子反驳下吧 ，科科：

function a(){
    var b = 1;
    return function(){
        b+=1;
        console.log(b);
    }
}
f = a();
f(); // 2
f(); // 3 
f(); // 4
f(); // 5      这里f形成了一个独立的作用域封装b，b不再收回收机制的限制，形成闭包。

这里就一目了然了，只有当return出去的变量，被保存成全局变量时才不会被销毁，也才形成闭包，其它的情况有可能不是闭包（这个例子下面也会用到 ）。

二、闭包的基本形式

只有当return出去的变量，被保存成全局变量时才不会被销毁，也才形成闭包，其它的情况有可能不是闭包

从这句话可以明白常见的闭包的基本形式为：
　****两个函数相互嵌套，内层的函数被return出去，并且被保存在一个变量中，这样就创建了一个闭包。****例如：

function a(){
    var b = 1;
    return function c(){
        b+=1;
        console.log(b);
    }
}
f = a();
f(); // 2
f(); // 3 
f(); // 4
f(); // 5    
.
.     

这是闭包的较为常见的基本样式，至于其它立即执行函数等样式的闭包，其实也都是这种方式的转变，下面将会讲到。

三、闭包应用中的作用

• 外部作用域获取内部作用域变量的值
• 保存内部变量的值到一个独立的环境中

在实际的js应用中，用闭包干的事挺多的，这两种是比较常见的，就这两种来给大家讲一下自己的理解。

1）外部作用域获取内部作用域变量的值

在正常的作用域链中，（如果不理解什么是作用域链，可以再去看看红宝书）内部作用域可以访问外部作用域中变量，而外部不可以拿到内部的变量，但闭包却可以实现在外部获取内部变量的值，举个栗子：

function a() {
    var c = 1;
    return function b() {
        console.log(c);
    }
}
var d = a();
d(); // 1  执行外部的函数d便获得了作用域a中的变量

例子中执行外部的函数d便获得了内部作用域a中的变量，这便是闭包的作用之一。

2） 保存内部变量的值到一个独立的环境中

由上文中我们可知，函数的内部变量遵循作用域销毁机制，当函数再次被调用时，内部变量会被重新赋值，然而有时候我们并不想让这个局部变量被重新赋值，那么这时候变用到了闭包，下面我用两个例子来说明这个问题。

例子1：

//使用闭包前
function a(){
    var b = 1;
    b+=1;
    console.log(b);
}　
a(); // 2
a(); // 2 
a(); // 2
a(); // 2      无论多少次调用结果都为2 ，说明变量所占内存被回收
.
.
.     

使用闭包前：无论多少次调用结果都为2 ，说明变量所占内存被回收。

//使用闭包后
function a(){
    var b = 1;
    return function(){
        b+=1;
        console.log(b);
    }
}
f = a();
f(); // 2
f(); // 3 
f(); // 4
f(); // 5      这里f形成了一个独立的作用域封装b，b不再收回收机制的限制，形成闭包。
.
.     

使用闭包后：这里f形成了一个独立的作用域封装b，b不再受回收机制的限制，形成闭包。

例子2：

//使用闭包前
var arr = [];
for(var i=0;i<8;i++){
    arr[i] = function(){
        console.log(i);
    }
}
arr[0]() ; // 8
arr[1]() ;// 8
arr[2]() ;// 8    每次结果都为8 
..

使用闭包前，每次调用的结果都为8，原因很简单，就是在for循环执行一遍时，里面的函数并没有执行；而当在外面调用的时候，for循环已经执行完毕，此时的i始终为8。

//使用闭包后
var arr = [];
for(var i=0;i<8;i++){
    (function(i){
        arr[i] = function(){
            console.log(i);
        }
    })(i)
}
arr[0](); //0
arr[1](); //1
arr[2](); //2
...
arr[7](); //7

使用闭包后，此时已经把要return出去的function(){ console.log(i); }直接赋值给了外部的变量arr，如果看不懂的话换成另外的写法或许就好理解了：

var arr = [];
for(var i=0;i<8;i++){
    arr[i] = (function(i){
        return function(){
            console.log(i);
        }
    })(i)
}

再进一步改写：

var arr = [];
function a(i){
    return function(){
        console.log(i);
    }
}
for(var i=0;i<8;i++){
    arr[i] = a(i);
}

此时一目了然，这也就是我们常说的立即执行函数（IIFE）中的闭包。

闭包使用需谨慎，变量一直存在于全局变量中（内存）中，有可能造成内存泄露等问题，别问我怎么知道的... 囧。

-END-