zoukankan      html  css  js  c++  java
  • 通俗易懂的理解javascript闭包

    hellow,大家好,今天我们来聊聊javascript的闭包。

    什么是闭包

    官方解释太抽象,这里就不说了,我们先来看一段代码。

    function A(){
        function B(){
            console.log("Hellow 闭包");
        }
        return B;
    }
    var C = A();
    C();//Hellow 闭包

    很好,一目了然,这就是一个最简单的闭包。简单的说就是“函数A的同级变量C引用函数A内部的函数B”,怎么样,是不是一下子就懂了呢。

    闭包的作用

    说闭包的作用之前,我们先了解javascript变量的作用域和javascript的垃圾回收机制(GC:Garbage Collecation)。

    变量分为两种:全局变量和局部变量。

    而Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。

    var num = 0;
    function A(){
        console.log(num);//0
    }
    A();

    但是呢,在函数外部却读取不了函数内的局部变量。

    function A(){
        var num = 0;
    }
    A();
    console.log(num);//error

    我们有时候需要得到函数内的局部变量,正常情况下是办不到的,所以我们需要变通一下,换个思路,那就是在函数的内部,再定义一个函数。

    function A(){
        var num = 0;
        function getNum(){
            console.log(num);
        }
        return getNum();
    }
    A();//0

    说完了作用域,再来看看javascript的垃圾回收机制(GC:Garbage Collecation),通常我们使用new创建对象,GC负责回收对象占用内存区域。GC在回收内存时,首先会判断该对象是否被其它对象引用。在确定没有其它对象引用便释放该对象内存区域,否者这个对象就会一直保存在内存中。

    function A(){
        var num = 0;
        num++;
        console.log(num);
    }
    A();//1
    A();//1
    A();//1

    好,现在我们再来看一段闭包的代码。

    function A(){
        var num = 0;
        function addNum(){
            num++;
            console.log(num);
        }
        return addNum;
    }
    var C = A();
    C();//1
    C();//2
    C();//3

    看,这里C其实就是函数addNum,所以它获取到了函数A内部的值。

    并且因为C引用了addNum,而addNum是定义在A的内部,所以GC不会回收A,num变量在每次C运行完了之后也就不会被释放。

    所以,闭包的主要作用有两个,第一个作用就是:可以读取函数内部的变量。第二个作用就是:让这些变量的值始终保持在内存中。

    注意事项

    因为闭包会使得函数中的变量都被保存在内存中,会导致内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题。解决方法是,在退出函数之前,将不使用的局部变量删除就行,例如"num = undefined",轻松加愉快。

    原创文章,欢迎转载,由于作者水平有限,会经常更新知识点以及修正一些错误,因此转载请保留原出处,以避免陈旧错误知识的误导。

    原文地址:http://www.cnblogs.com/dongguoqiang/

  • 相关阅读:
    [BZOJ3043]IncDec Sequence
    【NOIP2015】字串
    [NOIP]2016天天爱跑步
    【NOIP2015】运输计划
    [poj3565]Ants
    【ZOJ2760】How Many Shortest Path
    [POJ3281] Dining
    P1077摆花
    校内测之zay与银临 (day2)
    P1880石子合并
  • 原文地址:https://www.cnblogs.com/dongguoqiang/p/7455100.html
Copyright © 2011-2022 走看看