我从来不理解JavaScript闭包，直到有人这样向我解释它

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第29天，点击查看活动详情

为什么需要闭包

首先我们来看一下为什么需要闭包。先看下嘛的例子：

function eat(){
    var food = "鸡翅";
    console.log(food);
}
eat(); // 鸡翅
console.log(food); // 报错

在上面的例子中，我们声明了一个名为 eat 的函数，并对它进行调用。

JavaScript 引擎会创建一个 eat 函数的执行上下文，其中声明 food 变量并赋值。

当该方法执行完后，上下文被销毁，food 变量也会跟着消失。这是因为 food 变量属于 eat 函数的局部变量，它作用于 eat 函数中，会随着 eat 的执行上下文创建而创建，销毁而销毁。所以当我们再次打印 food 变量时，就会报错，告诉我们该变量不存在。

那么，如何在函数销毁后也能继续使用变量 food 呢？

这就涉及到了要使用闭包。

什么是闭包

要解释闭包，可以从广义和狭义上去理解。

• 广义上的闭包：所有的函数就是闭包。

• 狭义上的闭包：需要满足两个条件。

  • 一个函数中要嵌套一个内部函数，并且内部函数要访问外部函数的变量
  • 内部函数要被外部引用

关于广义上闭包的含义，估计很多人很难理解，我就正常写个函数，怎么这玩意儿就变成闭包了？

关于这一点，我们稍后再来解释。

我们先来看一下狭义上的闭包。

function eat(){
    var food = '鸡翅';
    return function(){
        console.log(food);
    }
}
var look = eat();
look(); // 鸡翅
look(); // 鸡翅

在这个例子中，eat 函数返回一个函数，并在这个内部函数中访问 food 这个局部变量。调用 eat 函数并将结果赋给 look 变量，这个 look 指向了 eat 函数中的内部函数，然后调用它，最终输出 food 的值。

按照之前的说法，这个 food 变量应该当 eat 函数调用完后就销毁，后续为什么还能通过调用 look 方法访问到这个变量呢？

这就是因为闭包起了作用。返回的内部函数和它外部的变量 food 实际上就是一个闭包。

闭包的实质，就是引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在，即使离开了创造它的环境也不例外。

这里提到了自由变量，它又是什么呢？

自由变量可以理解成跨作用域的变量，比如子作用域访问父作用域的变量。

如下代码中，console.log(a)  要得到 a 变量，但是在当前的作用域中没有定义 a（可对比一下 b）。当前作用域没有定义的变量，这成为自由变量 。

var a = 100
function fn() {
    var b = 200
    console.log(a) // 这里的 a 就是一个自由变量，需要顺着作用域链来查找 a 变量的值
    console.log(b)
}
fn()

闭包的原理

接下来，我们来看一下闭包的原理。

要解释闭包的原理，这里需要回答 2 个问题。

（1）为什么函数内部可以访问外部函数的变量？

原因很简单，当一个函数上下文产生的时候，会确定 3 个东西：变量对象、作用域链条以及 this 指向。

正因为有作用域链的存在，所以能够通过作用域链来访问到外部函数的变量。

（2）为什么当外部函数的上下文执行完以后，其中的局部变量还是能通过闭包访问到呢？

其实用上一个问题的答案再延伸一下，这个问题的答案就出来了。

在介绍作用域的时候，我们有介绍过作用域是在函数创建的时候就确定下来了（参阅《作用域》章节）。

所以即使外部函数的上下文结束了，但内部的函数只要不销毁（被外部引用了，就不会销毁），就会一直引用着刚才上下文的作用域链对象，那么包含在作用域链中的变量也就可以一直被访问到。

综上所述，闭包其实就是利用到了作用域链的知识。

把这个理解了，闭包的原理也就明白了。

那么为什么说每一个函数都是一个闭包呢？

因为每一个函数都能通过作用域链访问到全局上下文中的变量，例如：

var stuName = "zhangsan";
function test(){
    console.log(stuName);
}
test();

在上面的代码中，我们在 test 函数中访问了自由变量 stuName，这个被引用的自由变量将和这个函数一同存在。

闭包的优缺点

闭包的优点

先来看看闭包的优点，主要有以下 2 点：

• 通过闭包可以让外部环境访问到函数内部的局部变量。
• 通过闭包可以让局部变量持续保存下来，不随着它的上下文环境一起销毁。

