闭包的理解

接触过JS的同学们一定都知道闭包这个名词,在我刚开始学习JS的时候,闭包对于我是一个很高大上很难理解的存在,今天终于能鼓起勇气来谈一谈我眼中的闭包。
首先,我们来看看闭包的概念
在MDN中,闭包的概念描述为:

闭包是一个函数和函数所声明的词法环境的结合。它由两部分构成:函数,以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。

阮大对于闭包的解释为:

闭包就是能够读取其他函数内部变量的函数。

通过上面的两种解释,我们就能总结出闭包的一些特点:

  1. 闭包首先是一个函数
  2. 闭包能访问到本身函数之外的变量

总结出上面两个概念就很好理解了,我们看一段代码是不是闭包,只要看它是不是包含上面两种特点就好了,下面我们来看一个示例:

var a = 'beiluoshimen';
function fn () {
   alert(a);
}

我们看上面的一段代码,首先fn是一个函数,其次变量a就是一个变量,但是它并不在fn之中,所以变量a和函数fn就构成了一个闭包。
但是我们常看到的闭包都是这样的

function makeFunc() {
  var name = "Mozilla";
  function displayName() {
    alert(name);
  }
  return displayName;
}

var fn1 = new makeFunc();
fn1();  // "Mozilla"

// displayName是一个函数,name是一个displayName之外的变量,他们就构成了一个闭包

那么为什么要在这个闭包外面再套一个函数呢?而且还要把displayName return出去;
这我们就要说到闭包的作用了:

  1. 减少全局变量/创造一个局部变量
  2. 读取函数内部的变量
  3. 让变量一直存在于内存中

所以上面的代码中,makeFunc()的作用域中创造了一个局部变量name,这个变量在外部是访问不到的,但是通过我们return displayName,我们就能够在外部访问到这个变量了。

所以,闭包的概念并不是很难理解,只要根据闭包的特点就可以认出它。

只是我们经常看到的关于闭包的题目其实都是和其它的一些知识点结合在一起,导致了我们以为闭包的理解很困难。下面我们以几道题目作为示例:

问题1

上面的题目我们可以根据上文的闭包特点来分辨出两个闭包,但是导致最后两个输出结果不同的原因并不在于闭包,而是在于this的指向不同导致的。

  1. 第一段代码在最后调用方法时,this指向的是全局的window对象,此时window.name = "The Window;"所以输出的结果是"The Window"
  2. 第二段代码在运行var that = this;时,this指向的是object对象,此时object.name = "My Object;",而that保存了此时的this对象,所以最后输出的that.name = "My Object;"

关于this的只是大家可以再仔细了解一下。

下面我们再看一段代码

function Foo() {
    var i = 0;
    return function() {
        console.log(i++);
    }
}
 
var f1 = Foo(),
    f2 = Foo();
f1();
f1();
f2();

大家可以思考下这段代码输出什么结果?
没错,就是0 1 0
原因就是,每个闭包都保存在不同的内存中,所以f1和f2并没有关系。

关于闭包的理解和题目都还有很多,但是我觉得只要我们一直清楚地认识到闭包的特点:

  1. 闭包首先是一个函数
  2. 闭包能访问到本身函数之外的变量

就能处变不惊,处理闭包相关的问题!

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

推荐阅读更多精彩内容

  • 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。 一、变量...
    zouCode阅读 1,269评论 0 13
  • 闭包:从字面意思来理解就是封闭和包裹,换句话说,就是在函数内部定义的变量,在函数的外部无法访问到,因此就说函数构成...
    清葉阅读 551评论 1 0
  • js的作用域链是由当前执行环境下的变量对象以及上层的执行环境下的变量对象组成,它保证了当前执行环境对符合访问它的权...
    a4316976150e阅读 304评论 0 0
  • 未来总是有太多的不确定,唯一可以把握的是当下
    cherry960阅读 342评论 0 0
  • 早上冒着大雨出门办事,午睡后感觉身体僵硬,没锻炼,浑身不舒服。做套养生功,站了会桩后,好多了。这两天困,累,乏。脚...
    王悦yue阅读 127评论 0 5