深刻学习 JavaScript —— 闭包

前言

做者虽然不是第一次写学习笔记了，可是系统性的专栏确实是第一回写，因此对这篇文章难度的预估量不够，酝酿了蛮久时间的。写以前一直在纠结一个问题，这类问题网上已经有各种大神作出各类很详细的分解了，还有必要写吗？ 能让我有动力写的缘由，一个是强烈的表达欲望，另外一个是但愿后来者能经过我这篇文章学到一点东西。基于这两点，我这篇文章的思路就有了：要写得尽量详细甚至啰嗦，多用一些生活化的例子做比。固然，我这个行文思路也是参考借鉴了【张鑫旭】大神的。好了，接下来开启个人第一篇文章吧——关于 JavaScript 的闭包 (closures)。

正文前再啰嗦点什么

我但愿看到这篇文章的人可以秉持一个思惟习惯：和物理、数学等客观存在的知识点不同的是，编程领域的知识点有至关大的部分具备主观性——意思就是，不少编程领域的知识首先是人根据现实的需求创造出来的，它不是客观就存在的。这就致使编程领域的一个现象：对于一种问题的解法，咱们能够有不少不一样角度的思路，这其中前端领域尤其突出。但它们都是人类所创造出来的概念。 这个思惟会有助于咱们去学习编程领域的知识点（至少我是这样）。回到咱们这篇文章的主题，闭包，这个令许多 JS 新手头疼不已的问题，其实只是人们解决函数式编程问题用到的一个概念工具。什么是函数式编程？这个概念比闭包还难说清楚，计划专研后再后续写些文章详细总结。 如今咱们就简单地把函数式编程与面向对象、面向过程编程视为同一层次的概念，它是一种编程的思惟模式。而闭包只是实现函数式编程的高效工具之一。啰嗦了那么多，来看张明白直了的图吧~

闭包的定义

上面说到闭包是实现函数式编程的工具之一。可是，闭包究竟是什么，长什么样？《你不知道的 JavaScript》书中，将闭包定义为【函数在所定义的做用域以外的区域被调用】。听上去有点绕，我举个比较现实的例子：

闭包的函数定义与使用做用域分离，有点相似古代对军队的掌控和调度权力分离。在大多数状况下，古代军队是只忠于皇廷的；一旦恰逢大战，皇帝很差御驾亲征，这时会将军队的调度权临时给予将领。将领真正掌控了军队吗？正常状况下是没有的，他只有在沙场上调度军队的权力。咱们能够看到，军队明面的掌管者是谁？皇帝。但实际的操纵者是谁？将领。 这种权力分离的过程是如何实现的呢？你可能知道的，虎符！虎符是实现这种权力传递，或者分离的概念性工具。

从某种意义上看，闭包和虎符同样，也是一种概念性工具。如今是否是可以勉强记住上面那句，【函数在所定义的做用域以外的区域被调用】？若是能够的话，如今举两个例子，请你判断是否为闭包，以及是否输出正常。最好思考一分钟，而后再看解释。

// example 1
function outter () {
    console.log("outter");
    return function inner () {
        console.log("inner");
    };
}
var p = outter();
p();
复制代码

// example 2
function outter () {
    console.log("outter");
    function inner () {
        console.log("inner");
    }
    foo(inner);
}
function foo (fn) {
    fn();
}
outter();
复制代码

上面两个例子，你有什么见解？事实上，这两个都是《你不知道的 JavaScript》里说起的闭包例子。 第一个例子，outter将inner做为返回值传递给p，p在全局做用域执行时，inner的定义所在做用域与执行做用域不一样，符合上面提到的闭包定义。 第二个例子，inner做为参数被传递给foo执行，一样的咱们能够看到，inner的定义所在域与执行域不一样，虽然它们都是outter函数做用域的子集。 不知看到此处的你，对闭包的理解是否清晰些了？若是你以前看过其它博客文章，它们对闭包的定义可能与本文不一致。好比说，在阮一峰这篇博文里，对闭包的定义是【可以读取其它函数内部变量的函数】。可能网上还有其它的定义。事实上，这些定义本质上都是同样的，它们只不过从某个特定角度描述闭包的特性。就像虎符，虽然在各个朝代都有出现，可是它在每一个时期的形状是不尽相同的。挑一个你认为最好记的，加上辅助理解的实例就好。

