通俗的解释 - 什么叫JS的“闭包”

闭包的英文是Closure。无论从中文还是英文看,你都猜不出它具体是啥意思。

词法作用域

要理解闭包,首先必须理解Javascript特殊的变量作用域。

JS变量跟其他语言比起来简单得多,无非就是两种:全局变量和局部变量。局部变量就是函数内部变量。

JS的变量作用域也比其他的语言简单得多。什么叫变量作用域?从字面就很好理解:变量能起作用的领域。对应变量的分类,作用域也分成两种:全局作用域、函数作用域。函数作用域是在函数定义的时候确定的,而不是在函数执行的时候确定的,所以这种作用域往深了说叫词法作用域。为什么叫“词法”,简单理解就是“按写的代码为法律”。如果什么书上说到词法作用域,就记得这是说JS的作用域就行了。跟词法作用域相对的是动态作用域,在JS里面没有这东西。

JS语言的特殊之处,就在于:

  • 函数内部可以直接读取全局变量,这什么意思?全局变量在全局作用域和函数作用域都生效。但局部变量就不行。
  • 在函数外部无法读取函数内定义的(或传参传入的)局部变量。这什么意思?局部变量无法在全局作用域生效,也无法在上层局部作用域生效,只能在本层局部作用域生效,以及可以在下层局部作用域生效,直到最深层。
  • 上述两条总结起来,就是变量只能在本层作用域和下层作用域生效,不能在上层作用域生效。

基础知识

直接看下面带闭包的代码:

function foo() {
    var a = 1;
    function bar() {
        a = a + 1;
        console.log(a);
    }
    return bar;
}

var closure = foo();
// 上面这时候返回的是 bar() 这个函数外加其包上的变量 a,也就是说,其实是:
// var closure = function bar() {
//        a = a + 1;
//        console.log(a);
// };以及,bar()对外层作用域的引用;
var closure2 = foo(); // 这里同样生成了另外一个闭包(实例)
closure(); // 2,closure虽然定义在外层函数之外,但是它却指向了内层函数,下同
closure2(); // 2 , 绑定了另外一份变量 a
closure(); // 3,closure引用的变量a并没有销毁,还能继续+1。下同。
closure2(); // 3

然后我们再对比一段不带闭包的代码:

function foo() {
    function bar() {
        var a = 1;
        a = a + 1;
        console.log(a);
    }
    return bar;
}

var closure = foo(); // 这个时候返回的是 bar() 这个函数,外层作用域并没有变量a
var closure2 = foo();
closure(); // 2,变量a在函数执行一次之后就被销毁了
closure2(); // 2
closure(); // 2
closure2(); // 2

显然,第一段带闭包的代码中,对于常规的foo()方法来说,按理说,在其内部的变量a(也就是var a = 1;)的内存空间应该在foo()方法执行完毕以后就消失了(原因是JS的函数执行机制:函数执行开始之后,JS给作用域内的变量分配内存空间,函数执行完成之后,空间自动回收),但是麻烦来了,foo()方法返回了一个新的方法bar(),而这个方法却访问到了foo()方法的变量a(原因是JS通过作用域链可访问到父级属性,这个大家都知道,你可能不知道的就是foo()方法在执行完毕之后,foo()方法的作用域链还存在),所以var a = 1;的内存空间还不能回收,所以说,闭包阻止了a的回收,方法bar()的存在延长了变量a的存在时间,相当于将变量a关闭在了自己的作用域范围内一样,只要方法bar()没有失效,那么变量a则会一直伴随着方法bar()存在。所以:方法bar()始终能引用上级作用域,这种引用被称为闭包。

闭包的显著特点:

  1. 函数套函数,所以至少有两层函数。
  2. 外层函数最少要干三件事:
  • 提供至少一个局部变量,注意,我没有说“定义变量”,因为变量除了定义,还有一种情况是通过参数传递进来,不需要定义。这个变量在外层函数执行完毕之后不能被销毁,销毁就不叫闭包。
  • 定义至少一个内层函数。
  • 想办法将内层函数返回给调用外层函数的作用域里的变量或者函数。通常是用return
  • 内层函数至少要干一件事:定义真正的执行语句。用的时候用内层函数。

闭包的技术原理就是利用作用域链是单向的这一特征。

那么闭包到底有个毛用呢?写简单易懂的代码会死么?闭包的三个好处:

1.希望一个变量长期驻扎在内存中
2.避免全局变量的污染
3.私有成员的存在

闭包的两个重要的使用场合就是:

模拟模块和私有属性,外层函数就是模块,外层函数内的变量就是私有属性

以上面的带闭包的代码举例,稍作修改:

function foo() {
    var a = 1;
    function bar() {
        a = a + 1;
        console.log(a);
    }
    return {bar:bar};
}

var closure = foo();
closure.bar(); // 2

foo()就是一个模块,调用一次foo()就创建了一个模块实例,closure就是模块实例。foo()作用域里面的a变量,你没有任何办法能直接访问它的值,这就形成了一种所谓的私有属性,当然JS里面是没有私有这个概念的,这里是模仿。关于模块的更多知识,其实属于“JS设计模式”的范畴,需要你看更多的资料了。

模拟块级作用域

通常用法是用一个自执行函数把异步函数包裹起来。比如,我有一个数组是[1,2,3,4,5,6,7],我想把它们分别作为参数,用ajax发送到服务器,然后分别获得打印的结果。简单的伪代码是:

var arr = [1,2,3,4,5,6,7];
for (var i = 0; i < arr.length; i++ ) {
    $.post('...', {d: i}, function(data) {
         console.log(i + ' : ' + data);
    });
}

结果你会发现,打印的i跟data不匹配,全乱了,并不会得到我想要的结果,原因涉及到JS异步机制,看我《对异步机制的理解》一文吧,这里不多解释。那么正确的闭包解决办法是什么?

var arr = [1,2,3,4,5,6,7];
for (var i = 0; i < arr.length; i++ ) {
    (function(i) {
        $.post('...', {d: i}, function(data) {
            console.log(i + ' : ' + data);
        });
    })(i);
}

也就是说,我利用自执行函数传递了一个参数,也就是i值,相当于7个自执行函数的作用域内都都放入了一个var i = 当前i值,所以OK了。

总结

所谓闭包,就是一个函数即使在词法作用域之外执行,也依然能记住并且能访问自己的词法作用域,这种用法就叫做闭包。

可能你已经在用闭包但却不知道,也可能没有在用闭包。其实要我说,闭包这个东西,用于面试题的意义最大,为了面试通过,你需要懂这里面的知识,但是,闭包比起面向对象、设计模式来,还是属于基础知识,没必要为了用闭包而刻意用闭包,重心还是放在面向对象编程和设计模式上为好。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,265评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,078评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,852评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,408评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,445评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,772评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,921评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,688评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,130评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,467评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,617评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,276评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,882评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,740评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,967评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,315评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,486评论 2 348

推荐阅读更多精彩内容