js中闭包的使用

js的闭包使用

在js中，变量的作用域分为局部变量和全局变量，在函数体中，是能够访问全局变量的，相反，在函数外部是无法访问函数内部的变量，那么有什么办法可以在函数外部访问函数内部的变量呢，即闭包。

function f(){
    var n=1;
    function f1(){
        alert(n);
    }
    return f1;
}
var a=f();
a();//1

这就是一个闭包的例子，它能够读取到函数f()中的变量n, 即在函数外部读取函数内部的变量。
使用闭包的另一个好处，在于可以避免变量的重名和变量的污染，当一个代码由多人编写时，重名是不可避免的，所以使用闭包可以将自己的变量私有化，这样就能封装自己的代码。
这是一个初始化图片例子：

/**
 * Created by zxw on 2017/5/6.
 */
var loopPlayerInit=(function(){
    var $buttleft=null,
        $buttright=null,
        $imglist=null,
        original=['25px','100px'],
                imgAll=createImg([['img/cat1.jpg','img/cat2.jpg','img/cat3.jpg','img/cat4.jpg']
        ,['img/cat5.jpg','img/cat6.jpg','img/cat7.jpg','img/cat8.jpg']]),
        imgArrIndex=0,
        imgAng=45;
    function init(){
        $buttleft=$("#buttleft");
        $buttright=$("#buttright");
        $imglist=$(".wrap ul li");
        configer();
        setEvent();
    }
    function configer(){
        var ang=6;
        var ini=-6;
        $imglist.css("transform-origin","");
        $imglist.each(function (i) {
            var $this=$(this);
            $this.transition({rotate:ini+(ang*i)});
        })
    }
    function setEvent(){
        $buttleft.on("click",function(){
            anigo(-1);
        });
        $buttright.on("click",function(){
            anigo(1);
        });
    }
    function createImg(arr){
        var imgArr=[];
        for(var i in arr){
            imgArr[i]=[];
            for(var x in arr[i]){
                imgArr[i][x]=new Image();
                imgArr[i][x].src=arr[i][x];
            }
        }
        return imgArr;
    }
    function anigo(d){
       //...左滑动右滑动的时间函数
            }    
    }
    return init;
})()
loopPlayerInit();

这个函数是一个立即执行匿名函数，函数定义了很多变量，最后返回init,使用闭包我们就可以随心所欲的使用了里面的所有变量了。