闭包,关于闭包用途

1. JS中变量的作用域

在理解闭包之前,我们得弄清楚JS中变量的作用域原理,它分为全局作用域和局部作用域,它有一个特点就是局部可以获取全局的声明变量,而全局却不能得到局部声明的变量,我们先来看一个小例子:

                                     var num = 1902;

                                     function methods() {

                                       var qty = 25;

                                       console.log(num);

                                     }

                                     methods();  // 1902
  
                                     console.log(qty);  // 报错,找不到 qty 变量;

当然在局部声明变量的时候一定要用var或者let,不然会在全局生成一个变量,容易照成全局污染,上面代码如果qty没有var声明:

                                    var num = 1902;

                                    function methods() {

                                        qty = 25;

                                        console.log(num);

                                     }

                                     methods();  // 1902;

                                     console.log(qty);  // 25;

2.什么是闭包

那么现在问题来了,如果我们非要从外部来读取局部变量中的声明变量呢,寻常方式不行,我们可以变通一下,就是在函数内部再嵌套一个函数,然后返回这个嵌套函数:

                                           function methods() {

                                                 var qty = 25;

                                                 return function num() {

                                                 console.log(qty);

                                                }
  
                                             }

                                            var num1 = methods();

                                            num1()  // 25

这样,控制台就会打印出 qty 变量的值了,其实在上面的代码中,被返回的函数 num()就产生了闭包,由于在js中,只有函数内部的子函数才能读取局部变量,所以可以把闭包理解成定义在一个函数内部的函数,简单的说,JavaScript允许使用内部函数:即函数定义和函数表达式位于另一个函数的函数体内而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。

3.闭包的用途

我们接着探讨闭包的表达形式以及用途。
(1)匿名自执行函数

                                         (function () {
                                            var methods = function () {
                                                console.log('执行完函数后销毁')
                                            };
                                            methods();
                                        })();

上面代码也是闭包的应用,运用于函数只会执行一次的场景,执行完便会被释放。
(2)给对象设置私有变量

                                      var result = function () {
                                             var count = 1;
                                             return function () {
                                                  count++;
                                                  console.log(count)
                                              }
                                        }()
                                          result(); // 2
                                          result(); // 3
                                          result(); // 4
                                          result(); // 5

上面代码可以保存自己的私有变量,防止代码之间的冲突。
(3)异步执行函数
下面先看一个小例子:

                                      for (var i = 0; i < 5; i++) {
                                              console.log(i);  //0,1,2,3,4
                                      }
                                      for (var i = 0; i < 5; i++) {
                                             setTimeout(() => {
                                                     console.log(i); //5,5,5,5,5
                                            }, 0)
                                      }

为什么会出现上述差异呢,原因在于setTimeout是异步加载,所以为先循环结束后输出最后结果,如果我们就是想实现输出0,1,2,3,4呢。那就要用到闭包了:

                                          for (var i = 0; i < 5; i++) {
                                                (function (i) {
                                                      setTimeout(() => {
                                                            console.log(i); //0,1,2,3,4
                                                      }, 0);
                                                })(i);
                                            }

上面就是异步调用闭包,它可以让变量值始终保存在内存中,即使外部的执行环境已经结束了。

4.闭包的优缺点

(1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

(2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

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

推荐阅读更多精彩内容

  •   函数表达式是 JavaScript 中的一个既强大有容易令人困惑的特性。定义函数的的方式有两种: 函数声明; ...
    霜天晓阅读 817评论 0 1
  • 这是16年5月份编辑的一份比较杂乱适合自己观看的学习记录文档,今天18年5月份再次想写文章,发现简书还为我保存起的...
    Jenaral阅读 2,746评论 2 9
  • 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。 一、变量...
    风萧萧易水寒_1196阅读 257评论 0 0
  • 1 概述 1.1函数的声明 JavaScript 有三种声明函数的方法。 (1)function 命令 funct...
    徵羽kid阅读 411评论 0 1
  • 函数是一段可以反复调用的代码块。函数还能接受输入的参数,不同的参数会返回不同的值。 概述 函数的声明 JavaSc...
    许先生__阅读 446评论 0 1