avaScript 闭包的理解

JavaScript 学习笔记之闭包

这篇文章是我学习闭包的笔记与总结,后面会有一些例子,结合画图的形式来理解,什么是闭包…..如有错误,还望指正,大神勿喷……

从以下几个方面去说闭包
1. 什么是闭包
2. 为什么使用闭包
3. 何时使用闭包
4. 如何使用闭包
5. 闭包是如何形成的
6. 闭包的缺点

什么是闭包

其实闭包它并不是一种(类似于对象)看得见摸得着的东西,它是一种机制;
是一种:能够让你重复使用变量,而又不会造成变量污染 的机制

为什么要使用闭包

  • 为什么使用闭包要从全局变量和局部变量的优缺点说起

    1. 全局作用域:保存全局变量,可以反复使用,而且随处可用,但是会造成全局污染
    2. 局部作用域:保存局部变量,仅函数内可用,而且不可反复使用

何时使用闭包

既要重用变量,又保护变量不被污染

如何使用闭包

  • 外层函数 包裹受保护的变量和操作变量的内层函数

  • 外层函数要返回内层函数,有 3 种返回方式:

    1. return function
    2. 直接给全局变量赋值一个内部function
    3. 将内部函数保存在一个对象的属性或数组元素中
  • 调用外层函数,用全局变量接住返回的内层函数的变量(这一步形成闭包)

闭包如何形成

外层函数被调用后,外层函数的作用域对象(Active Object),无法释放,被内层函数(scope)引用着。

闭包的缺点

  • 闭包比普通函数更占内存,外层函数的作用域对象(AO)始终存在
  • 造成内存泄漏,解决的办法(释放闭包):将引用内层函数对象的全局变量置为 null,导致内层函数被释放,导致外层函数的AO被释放

最后在来举几个栗子:
1. 简单的例子

function factory () {
    var num = 1;
    return function () {
        console.log( i++ );
    }
}
var getNum = factory(); // => function ...
getNum(); // => ?
getNum(); // => ?
getNum(); // => ?
i++ ;   // 污染
getNum(); // => ?

画图理解上述栗子

1.png

代码运行到红线部分的时候,执行环境栈中仅有一个全局执行环境(window),此时 window 中有两个全局变量(标识符):factory 、getNum


2.png

此时的ESC中的活动执行环境为 factory,在factory的AO中,有变量 num,此时num的值为1. (绿色线条的关系就形成了闭包)

3.png

factoryECS出栈之后,由于getNum引用着 factory的内层函数,而内层函数的scope也引用着factory,所以factory的活动对象并没有被释放


5.png

当getNum的EC进栈之后,getNum的AO中并没有num变量,所以会向父级进行查找,找到之后console.log( num );并进行++操作;
[图片上传失败...(image-a7be63-1530276074470)]

原理同上。

2. 鄙视面试题

function outer () {
    for (var i = 0, arr = []; i < 3; i++) {
        arr[i] = function () { console.log(i); }
    }
    return arr;
}
var ot = outer();  // => arr
ot[0]();  // =>?
ot[1]();  // =>?
ot[2]();  // =>?

画简图理解:

6.png

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

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,114评论 0 13
  • 闭包没有想象的那么简单 闭包的概念在JavaScript中占据了十分重要的地位,有不少开发者分不清匿名函数和闭包的...
    老马的春天阅读 724评论 2 8
  • 来源于 现代JavaScript教程闭包章节中文翻译计划本文很清晰地解释了闭包是什么,以及闭包如何产生,相信你看完...
    71f241c96a34阅读 569评论 0 1
  • 古龙最牛的作品当属《绝代双骄》。有三点:一、多数作品读者是不知道真相的,直到最后才真相大白;而《绝》一开始就告诉读...
    兔子David阅读 236评论 0 1
  • 美国作家艾伦•加纳著写的《谈话的力量》一书,艾伦・加纳是美国知名的沟通学咨询专家。他教授过数百期“谈话技巧”培训班...
    紫血寒天阅读 883评论 1 1