JavaScript中的闭包并不难理解

一、闭包(Closures)的定义

描述闭包定义之前需要先了解一个学术名词--(free variable)自由变量,网络上的解释是:一些被某个方法使用的变量,且这些变量既不是方法中定义的变量也不是方法的参数。


官方对闭包的描述也是非常的简单,就一句话:

闭包是使用自由变量的方法。

1.1 如何创建一个闭包

根据闭包的定义,相信很难有人能一下子理解它的含义,下面就使用代码来说明:

function a() {
    var n = 1;
    function b() {
        console.log(n++);
    }
}

观察以上代码可以发现以下特点:

  • 方法a中内嵌了方法b
  • 方法b使用了方法a中的变量

其实当JavaScript解释器执行完这段代码时,并没有产生闭包,为什么呢?虽然我们可以看到方法b使用外部的变量n,但是此时a中的逻辑并没有执行,不管是n还是b,这些只是方法a的描述信息而已,此时JavaScript环境中并没有方法b存在。那何时才能产生闭包呢,答案是:当JavaScript解释器定义方法b的时候。当我们执行a();时,a中的语句得以执行,首先创建了变量n,然后定义了方法b,而定义方法b时需要外部的变量n,此时才符合闭包定义的描述,这时方法b才是一个闭包。

二、闭包的应用

2.1 面向对象的思维

由上例可以看出,一个闭包由两部分组成:自由变量和使用自由变量的方法;面向对象的基本元素就是对象,对象含有属性和方法;当我们把闭包看做一个对象时,自由变量就是属性,而使用自有变量的方法就是方法;由于单一的闭包指的是使用自由变量的方法,终归还是一个方法,所以这种对象本质还是一个方法。

比如有这样一个需求:小明今年10岁,小王今年20岁,小李今年30岁,请问5年后,他们分别多少岁?使用面向对象的思想编写代码如下:

// 从闭包的角度看,这里我们相当于定义了一个类,它的属性是:name,方法是:future()
function man(name, age) {
    function future() {
        console.log(name + "未来的年龄:" + (age + 5));
    }
    return future;
};

// 创建三个对象
// xiaomingObj对象的属性:name = "xiaoming",方法:future()
var xiaomingObj = man("xiaoming", 10);
// 打印:xiaoming未来的年龄:15
xiaomingObj();

// xiaowangObj 对象的属性:name = "xiaowang";方法:future()
var xiaowangObj = man("xiaowang", 20);
// 打印:xiaowang未来的年龄:15
xiaowangObj();

// xiaoliObj对象的属性:name = "xiaoli";方法:future()
var xiaoliObj = man("xiaoli", 30);
// 打印:xiaoli未来的年龄:15
xiaoliObj();

2.2 封装私有变量和方法

这是闭包最重要的用途了,因为闭包使用的自由变量对外部不可见,所以可以起到私有化的作用,只向外提供必要的接口,封装内部逻辑。正是因为有了闭包,才为JavaScript的模块化编程奠定了基础。

封装私有变量和方法示例:

var human = (function() {
    // 私有变量
    var name = "林";

    // 私有方法
    var think = function() {
        // 心想还是让别人叫我小林吧
        return "小" + name;
    };

    // 提供的外部接口
    return {
        speak : function() {
            console.log("你好,可以叫我" + think());
        }
    };
})();

// 打印:你好,可以叫我小林
human.speak();

代码说明:

外层是一个匿名方法:function(){...},通过立即执行的方式(用括号包裹起来作为方法表达式,并使用()立即执行)创建了一个闭包:speak及其引用的think;外部的human无法直接访问name与think,只能访问对外开放的speak,从而达到封装的效果。

三、循环中的误区

对于新手来说,使用闭包经常会犯的一个错误是:在循环中创建闭包。请分析以下代码:

function a() {
    var b = null;
    for (var i = 0; i < 3; i++) {
        if (i === 1) {
            b = function() {
                console.log(i);
            }   
        }
    }
    return b;
}

// 你觉得会打印什么?
a()();

如果你觉得会打印出1,那恭喜你进坑了;说明你还没有完全理解闭包,正确的答案是3,为什么呢?因为执行了a()后,创建的闭包所包含的自由变量是i,当a()执行完毕后,i被更新为3,此时b还没有被调用,当执行a()()时,b才被调用,所以打印出了3。

四、性能考虑

闭包对性能和内存都有相对较高的消耗,除非特殊场景的需要,不要随便使用闭包;闭包相当于通过方法来定义方法,每次创建闭包时都会对方法重新定义;当闭包被外部引用时,由于闭包内的自由变量无法释放,也会导致内存无法释放。

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

推荐阅读更多精彩内容

  • 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。 一、变量...
    zouCode阅读 1,266评论 0 13
  • 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。 一、变量...
    zock阅读 1,069评论 2 6
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 10,800评论 6 13
  • 倚窗而望 雨丝牵线而下 秋意凉然 不觉打了寒颤 端起一杯菊花冰糖茶 苦涩带着甜甜的味道渗入舌下 多日的身体不适 让...
    田萍阅读 319评论 0 7
  • 「我告诉你,我是善良的,但我不仅仅是善良的,当你那副对待我的嘴脸太过难看,老娘不介意把身上柔软的毛皮收起来,然后穿...
    小驴驴驴阅读 800评论 1 18