JavaScript之闭包

从一个函数的实现说起

话说,我要写这么一个函数 getCallCounter , 该函数无参数,返回一个数字,第一次调用返回1,第二次调用返回2,... ,以此类推,即

console.log( getCallCounter() );  //输出为1
console.log( getCallCounter() );  //输出为2
console.log( getCallCounter() );  //输出为3

全局变量实现

拿到这个需求之后,我们最简单的想法就是写一个全局变量,并初始化为0,每次调用 getCallCounter 时,首先将该全局变量加1,并返回该全局变量,代码如下:

var g_counter = 0;
function getCallCounter(){
  g_counter += 1;
  return g_counter;
}

上述代码非常简单,也达到了要求。但是有一个问题,我们定义了一个 “累赘” -- g_counterg_counter 的定义导致了2个问题:

  • 污染了全局作用域区,因为只有函数 getCallCounter 会用到该变量,所以,该变量应该遵守 "谁要使用,谁来管理" 的原则,而不是放在全局变量区;

  • 任何代码段都能取得 g_counter ,导致了 getCallCounterg_counter 不能做到完全控制。如果其他代码修改了 g_counter,那就不能保证每次调用 getCallCounter,我们都能得到一个递增的数;

以上两点不足是相互联系的,正是由于明明应该限定在 getCallCounter 函数中的变量却放在全局区,才导致上面两个问题。

因此,我们将定义放到函数中;

改进1

function getCallCounter(){
  var counter = 0;
  counter += 1;
  return counter;
}

改成上述代码后, counter 受到 getCallCounter 的完全控制,但是,每次调用该函数后,返回都是1;

这是因为函数有自己的作用域,每次完成函数调用,函数中的变量不再被引用,之后将会被 垃圾回收机制 所销毁,再次调用时,又会创建新的局部变量,因此, getCallCounter 返回的一直是 1;

C语言的实现

为了让延长函数中局部变量的声明周期(而不是函数执行完后,内存就被释放掉),C语言中通过关键字 static 为其 "增寿";

int getCallCounter(){
    static int counter = 0;
    counter += 1;
    return counter;
}

这样,我们每次调用 getCallCounter ,都能够得到一个递增的数;

但这毕竟是C语言的实现,那么JavaScript如何实现呢?

解决生命周期问题

我们首先要做的,就是像C语言一样解决局部变量生命周期过短的问题。

为了保证不被 垃圾回收机制 这个 "刽子手" 所干掉,我们必须始终保持对局部变量的使用,因为 垃圾回收机制 只是针对没用的数据,而那些还会被使用的数据是不会被当成垃圾的!

所以我们有了下面的代码:

function f(){
  var counter = 0;
  return function(){
    counter += 1;
    return counter;
  }
}
var getCallCounter = f();

首先,我们定义了一个函数 f ,该函数返回一个函数,因为返回的函数能够获得 f 中的局部变量,所以返回的函数能够得到变量 counter 的值,即 在全局变量作用域中调用一个函数得到了局部作用域中的变量

其次,我们通过变量 getCallCounter 来存放返回的函数,说明返回的函数始终存在变量对该函数引用,因此该返回函数不会被销毁;而返回的函数又使用了局部变量 counter ,那么解释器就认为 counter 也是有用的,只要 getCallCounter 不被销毁,该临时变量也将不会被销毁;

闭包的官方定义是:

一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

Excuse me ? 官方的定义总是会用一些看起来高大上的话让你觉得牛逼,但是,你就是看不懂。。。

我的理解是:就是一个函数的返回值是一个函数,那么就形成一个函数被另一个函数所 封闭 的情形,而被返回的函数能够调用定义它的函数中的所有变量,这就形成闭包;

虽然可能不准确,但至少好记忆,好理解。

美化

我们看到前面的函数 f 只被调用了一次,对于这些只调用一次的函数,完全可以写成 匿名的立即执行的 函数,修改后,代码为:

var getCallCounter = ( function(){
  var counter = 0;
  return function(){
    counter += 1;
    return counter;
  }
} )();

如此,便可优雅的完成最开始的要求。

完。

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

推荐阅读更多精彩内容