闭包的做用

实际上，我更愿意将阮一峰对闭包的定义——【可以读取其它函数内部变量的函数】，视为闭包的做用之一。可是，它的做用远不止这个。 回到以前说起的函数式编程，它的一大特征就是【函数是一等公民】。这句话怎么理解？大概地说，函数式编程提倡用函数来实现，传统面向对象中只有类和对象才能实现的功能。以前提到，闭包是实现函数式编程的工具之一，其实用处主要就在这里。 闭包如何实现函数式编程呢？其实很简单，既然闭包可于读取函数的内部变量，换个角度想就是，闭包能够实现函数变量或方法的公有化。有些同窗可能知道，传统面向对象中，只有对象才有私有和共有变量、方法之分，函数内部不只不能定义函数，也不能主动暴露内部变量。JS 中函数内部是能够定义函数的，至关于有了内部方法。有了闭包，JS 中的函数就和对象很像啦，这就很符合函数式编程的理念了~ 然而，说了那么多干巴巴的定义，对于函数如何当对象使用，你可能仍是很懵。不要紧，举几个实例来辅助说明。

// example 3
function people (_name, _age) {
    var name = _name;
    var age = _age;
    return function get () {
        console.log('name: ' + name);
        console.log('age: ' + age);
    };
}
var get_info = people("Lee", 20);
get_info();   // name: Lee; age: 20
复制代码

上述例子在必定程度上体现了函数被看成对象的特色。然而，有人可能会钻一个牛角尖：我已经知道它返回的是一个函数了，你只不过是在执行这个函数而已。首先恭喜你，能提出这个疑问，表明你至少看懂上一节内容了；其次，这个示例的重点不在函数的执行，而在这个函数输出了不属于它的变量数据。这在某种程度上，上文也有提到，实现函数变量或方法的公有化。 对 JS 有点了解的可能会问：JS 中不是有垃圾回收机制吗，为何people执行后它的内部变量没有被回收？这个问题问得至关好，有一段时间我也很疑惑这点。下面再举一个很经典的计数器例子，咱们来看看为何会这样。

// example 4
function counter () {
    var count = 0;
    console.log("init: " + count++);
    return function increase () {
        count += 2;
        console.log("increase: " + count);
    }
}
var increase1 = counter();    // init: 0
var increase2 = counter();    // init: 0
increase1();    // increase: 3
increase1();    // increase: 5
increase2();    // increase: 3
复制代码

这个例子是计数器的变形，之因此在counter内部域中作一个输出，是为了观察执行increase时是否会执行counter内部的语句。 能够看到，其一，increase执行时只用到counter的变量，并不执行某些特定的语句。但假如引用了另外一个函数m，确定会执行m内部的语句。其二，在代码的运行周期内，count变量一直保留；只要愿意，能够执行若干次increase。这不符合 JS 垃圾回收的机制。其三，两个变量 (increase1&increase2) 引用的计时器变量count不一样。在 JS 语境下，它们实际上是两个对象。 上述疑问中，一你们想一下就能明白了，三不是本文的重心，之后会再提到，重点是疑问二。这里其实涉及到 JS 的函数传递和词法做用域。在 JS 中，【函数是一等公民】还体如今：函数能够做为参数、返回值等进行传递。上述示例中，increase1获取了counter返回的函数increase，此时这个函数保留有原父函数counter内部变量的引用。为了代码引用非空，JS 对此会进行特殊处理，【保留原父函数的词法域】，但不会再执行。

总结

写到这里，这篇啰里巴嗦的文章总算是到尾声了。如今来作一个总结吧~ 本文咱们认识了闭包，那么本文对闭包的定义是什么？这里不打出来，你本身小声默念一遍，想不起来就想一想虎符的例子。 第二个，闭包的做用？最大的做用固然是保证【函数是一等公民】的地位啦。可是这个太抽象了，回想一下例子，咱们能够获得两个特殊做用，或者说特色。

• 可以用于读取函数内部变量和方法，模拟对象
• 保留父函数的词法域。须要注意的是，滥用这个特色会致使内存泄露。

参考

学习 JavaScript 闭包 —— 阮一峰 到底什么是闭包 —— 知乎用户 Agile2 《你不知道的 JavaScript（上卷）》