看下面这个例子：

var count = 0; // 全局变量
function compute() { // 将计数器加 1
    count++;
    console.log(count);
}
for (var i = 0; i < 100; i++) {
    compute(); // 循环 100 次
}

这个例子是对一个全局变量进行加 1 的操作，一共加 100 次，得到值为 100 的结果。

但是因为使用了全局变量，所以存在全局变量污染的问题。

下面用闭包的方式重构它：

function compute() {
    var count = 0; // 局部变量
    return function () {
        count++; // 内部函数访问外部变量
        console.log(count);
    }
}
var func = compute(); // 引用了内部函数，形成闭包
for (var i = 0; i < 100; i++) {
    func();
}
// 在外面新创建一个 count 的变量，完全不冲突
var count = "Hello";
console.log(count);
for (var i = 0; i < 100; i++) {
    func();
}

这个例子就不再使用全局变量，其中 count 这个局部变量依然可以被保存下来。我们甚至可以在外面新创建一个 count 变量，完全不会和内部的 count 变量产生冲突。

闭包的缺点

说完闭包的优点，接下来来看一下闭包的缺点。

局部变量本来应该在函数退出时被解除引用，但如果局部变量被封闭在闭包形成的环境中，那么这个局部变量就能一直生存下去。也就是说，闭包会将局部变量保存下来。如果大量使用闭包，而其中的变量又未得到清理，闭包的确会使一些数据无法被及时销毁，从而造成内存泄漏。

但是使用闭包的一部分原因，是我们选择主动把一些变量封闭在闭包中，因为可能在以后还需要使用这些变量。

把这些变量放在闭包中和放在全局作用域中，对内存方面的影响是一样的，所以这里并不能说成是内存泄漏。如果在将来需要回收这些变量，我们可以手动把这些变量设置为 null。

如果要说闭包和内存泄漏有关系的地方，那就是使用闭包的同时比较容易形成循环引用，如果闭包的作用域中保存着一些 DOM 节点，这个时候就有可能造成内存泄漏。

但这本身并非闭包的问题，也并非 JavaScript 的问题。在 IE 浏览器中，由于 BOM 和 DOM 中的对象是使用 C++  以 COM 对象的方式实现的，而 COM 对象的垃圾收集机制采用的是引用计数策略。在基于引用计数策略的垃圾回收机制中，如果两个对象之间形成了循环引用，那么这两个对象都无法被回收，但循环引用造成的内存泄漏在本质上也不是闭包造成的。

同样，如果要解决循环引用带来的内存泄漏问题，我们只需要把循环引用中的变量设为 null 即可。将变量设置为 null 意味着切断变量与它此前引用的值之间的连接。当垃圾收集器下次运行时，就会删除这些值并回收它们占用的内存。

闭包的应用场景

最后，我们来看一下闭包的一些实际的应用场景。

var a = 100;
setTimeout(function () {
    console.log(++a);
}, 1000);

上面是一段很简单的代码，但是这实际上就在你毫无察觉的情况下使用用到了闭包。

在这个例子中，用到了时间函数 setTimeout，并在等待 1 秒钟后对变量 a 进行加 1 的操作。

之所以说这是闭包，是因为 setTimeout 中的匿名函数对外部变量（自由变量）进行访问，然后该函数又被 setTimeout 方法引用。满足了形成闭包的两个条件。所以你看，即使外部上下文结束了，1 秒后仍然能对变量 a 进行加 1 操作。

在 DOM 的事件操作中，也经常用到闭包，比如下面这个例子：

<input id="count" type="button" value="计数">

(function(){
  var cnt = 0; // 计数器
  var count = document.getElementById("count");    
  count.onclick = function(){
    console.log(++cnt);
  }
})()

onclick 指向的函数中访问了外部变量 cnt，同时该函数又被 onclick 事件引用了，满足 2 个条件，是闭包。

所以当外部上下文结束后，你继续点击按钮，在触发的事件处理方法中仍然能访问到变量 cnt。

再比如，img 对象经常用于进行数据上报，如下所示：

const report = function (src) {
    var img = new Image();
    img.src = src;
}
report('http://xxx.com/getUserInfo');

但是通过查询后台的记录我们得知，因为一些低版本的浏览器的实现存在 bug，在这些浏览器下使用 report 函数进行数据上报时会丢失 30%  左右的数据，也就是说，report 函数并不是每一次都成功发起了 HTTP 请求。

