闭包
什么是闭包
闭包就是一个函数,两个函数彼此嵌套,内部函数就是闭包 形成闭包条件是内部函数需要通过return给返回出来.
<script type="text/javascript">
function f1() {
var name="tom";
var age=18;
function f2() {
console.log("名字:"+name+"--身高:"+age);
}
return f2;
}
var ff=f1();//ff就是一个闭包,其和f2共同指向同一个function
ff();
</script>
解释:
f1()调用完成后,垃圾回收器会回收name和age,但是因为ff又去指向function,这样function内部的age和name仍然存在,并且与外部变量无关
闭包使用规则
同一个闭包机制可以创建多个闭包函数出来,它们彼此没有联系,都是独立的。 并且每个闭包可以保存自己个性化的信息。
<script type="text/javascript">
function f1(){
var name="tom";
var age=18;
function f2(){
console.log("名字:"+name+",年龄:"+age);
}
return f2;
}
var ff1=f1();
var ff2=f2()
var ff3=f3();
</script>
闭包案例
闭包生成数组元素
<script type="text/javascript">
var arr=new Array();
for(var i=0;i<4;i++){
arr[i]=function () {
console.log(i);
return i;
}
}
arr[2](); //4
arr[1](); //4
arr[0](); //4
arr[3](); //4
</script>
使用闭包
<script type="text/javascript">
var arr=new Array();
for(var i=0;i<4;i++){
arr[i]=f1(i);
}
function f1(n) {
function f2() {
console.log(n)
}
return f2;
}
arr[0](); //0
arr[1](); //1
arr[2](); //2
arr[3](); //3
</script>
闭包事件操作
<script type="text/javascript">
window.onload=function () {
var cars=document.getElementsByTagName('li');
//可以利用闭包给每个元素设置独立的函数处理
//并且函数内部也有独特的下标信息供访问
for(var i=0;i<3;i++){
cars[i].onmouseover=over(i);
cars[i].onmouseout=out(i);
}
var col=['red','green','blue'];
function over(n) {
function f2() {
cars[n].style.backgroundColor=col[n];
}
return f2;
}
function out(n) {
function f2() {
cars[n].style.backgroundColor="";
}
return f2;
}
}
</script>