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,使用闭包我们就可以随心所欲的使用了里面的所有变量了。