丢失数据的原因是 img 是 report 函数中的局部变量，当 report 函数在调用结束后，img 局部变量随即被销毁，而此时或许还没来得及发出 HTTP 请求，所以此次请求就会丢失掉。

现在我们把 img 变量用闭包封闭起来，便能解决请求丢失的问题，如下：

const report = (function () {
    var imgs = [];
    return function (src) {
        var img = new Image();
        imgs.push(img);
        img.src = src;
    }
})();

在有些时候，闭包还会引起一些奇怪的问题，比如下面这个例子：

for (var i = 1; i <= 3; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000);
}

我们预期的结果是过 1 秒后分别输出 i 变量的值为 1，2，3。但是，执行的结果是：4，4，4。

实际上，问题就出在闭包身上。你看，循环中的 setTimeout 访问了它的外部变量 i，形成闭包。

而 i 变量只有 1 个，所以循环 3 次的 setTimeout 中都访问的是同一个变量。循环到第 4 次，i 变量增加到 4，不满足循环条件，循环结束，代码执行完后上下文结束。但是，那 3 个 setTimeout 等 1 秒钟后才执行，由于闭包的原因，所以它们仍然能访问到变量 i，不过此时 i 变量值已经是 4 了。

既然是闭包引起的问题，那么解决的方法就是去掉闭包。

我们知道形成闭包有两个条件，只要不满足其一，那就不再是闭包。

条件之一，内部函数被外部引用，这个我们没办法去掉。条件二，内部函数访问外部变量。这个条件我们有办法去掉，比如：

for (var i = 1; i <= 3; i++) {
    (function (index) {
        setTimeout(function () {
            console.log(index);
        }, 1000);
    })(i)
}

这样 setTimeout 中就可以不用访问 for 循环声明的变量 i 了。而是采用调用函数传参的方式把变量 i 的值传给了 setTimeout，这样它们就不再形成闭包。也就是说 setTimeout 中访问的已经不是外部的变量 i，所以即使 i 的值增长到 4，跟它内部也没关系，最后达到了我们想要的效果。

当然，解决这个问题还有个更简单的方法，就是使用 ES6 中的 let 关键字。

它声明的变量有块作用域，如果将它放在循环中，那么每次循环都会有一个新的变量 i，这样即使有闭包也没问题，因为每个闭包保存的都是不同的 i 变量，那么刚才的问题也就迎刃而解。

for (let i = 1; i <= 3; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000);
}

另外，使用闭包还可以模拟出面向对象中的私有方法。

过程与数据的结合是形容面向对象中的“对象”时经常使用的表达。

对象以属性的形式包含了数据，以方法的形式包含了过程。

而闭包则是在过程中以环境的形式包含了数据。通常用面向对象思想能实现的功能，用闭包也能够实现，反之亦然。

在 JavaScript 语言的祖先 Scheme 语言中，甚至都没有提供面向对象的原生设计，但却可以使用闭包来实现一个完整的面向对象的系统。

下面我们来看看这段跟闭包相关的代码：

function Test(){
    var value = 0; // 相当于是对象的属性
    return {
        call : function(){
            value++;
            console.log(value);
        }
    }
}
const test = new Test();
test.call(); // 1
test.call(); // 2
test.call(); // 3

如果换成面向对象的写法，那就是如下：

const test = {
    value: 0,
    call: function () {
        this.value++;
        console.log(this.value);
    }
}
test.call(); // 1
test.call(); // 2
test.call(); // 3

或者

function Test() {
    this.value = 0;
}
Test.prototype.call = function () {
    this.value++;
    console.log(this.value);
}
const test = new Test();
test.call(); // 1
test.call(); // 2
test.call(); // 3

灵魂拷问

• 闭包是什么？闭包的应用场景有哪些？怎么销毁闭包？

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

因为闭包引用着另一个函数的变量，导致另一个函数已经不使用了也无法销毁，所以闭包使用过多，会占用较多的内存，这也是一个副作用，内存泄漏。

如果要销毁一个闭包，可以 把被引用的变量设置为 null，即手动清除变量，这样下次 JS 垃圾回收机制回收时，就会把设为 null 的量给回收了。

闭包的应用场景：

1. 匿名自执行函数
2. 结果缓存
3. 封装
4. 实现类和继承
5. 解决全局污染