zoukankan      html  css  js  c++  java
  • 坑爹的JS闭包,怎么去理解才是正确的

      有好些天没写文章了,前面一直在搭建自己的博客后台,由于域名备案一直没有下来,就只能继续在这里写了。

      今天写些什么了,一般大家比较关心,尤其学JS的,就是又爱又恨的一个概念——闭包。

      说老实话,这个概念大家百度可能会百度到一堆的答案,但真正能弄懂的又有几个了?在这里我不是打广告,到目前为止,对闭包描述最清晰正确的在《你不知道的javascript》一书中。而且这本书很适合各位对javascript这门编程语言深入了解。

      说了这么多,那么闭包的定义到底是什么了。大家一定要注意,不是说能够访问到其他作用域的变量就是闭包,这是很笼统的。准确来说,闭包是基于正常的垃圾回收处理机制下的。也就是说,一般情况一个函数(函数作用域)执行完毕,里面声明的变量会全部释放,被垃圾回收器回收。但闭包利用一个技巧,让作用域里面的变量,在函数执行完之后依旧保存没有被垃圾回收处理掉。

      可以文字你不太喜欢看,那好,我直接上代码。这可能是很多解说闭包的案列,先拿来用再说。

    function foo(x) {
        var tmp = 3;
        return function (y) {
            alert(x + y + (++tmp));
        }
    }
    var bar = foo(2); // bar 现在是一个闭包
    bar(10);
    

      我们来分析一下这一段代码,在foo中,声明一个变量tmp,他属于foo作用域下的变量。函数返回一个函数,这个函数被嵌套,函数内部弹出x+y(++tmp)。这是个人都看得懂啊,那为什么会出现闭包,怎么出现的了。这接下来就是看执行的过程了,首先执行var bar = foo(2);那么foo就执行了,参数2也传进去了,但是执行完毕之后,tmp变量以及参数x就已经被释放回收了吗?并没有,因为返回值里面还等待使用这些变量咯,所以此时,foo虽然执行了,但是foo的变量并没有被释放,在return在等待继续使用这些变量了,这个时候bar就是一个闭包。

      然后我们再执行bar,结果是16,另外你再把bar里面的参数改改,是不是结果又变化了勒?这就是闭包的神奇之处,它改变了JS的内存机制有木有。

      然后我们再看看长得很像闭包的形式

    function foo(x) {
        var tmp = 3;
        function bar(y) {
            alert(x + y + (++tmp));
        }
        bar(10);
    }
    foo(2)
    

      如果按照某些教程说的,可以父级作用域访问子级作用域的变量,foo在全局中执行,执行过程中未必没有访问局部变量?访问到了吧,但他不是闭包。按照我之前说的思维再走一遍。

      函数foo执行,执行完执行完毕之后没我再执行的时候,是不是里面的tmp,bar函数又重新声明了。那么根本就没有阻止foo作用域中的变量被垃圾回收吧,那怎么又叫做闭包了?

      再结合一个闭包运用的最多的例子,就是for循环的问题,比如:

    for(var i = 0;i<10;i++){
       console.log(i)  
    }
    

      这看起来没有任何问题啊,会输出0,1,2,3,4,5,6,7,8,9

      一般出问题出在哪里了,比如为很多个元素绑定一个点击事件的时候

      我们期望的是点击到某一个按钮就会输出第几个被点击到了语句,但是很遗憾,你永远达不到你想要的效果,为什么了。

      因为你点击事件是在点击后才触发的,而for循环当你执行只后就已经全部执行完毕了执行完毕后 i 的值会是比len大 1 的,所以不管你怎么点, i 的值在for执行完毕之后已经固定了,改变不了了。那有什么办法保存这个 i 的值了。除了最基础的给元素节点自定义属性这个方法之外,就是我们所说的闭包了。那么,怎么用?

      我现在的需求是要保存住这个 i 的值,如果在当前作用域下是做不到的。而闭包的作用就是让当前作用域的值不会被垃圾回收,由于在ES5中没有块级作用域的说法,所以得利用函数自己创建一个作用域:

    var btnList = document.getElementsByClassName("btn"),
          len = btnList.length;
    for(var i = 0;i<len;i++){
         (function(j){
                btnList[j].onclick = function(){
                console.log("第"+j+"个按钮被点击到了") 
             }    
        })(i)
    }    
    

      这又哪里产生了闭包了。别急,我们一个个分析。for循环每一次都执行一个 IIEF (自执行函数),每一次变量 i 被当做参数传到IIEF中去 , 那么这个自执行函数中创建了一个变量,参数 j 然后元素节点 btnList 绑定一个onclick事件,执行函数里面需要用到这个参数 j ,但是你又没点 , 那么这个遍历 j 就没有被清理 , 就一直在参数里面被保存着 , 每一个IIEF都做一样的事情 , 所以这个时候就产生了闭包 , 变量 j 并没有被回收,依然在等待你使用。

      不知道你是否真正弄懂了哈,在看闭包之前先得把作用域给理解,否则你也是看不懂的。

      实际上,在很多同学在平时练习过程中或多或少都用到过闭包,只不过因为概念不清晰所以你才不知道,现在翻翻你之前写的代码,如果真正懂了,那么你会很轻易就找到你使用过的闭包了。

  • 相关阅读:
    ASP.NET MVC 音乐商店 1 创建项目
    ASP.NET MVC 音乐商店 2.控制器
    TCP/IP体系结构
    C#线程系列
    多条件分页查询细节
    持续集成引擎 Hudson 和IOC 引擎StructureMap
    GoF著作中未提到的设计模式
    Thoughtworks
    Thoughtworks2
    监控 SQL Server 的运行
  • 原文地址:https://www.cnblogs.com/JIANGCHEN520/p/7118656.html
Copyright © 2011-2022 走看看