JavaScript | 闭包

Reference : JavaScript教程 - 廖雪峰的官方网站

闭包（Closure）是JavaScript中相当有趣的一个特性，学起来稍有一些难度。这篇文章讲解JavaScript中的闭包，遵循先知道是什么，再知道为什么的顺序。

什么是闭包

（本节基础：函数、高阶函数；本节参考：闭包 - 廖雪峰的官方网站）

我们通常定义的函数，比如说sum，调用sum([1, 2, 3, 4, 5])即得到结果。

function sum (arr) {
    return arr.reduce(function (x, y) {
        return x + y;
    });
}

sum ([1, 2, 3, 4, 5]);

JavaScript的语法提供了一种特性：我们可以返回函数内定义的函数。这个特性看起来有点晕，我们接着上面的例子来理解。

现在我定义另一个函数lazy_sum，并利用上述特性，返回一个函数内定义的函数。

function lazy_sum(arr) {
    var sum = function () {
        return arr.reduce (function (x, y) {
            return x + y;
        });
    };
    return sum;
}

现在我们调用lazy_sum，返回的结果是一个新的函数。

var f = lazy_sum([1, 2, 3, 4, 5]);

但毕竟函数f还没有被执行，现在我们并没有任何一个变量实际保存了对数组求和的结果。想要得到结果，需要调用函数f。

f(); // 15

函数f没有参数的原因是在lazy_sum中定义sum时，指定sum没有参数。

现在我们对闭包有了一个初步的印象，你可能会觉得奇怪，这个特性看上去怎么这样鸡肋？其实我刚开始对闭包也是同样的评价，但接下来，我将试图从闭包的实现方式上深入地讲解闭包，并在本文最后给出闭包地几个相当重要地用法。

闭包

（本节基础：闭包的概念、变量作用域、编译原理；本节参考：1. 深入理解javascript原型和闭包， 2. 闭包 - JavaScript | MDN)

我们再看一下之前定义的lazy_sum。

function lazy_sum(arr) {
    var sum = function () {
        return arr.reduce (function (x, y) {
            return x + y;
        });
    };
    return sum;
}

学过编译原理的朋友应该明白，函数中的变量作用域限于整个函数，在编译时，其符号表（symbol table）会在进入函数时创建，离开函数时删除。那么我们仔细分析，闭包是否与编译函数时符号表有冲突。

var f = lazy_sum([1, 2, 3, 4, 5])

当我们调用lazy_sum，传入参数时，lazy_sum的符号表被创建，局部变量arr记录在其中，在这个例子里，arr的值是[1, 2, 3, 4, 5]。函数执行结束后，sum作为结果返回，且lazy_sum的符号表被删除，此时关于arr的信息也被删除。

但奇怪的是，我们此时调用f，相当于调用sum时，却能得到求和的正确结果。按理来说，此时arr的值在符号表中已经找不到了。

看似闭包不符合编译原理，实际上，开发者为了实现闭包，特意修改了JavaScript的符号表规则。一般的语言，如C，Java等，符号表遵循在本节开头所述规则：符号表会在进入函数时创建，离开函数时删除。然而为了实现闭包，JavaScript的符号表规则如下：

当闭包出现时，该函数执行后，其符号表不删除。

用在上面的例子里就是说：由于lazy_sum是闭包，所以调用后其符号表不删除。这样，我们就不难理解为什么在之后调用f，我们还能得到sum的值。

如果到这里还能看懂，那么恭喜你已经理解了闭包的绝大部分奥秘；如果看的一头雾水，那说明笔者功力尚浅，没能把闭包的原理讲清楚，推荐不太明白的读者转到本节的参考文章，应该能有所收获。

我们来看下面一个例子：

function fn() {
    var max = 10;

    return function bar (x) {
        if (x > max) {
            console.log(x);
        }
    };
}

var f1 = fn(),
     max = 100;

f1(15);

运用闭包的符号表规则，调用fn()后，其符号表保留，调用f1(15)时，相当于调用bar(15)，这时在bar的符号表中寻找变量max，没有找到，按照规则，到定义它的域中寻找（注意不是父域，本例中定义bar的域时fn函数体，f1的父域时全局域），找到保留下来的fn符号表中，max的值为10，所以在控制台显示15。

