理解js闭包(浅谈)

 https://juejin.cn/post/6938239098935050247

 

image.png
--选自 MDN

一:闭包允许函数访问并操作函数外部的变量,只要变量或函数存在于声明函数的作用域内,闭包可以使函数能够访问这些变量或函数,简单理解就是闭包起到了一个桥梁或纽带作用,使函数内部可以访问到函数外部声明的变量;

 例一: 一个简单的闭包例子:
          let without_variable = 'Hello,World';
          function Visit(){
              console.log(without_variable)  //Hello,World
          }
          Visit()
复制代码

不知道这个例子会不会对一些已经觉得理解闭包的前端造成一些震撼,当我读到 MDN 的 每当创建一个函数,闭包就会在函数创建的同时被创建出来 这句话时 Why! What's happen ! 就突然感觉到对比包根本就不了解,于是鄙人去查了查资料 (《JavaScript忍者秘籍》、《JavaScript高级程序设计》),

image.png --选自JavaScript忍者秘籍

image.png --JavaScript高级程序设计; 这个 通常 属实是让我。。。;

好回过头来让我们继续去看上面的例子,我们可能写过成千上百行这样的代码,但并没有意识到我们正在创建一个闭包; 例子说明:变量 without_variable 和函数 visit() 都是创建在全局作用域中,这个作用域(实际上是一个闭包)只要程序在运行就不会消失;上面的例子虽然也是一个闭包,但它并没有将闭包的又是展现出来,接下来我们将在写一个例子,对闭包有一个入门的认识;

例二:
      let without_variable = 'Hello,World';
          function Visit(){
              console.log(without_variable)
              let num = 1
              return function Internal(){
                  console.log(num)
              }
          }
           
      let perform = Visit()
      perform() // Hello,World  // 1
复制代码

在本例中,首先在全局中声明变量 without_variable 和函数 Visit() 并在函数内部声明了一个变量 num 和函数 Internal() 并在函数 Internal() 内访问了外部变量 num ; 闭包的一个显著特点在上面的例子中已经展现出来,即 通过在函数内部创建一个闭包,在函数的外部也可以访问函数内部的变量;如文章开头所述闭包在本例中就是起到了一个沟通函数外部与函数内部的一个桥梁作用;这只是闭包的一个特点,下面会通过写一个例子了解到闭包的第二个特点,即,闭包会将这些变量的值始终保持在内存中

 例三:
       function fn1(){
            let num = 1;
            add=function(){
                num += 1
            }
            return function fn2(){
                console.log(num);
            }
        } 
        let perform = fn1();
        perform(); 
        add();
        perform(); 
复制代码

上例中 分别执行了两次 perform 打印结果为 1 、 2 ,这说明了 num 变量一直存在于内存中; 原因说明:f1是f2的父函数,而f2被赋给了一个全局变量 perform ,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。 --阮一峰老师的网络日志

思考题:文章开头说过 每创建一个函数,闭包就会在函数创建的同时被创建出来,现在例三又说明 闭包会将这些变量的值始终保持在内存中,那么普通函数创建的闭包会将变量保存在内存中,还是会被回收,(鄙人先去了解一下,下期回复,下期作者会详细说明一下闭包的优缺点) 欢迎讨论

 

作者:一个只会旁门左道的前端
链接:https://juejin.cn/post/6938239098935050247
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

posted @ 2021-03-11 13:34  tommy·L  阅读(56)  评论(0编辑  收藏  举报