js中的闭包

在上一篇文章“执行环境和作用域”中,我试着梳理了执行环境和作用域的关系。但实际上,文章中并没有提到作用域,而是介绍了执行环境和作用域链。这里先把上篇文章的坑填了。

上篇文章的最后,我提了一个问题。这里把代码稍微修改下,如下:

var name = 'window';

outer();

function outer(){
    var name = 'outer';
    inner();    //输出什么?
}

function inner(){
    console.log(name);
}     

这段代码很简单,但很容易迷惑人。很多人可能会认为,应该输出“outer”,但实际上结果确实“window”。这是为什么呢?

1、作用域和执行上下文的区别

作用域和执行上下是两个不同的概念。执行上下文在上篇文章中已经解释过了:在函数执行时创建。那么,作用域怎么理解呢?

作用域可以理解为一套规则,这套规则用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找。同执行环境一样,作用域只有两种(不考虑eval):全局作用域与函数作用域。

在js中代码整个的执行分为两个阶段:代码编译和代码执行。代码编译由编译器完成,将代码翻译成可执行代码。代码执行由js引擎完成,主要任务是执行可执行的代码。在代码编译阶段,作用域规则就已经被确定了。到代码执行时,执行上下文被创建,同时,作用域链作为作用域规则的具体实现被构建出来。过程如下图:


0.jpg

再回头去看开头的问题,就不难理解了:在编译阶段,inner函数的相关的作用域规则就已经确定了,在而outer函数中执行时,只是具体地实现了相关的作用域的规则,也就是构建作用域链,而这个作用域链上面没有outer函数执行环境相对应的变量对象,而是有全局执行环境对应的window对象,因此,结果是‘window’。

2、闭包

闭包在js高程中的解释是:有权访问另一个函数作用域中的变量的函数。简单说就是,假设函数a是定义在函数b中的函数,那么函数a就是一个闭包。正常情况下,在函数的外部访问不到函数内部的变量,但有了闭包就可以间接的实现访问内部变量的需要。也就是说,闭包是连接函数内部和外部的桥梁。这就是闭包的第一个作用:访问函数内部的变量。还有另外一个作用就是:让被引用的变量值始终保持在内存中。

在上一篇文章中提到代码当执行到一个函数时,会创建一个临时的活动对象,并把这个对象作为变量对象推入环境栈中。当这个函数执行完的时候,这个对象就会出桟,并被销毁。但当闭包中引用了函数中的变量时,那么,这个变量就会保存在内存中。也就是上面提到的闭包的第二个作用。之所以为这样,是因为JavaScript的回收机制。

基本所有浏览器都是使用“标记清除”的方式回收内存。也就是说,当变量进入执行环境的时候(在函数中声明一个变量),就给变量添加标记,而当函数执行完的,变量不再被引用的时候,再添加删除的标记,垃圾收集器就会自动清楚这个变量占有的内存。但在闭包中引用了函数中的变量,而闭包又被当作结果返回时,闭包中的因为被引用就不会被清除。例如,下面的代码:

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

}

var fn2 = fn1();

fn2();      //输出2

fn2();      //输出3

在这段代码中,fn1中的闭包函数被当作结果返回,在闭包中的引用的变量a因为被引用而没有被清除,一直保存在内存当中,所以执行fn2的时候会输出不断增加的结果:2和3。

使用闭包时需要注意的问题

1、由于闭包会使得函数中被引用的变量一直保存在内存中,消耗内存,所以谨慎使用闭包,否则会造成网页的性能问题。
2、闭包会改变父函数内部变量的值。如果父函数再次被执行的,而在外部已经执行过闭包修改变量的值,那么,这次执行的结果就会和上次的不一样。

最后再来一段代码,想下输出的代码,没疑问的化,闭包的运行机制基本就掌握了:

var name = "window";

var obj = {
  name : "obj",
  getName : function(){
    return function(){
      return this.name;
    };
  }
};
  
console.log(obj.getName()());

写在结尾:
如果觉得我写的文章对你有帮助,欢迎扫码关注我的公众号:海痕笔记
微信号:haihenbiji


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

推荐阅读更多精彩内容

  • 1. 定义 一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数), 因而这些变量也是该表达式的一部分....
    寒枫Alex阅读 255评论 0 0
  • 闭包是JS中的一个重要的概念,在模块封装,保存变量中有着重要的作用,掌握闭包在前端开发中占着非常重要的角色。在了解...
    Bennt阅读 334评论 0 2
  • 今天研究了一波js中的闭包,分享一下自己的理解。 一、变量的作用域 要理解闭包,首先必须理解Javascript特...
    阿布_0caf阅读 245评论 0 2
  • 中国摄影胜地景点最适合的拍摄时间表 风光摄影最适合的时间:日出和日落的前后一小时 当照片光线复杂的时候,以次亮的地...
    后知后觉S阅读 274评论 0 1
  • 杜派一个人坐在二层食堂的窗前,面前放着一厅可乐,玩弄着手机,春日的阳光打在这个少年的脸上,而他的脸却没有像窗外的桃...
    望穿天花板阅读 397评论 0 0