这个例子里存疑的地方在于，通常，当函数中出现一个变量名时，我们先在函数体中寻找，若没有，则逐层在父域的符号表中查找。然而，我们发现，f1调用时，max变量的值首先在bar函数体内没有找到，接着却没有向父域（全局域）中查找，而是向定义bar函数的域，即fn的函数体查找。

可见，闭包在形式上将函数fn内定义的bar函数返回了出来，而实际上bar函数始终没能离开fn的函数体，bar的函数体中引用的变量max始终与fn的函数体中定义的变量max绑定。

所以，我们调用f1(15)的效果，与直接在fn内调用bar(15)的效果一样。这就是闭包的功能：将闭包函数closure视为一个整体，通过保留其符号表将函数体内申明的变量variable保留下来；通过在closure内定义其他函数operation实现对内部变量variable的操作，并将operation作为closure的返回结果，我们能够在closure外借助具有operation值的函数对象，完成对variable的操作。

其实对闭包的讨论可以到此为止，但如果我们将视野放到JavaScript的语法之外，我们发现：闭包的用法与面向对象语言非常类似；闭包类似于一个类，其中的变量类似私有成员，定义的函数类似于类的公有方法。因此，JavaScript这样一个只有函数而没有类的语言，借助闭包，也有了面向对象语言的能力。

下面这个例子有助于让你将闭包与面向对象语言中的类建立联系：

函数create_counter创建了一个计数器。

function create_counter(initial) {
    var x = initial || 0;
    return {
        inc: function () {
            x += 1;
            return x;
        }
    };
}

用法如下：

var c1 = create_counter();
c1.inc(); // 1
c1.inc(); // 2
c1.inc(); // 3

var c2 = create_counter(10);
c2.inc(); // 11
c2.inc(); // 12
c2.inc(); // 13

在这个例子里，外部代码无法访问到变量x，却可以通过返回的对象修改x的值。这时我们就意识到了闭包的强大，它甚至可以作为构建类似于类的一种工具。

闭包的常见用法

  1. 封装私有变量

前面提到的计数器就是一个很好的例子。

function create_counter(initial) {
    var x = initial || 0;
    return {
        inc: function () {
            x += 1;
            return x;
        }
    };
}
  1. 封装多参数函数，得到单参数函数

比如通过封装原生的Math.pow(x, y)函数得到pow2和pow3：

function make_pow(n) {
    return function (x) {
        return Math.pow(x, n);
    }
}

var pow2 = make_pow(2); // x**2
var pow3 = make_pow(3); // x**3
  1. 模块模式 (module pattern)

用闭包模拟类

var Counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }   
})();

console.log(Counter.value()); /* logs 0 */
Counter.increment();
Counter.increment();
console.log(Counter.value()); /* logs 2 */
Counter.decrement();
console.log(Counter.value()); /* logs 1 */

上述代码定义了对象Counter

注意在上述代码中使用了”创建一个匿名函数并立即执行“的语法。

(function (x) {
    return x * x;
})(3); // 9

理论上讲，创建一个匿名函数并立即执行可以这么写：

function (x) { return x * x } (3);

但是由于JavaScript语法解析问题，会报SyntaxError错误，因此需要用括号把整个函数定义括起来：

(function (x) { return x * x }) (3);

通常，一个立即执行的匿名函数可以把函数体拆开，一般这么写：

(function (x) {
    return x * x;
})(3);

闭包的弊端

本来我觉得脚本语言很少考虑性能问题，不想提这一点的。然而我看到几乎每篇介绍闭包的博客都提到了用闭包的弊端，想必不是一个可以忽视的问题，因此在此补上。

如果不是某些特定任务需要使用闭包，在其他函数中创建函数是不明智的，因为闭包在处理速度和内存消耗方面对脚本性能有负面影响。

更多细节可以参考前文中提到的几篇参考文章，在此不再赘述。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,607评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,047评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,496评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,405评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,400评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,479评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,883评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,535评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,743评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,309评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,881评论 3赞 306
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2赞 342