对于初次步入代码界的小朋友们,听说闭包这个词,感觉摸不着头脑,所以本人亲自整理了一下理解闭包的思路,本文主要是从三个反面阐述了闭包:1,什么是闭包;2闭包的好处以及应用;3,使用闭包需要注意什么。别的不多说了,直接上码。
一,什么是闭包?
定义:函数嵌套函数,内部函数可以引用外部函数的参数和变量,变量和参数不会被垃圾回收机制所回收
例1:这是一个比较明显的闭包
function show(a){ //外面的函数 a是参数(实质也是函数show的局部变量)
var b=12;//b是局部变量
function show1(){//里面的函数
console.log(a); //=》2 //里面的函数可以访问到外面函数的参数和变量
console.log(b); //=》12
}
show1();
}
show(2);
例2:解释一下垃圾回收机制
function aaa(){
var a=12;//a是局部变量
alert(a);
a++;
}
aaa();//=》 12
aaa();//=》 12
//执行2次aaa函数,弹出的结果都是12,说明变量a每执行一次,都会被垃圾回收机制所回收,重新调用的时候就会重新执行初始的代码,如果写成闭包的形式再来看一下:
function aaa(){
var a=12;
return function(){
alert(a);
a++;
}
}
var b=aaa();
b();//=》 12
b();//=》 13
//定义函数aaa的时候,形成了函数嵌套函数的闭包,其中的变量a在第一次执行b的时候不会被垃圾回收机制所回收,所以第一次出来结果是12,然后在此基础是a++,再次执行时就变成了13。这个例子也说明的闭包的第一个好处,希望一个变量长期驻扎在内存之中
二,闭包有什么好处,应用在哪里
1,希望一个变量长期驻扎在内存之中(见例2)
2,避免全局变量的污染
例3:我们先来写个全局变量,然后定义一个函数试一试
var a=12;
function show(){
alert(a);
a++;
}
show();//=》 12
show();//=》 13
alert(a);//全局变量最后变成了=》 14,显然全局变量被污染了。
我们在写成闭包的形式来看一下:
var a=12;
var b=(function(i){
return function(){
alert(i);
i++;
}
})(a)
b();//=》 12
b();//=》 13
alert(a);//全局变量依然是=》 12,没有被污染
3,私有成员的存在
例4:
function show(){
var a=12;
function show1(){
alert(a);
a++;
}
function show2(){
alert(a);
a++;
}
return {show1:show1,show2:show2};
}
var b=show();//调用函数的返回值
b.show1();//=》 12
b.show2();//=》 13 两次执行都是调用变量他们公共的变量a
alert(a)//报错
alert(show1)//报错
alert(show2)//报错
//在这里需要知道函数本质其实是一个特殊的对象,函数里面的变量a,定义的函数show1和show2,都属于函数的私有成员,在外面访问不到会报错。
应用:例2中的(function(){})()形式,就是闭包的一个典型的影响,我们可以称作是封闭空间,也可说是模块化代码
三,使用闭包需要注意什么
使用有可能出现内存泄漏,在这里只是简单说一下原理
例5:
window.onload=function(){
var oBtn=document.getElementById('btn');
oBtn.onclick=function(){
alert(oBtn.id)//btn
}
}
//此种形式也形成了函数嵌套函数的闭包形式,点击按钮oBtn的时候,变量oBtn的点击事件得不到释放,影响cpu的性能,导致内存泄漏,这个时候可以点击之后,加oBtn.onclick=null;是变量oBtn的点击时候得到释放
注,闭包贯穿整个js,如果想彻底理解闭包很难,所以想深入理解闭包需要在工作中长期的沉淀积累,如果各位大神有更好的理解方式可以留言,我们共同探讨
网友评论