JS闭包大结局(JS闭包系列3)

在上一篇中再谈JS闭包(JS闭包系列2),我详细的介绍了JS中的变量作用域相关的概念,结合第一节关于JS闭包(JS闭包系列1)的入门, 今天就来对“闭包”这个话题做一个总结。这篇文章信息主要来源于曾探写的《javascript设计模式与开发实践》一书。

JS设计模式与开发实践

衔接上一篇,温习一下:我们已经知道:闭包是由于作用域链的机制自然而然形成的。这一节,希望你能带着这句话来体会每一个实例,以加深对闭包的理解。

变量的寿命兼闭包的第一大作用:延长寿命

除了变量的作用域,另外一个和闭包有着亲密关系的就是变量的生存周期了。一般来说,全局变量的生存周期是永久的,直到我们主动销毁。而在函数内不用var关键字声明的局部变量来说,当退出函数时,这些函数变量立即失去它们的价值,也就被垃圾回收机制销毁了,也算寿终正寝。可是在闭包中,却不是这样。
继续还是以代码说话:

var func = function(){
      var a = 1;  //退出后函数局部变量a直接被销毁
      a++;
      console.log(a);
}; 
func();  //2
func();  //2
func();  //依然是2
普通情况直接销毁

现在看看这段代码:

var func = function(){
      var a = 1;
      return function(){  //匿名函数
            a++;
            console.log(a);
      }
};
var f = func(); //f是对func()的引用
f();   //输出2
f();   //输出3
f();   //输出4
f();   //输出5

闭包封闭变量

由此可见,当退出函数后,局部变量a并没有立即消失,一直存在,这样在第二次调用时a才会是在 2的基础上加1,是3,以后每次调用也才会不断加1;这说明局部变量a一直存活着,寿命延长了!为什么呢?如果你看过我的上一篇文章,你就应该知道,在函数外边是不能访问函数(围墙)里面的变量的,而在这里,f返回了一个匿名函数的引用,那f就可以访问到func()被调用时产生的环境,也就是func()的生存空间,f可以进去闲逛啦!那么想象一下,假如你是这个名叫"func"的大观园的主人,你能不让随时都可能来的“刘姥姥”进去看看吗?既然让进,那么里面的亭台楼榭,一花一石恐怕都不能在园子一盖好,就把它们销毁了吧?

闭包的第二大作用:封闭变量

那么既然闭包可以有这样一个机制,我们可以用它来干什么呢?下面就来介绍介绍闭包这个特殊角色的奇技淫巧。其实上面已经有了第一大作用:延长寿命!现在来看一下他的第二个作用:封闭变量。其实这个也很好理解,闭包闭包,从字面上都可以理解有封闭作用啦。
继续例子:

<html>
    <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    <script>
        var nodes = document.getElementsByTagName('div');
        for(var i = 0, len = nodes.length; i < len; i++){
            nodes[i].onclick = function(){
                alert(i);
            }
        };
    </script>
  </body>
</html>

测试这段代码,就会发现无论点击那个div,最后弹出的结果都是5.这是因为div节点的onclick事件是被异步触发的,当事件被触发的时候,for循环早已经结束,所以i变量的值已经是5,在后续onclick事件查找时肯定就是5啦。

那么怎么解决才能让div返回如我们所愿?这时就是闭包大展身手的时候啦!思路是将每次循环的i值封闭起来, 当沿着作用域链从内到外查找变量i时,会先找到被封闭在闭包环境中的i,这样的话,如果有5个div,这里的i就分别是0,1,2,3,4啦:

for(var i = 0, len = nodes.length; i < len; i++){
    (function(i){       
        nodes[i].onclick = function(){
                console.log(i);
            }
        })(i)
};

第三大作用:模拟面向对象

来看下面用面向对象实现的代码:

var extent = {
    value:0,
    call:function(){
        this.value++;
        console.log(this.value);
    }
};
extent.call();  //输出:1
extent.call();  //输出:2
extent.call();  //输出:3

或者:

var Extent = function(){
    this.value = 0;
};
Extent.prototype.call = function(){
    this.value++;
    console.log(this.value);
};
var extent = new Extent();
extent.call(); //输出:1
extent.call(); //输出:2
extent.call(); //输出:3

如果用闭包的方法,该怎么写呢?

var extent = function(){
    var value = 0;
    return {
        call:function(){
            value++;
            console.log(value);
        }
    }
};
var extent = extent();
extent.call();  //输出:1
extent.call();  //输出:2
extent.call();  //输出:3

领略了这么多的奇技淫巧,是不是对JavaScript的闭包有了更深的理解?其实闭包的用途远不止这么多,更精彩的还需要大家在实践中多多发现。由于作者水平有限,暂时只额能给大家分享到这里,希望后续可以继续了解,在实践中不断学习,成长。

本篇完

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

推荐阅读更多精彩内容