前端开发H5学习笔记

闭包--献给初学前端的小朋友

2016-12-02  本文已影响1512人  itsmyturn

对于初次步入代码界的小朋友们,听说闭包这个词,感觉摸不着头脑,所以本人亲自整理了一下理解闭包的思路,本文主要是从三个反面阐述了闭包: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,如果想彻底理解闭包很难,所以想深入理解闭包需要在工作中长期的沉淀积累,如果各位大神有更好的理解方式可以留言,我们共同探讨

上一篇 下一篇

猜你喜欢

热点阅读