通俗易懂的理解javascript闭包

Posted 2020-10-04

helow，大家好，今天我们来聊聊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/