美文网首页前端开发H5学习笔记
闭包--献给初学前端的小朋友

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

作者: itsmyturn | 来源:发表于2016-12-02 10:48 被阅读1512次

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

    相关文章

      网友评论

        本文标题:闭包--献给初学前端的小朋友

        本文链接:https://www.haomeiwen.com/subject/lugfmttx.html