Javascript闭包

维基百科:在计算机科学中,闭包(Closure),是引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在,即使已经离开了创造它的环境也不例外。所以,有另一种说法认为闭包是由函数和与其相关的引用环境组合而成的实体。

上面的解释难免有些抽象,为了化繁为简,本文将通过实例的方式,探究Javascript中闭包的概念及其用途。为了更好地理解闭包,我将从Javascript的变量的作用域谈起。

一、Javascript变量的作用域

有点类似于原型链(proto chain),Javascript中变量遵从作用域链(scope chain)规则。

scope_chain.png

如上图所示,在Javascript中,每一个函数体对应于一个作用域。当访问一个变量时,我们会先访问当前作用域内是否有定义该变量,如果没有就会在该作用域外的作用域内寻找是否有改变量,依此类推,一直寻找到全局变量。如果全局变量中依旧没有定义该变量,就会返回undefined。


我们来看下下面这个例子:

var milk = '外面的特仑苏'
function wrapper1() {
    var milk = '里面的特仑苏'
    console.log('我要喝' + milk)   //我要喝里面的特仑苏
}
function wrapper2() {
    console.log('我要喝' + milk)   //我要喝外面的特仑苏
}
wrapper1()
wrapper2()

在上述例子中,我们在wrapper1函数体内定义了变量milk,因此wrapper1在寻找完当前作用域即可以得到里面的特仑苏,而在wrapper2函数体内没有定义变量milk,它会沿着作用域链去寻找全局变量,然后得到了外面的特仑苏。所以,有另一种说法认为闭包是由函数和与其相关的引用环境组合而成的实体。

二、闭包的概念

按照作用域链的规则,我们无法在某函数体外访问到该函数内的局部变量。但是出于某些目的我们想在函数体外访问到函数体内的局部变量,我们该怎么做呢?请看下面例子:

function wrapper1() {
    var milk = '里面的特仑苏'
    function drink() {
        console.log('我喝了' + milk)
    }
    return drink
}
var result = wrapper1()
result()  //我喝了里面的特仑苏

我们在函数体内再创建一个函数,并且把这个内部函数drink作为外部函数wrapper1的返回值。我们通过执行函数wrapper1获得了它的返回值drink,并且执行它,就成功的访问到了它的内部变量milk(里面的特仑苏)。
回想维基百科中闭包的定义,再结合上述例子:drink函数就是一个闭包,因为它引用了处于它外部的变量milk。这个被引用的外部变量milk和函数drink一同存在,即使已经离开了创造它的环境也不例外。所以,有另一种说法认为闭包是由函数和与其相关的引用环境组合而成的实体。

三、闭包的用途

从上述例子中不难看出,闭包的一个用途就是可以访问函数的内部变量。从而可以实现一些面向对象的功能,例如设置类的隐私变量,关于这一点可以参考《对Javascript 类、原型链、继承的理解》
闭包的另一个用途就是可以使变量一直保存在内存之中,不被垃圾回收机制所回收。看下面这个例子:

var change;
function wrapper() {
    var milk = '特仑苏'
    function drink() {
        console.log('我喝了' + milk)
    }
    change = function () {
        milk =  'AD钙奶'
    }
    return drink
}
var result = wrapper()
result()  //我喝了特仑苏
change()
result()  //我喝了AD钙奶

可以看到,wrapper执行之后,milk变量一直能被访问到,原因就是result引用了wrapper内部的drink函数,drink函数又引用了milk变量,因此它一直不会被垃圾回收机制所回收。

四、慎用闭包

因为闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则可能会造成内存泄露。解决方法是,在使用完闭包函数之后,将变量设置为undefined。比如在上例中,在使用完result之后,将result设置为null或者undefined。

参考资料:
1.闭包【维基百科】
2.学习使用Javascript闭包【阮一峰】

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

推荐阅读更多精彩内容

  • 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。 一、变量...
    zouCode阅读 1,250评论 0 13
  • 我研究JavaScript闭包(closure)已经有一段时间了。我之前只是学会了如何使用它们,而没有透彻地了解它...
    流动码文阅读 237评论 1 0
  • 本文翻译自JavaScript closures for beginners 闭包不是什么魔法 本篇文章介绍了闭包...
    Aden_Z阅读 343评论 0 1
  • 相信学习 JavaScript 的同学都知道「闭包(Closure)」,这个概念在 JavaScript 中是非常...
    ikook阅读 453评论 0 1
  • 我看你,所见者,我梦中的你。 林间小跑,身着素衣。奔向无垠的绿野,双手轻轻托住 一朵沉睡的云。 然而,一同置身于...
    陈果_周绿阅读 175评论 1 1