什么是闭包

当一个其他函数可以访问和操作另一个函数作用域中的变量时，就构成了闭包。

闭包之所以有这个能力，就是因为这些变量存在于函数声明时所处的作用域。即便这些函数最后可能在这个作用域之外执行，但是他记住的是函数声明时的作用域，而不是执行时的。

最常见的创建闭包的方式就是函数嵌套另一个函数或者函数作为参数或返回值。

出于种种原因，我们有时候需要得到函数内的局部变量。但是正常情况下，这是办不到的，因为根据作用域的知识，这条链只能向上不能往下。

所以只有通过变通方法才能实现。那就是在函数的内部，再定义一个函数。

function f1() {
    var n = 999;
    function f2() {
        alert(n);  // 999
    }
}

在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

而闭包要解决的问题就是:从外部读取局部变量的值。

既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗。

function f1() {
    var n = 999;
　　function f2() {
        alert(n);
　　}
    return f2;  // 将f2返回
}
var result = f1(); 
result();  // 999

注意：f1执行之后他的作用域不会立即销毁，而是保留在内存中，此时函数内的变量n依然存在，所以，当调f2时，可以沿着作用域链找到n。

案例

const a = 1; b = 2 
function bar(c) { 
    console.log(a,b,c)  // a 没有在上级作用域中定义,所以直接报错,除非把上边的a,b进行定义
}
function foo(a) { 
    var b = a + 1;
    bar(4);
}
const result1 = foo(2);

function foo(a) { 
    var b = a + 1;
    function bar(c) { 
        console.log(a,b,c)
    }
    return bar
}
const result2 = foo(2);
result2(4);

未命名文件 (1).png

再次理解闭包的概念

各种专业文献上的"闭包"（closure）定义非常抽象，很难看懂。通俗的理解是，闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

常见的一些闭包

function foo(a) {
    setTimeout(function timer() {         
        console.log(a)     
    }, 1000) 
} 
foo(2);

foo执行1000ms后，它的内部作用域不会消失，timer函数依然保有 foo 作用域的引用。timer函数就是一个闭包。

定时器，事件监听器，Ajax请求，跨窗口通信，Web Workers或者其他异步或同步任务中，只要使用回调函数，实际上就是闭包。

for(var i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i);
    }, i * 1000);
}

上面的这段代码，预期是每隔一秒，分别输出 0, 1, 2, 3, 4, 但实际上依次输出的是 5, 5, 5, 5, 5。首先解释5是从哪里来的，这个循环的终止条件是 i 不再 < 5，条件首次成立时 i 的值是5，因此，输出显示的是循环结束时 i 的最终值。

延迟函数的回调会在循环结束时才执行。事实上，当定时器运行时即使每个迭代中执行的都是 setTimeout(.., 0),所有的回调函数依然是在循环结束后才会被执行。因此每次输出一个5来。

for(var i = 0; i < 5; i++) {
    (function(j) {
        setTimeout(() => {
            console.log(j);
        }, j * 1000);
    })(i)
}

代码改成上面这样，就可以按照我们期望的方式进行工作了。这样修改之后，在每次迭代内使用 IIFE（立即执行函数）会为每个迭代都生成一个新的作用域，使得延迟函数的回调可以将新的作用域封闭在每个迭代内部，每个迭代内部都会含有一个具有正确值的变量可以访问。

闭包的用途

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

怎么来理解这句话呢？请看下面的代码。

function f1() {
    var n = 999;
    nAdd = function() {
        n += 1
    }
    function f2() {
        alert(n);
    }
    return f2;
}
var result = f1();
result();  // 999
nAdd();
result();  // 1000

在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。

为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

这段代码中另一个值得注意的地方，就是"nAdd = function() {n+ = 1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

使用闭包的注意点

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成"定义在一个函数内部的函数"。

总结

闭包是指有权访问另一个函数作用域中变量的函数。

闭包通常用来创建内部变量，使得这些变量不能被外部随意修改，同时又可以通过指定的接口来操作。

闭包总是弄不清？小学生都会！

什么是闭包

再次理解闭包的概念

闭包的用途

使用闭包的注意点

总结