彻底弄懂JS中闭包

DevYK 发布于2019-08-20 15:10 / 1848人阅读

闭包概念:

　　闭包就是有权访问另一个函数作用域中变量的函数.
分析这句话:

　　1.闭包是定义在函数中的函数.
　　2.闭包能访问包含函数的变量.
　　3.即使包含函数执行完了, 被闭包引用的变量也得不到释放.

例子分析-1:
    
        function add(){
            var i = 0
                arr = [];
            for(; i < 10; i++){
                arr.push(function(){
                    alert(i);
                });
            }
            return arr;
        }
        var temp = add();
        temp[0]();
        
        大家猜猜这个结果是多少? 0, i, 10?
        我想大家会说是0.
        但是结果是10.
        
        我想大家想的应该是这样滴:
         i = 0, arr.push(function(){
            alert(0);
         })
         i = 1, arr.push(function(){
            alert(1);
         })
        ...
         i = 10, arr.push(function(){
            alert(10);
         })
         
        咋一看, 这个确实合理, 根据闭包的定义, 具体这个当然是上面分析的那样了.
        问题就出在这个变量的理解上.
        
        1.i是变量不假, 但是i在for循环的时候, 一直在不断变化. 也就是说这个i在参与for循环的时候, 值是不确定的, 等到for执行完后, i的值才确定.
        2.每次push一个匿名函数表达式时, 那只是定义一个函数, 并没去执行那个函数, 所以那个函数里引用的外部变量都是原封不动的放进去的.
          换句话说, 就是这个匿名函数在最后执行的时候, 才会去查找作用域链, 直至找到那个变量i为止.
        
        也就是:
             i = 0, arr.push(function(){
                alert(i);
             })
             i = 1, arr.push(function(){
                alert(i);
             })
             ...
             i = 10, arr.push(function(){
                alert(i);
             })
        
        执行add()时, i参与循环完毕, i = 10. 
        执行temp[0]()时, 匿名函数会查找i, 先看自己, 我的i有值吗?没有. 再找他的上级函数, i有值吗?有, i = 10. 查找结束.
        至此, 不管执行temp[0](), 还是temp[5](), 还是temp[10](), 结果都是10.
        
        改一下上面的例子, 让它符合我们的预期要求.
        
        例子分析-2:
        
          function add(){
            var i = 0
                arr = [];
            for(; i < 10; i++){
                arr.push(
                (function(n){
                    return function(){
                        alert(n);
                    }
                })(i)//注意这个变化

                );
            }
            return arr;
        }
        var temp = add();
        temp[0]();
        temp[1]();
        ...
        
        这次结果是预期的,结果是 0 , 1 , 2,  3 ... 10
        
        分析一下循环那部分.
        (function(n){
            return function(){
                alert(n);
            }
        })(i)

        这个叫做立即执行的匿名函数表达式(不清楚这种写法的, 可以先google下, 或者看我的多带带一篇专门介绍)
        
        i这个是时候就被当做参数传递了, 每次这个匿名函数执行时, i都会把自己的值复制一份给n
        return语句中的匿名函数引用着n, 此时已经和i无关了.
        
        每次匿名函数表达式执行时, 都会保存一个不同的n.
        return语句中的匿名函数每次也引用着不同的n。
        
        形象点就是这样:
            arr.push(
                (function(n = i = 0){
                    return function(){
                        alert(n = 0);
                    }
                })(i = 0)
            )
            arr.push(
                (function(n = i = 1){
                    return function(){
                        alert(n = 1);
                    }
                })(i = 1)
            )
            ...


  闭包的介绍就到此为止了.

转自http://www.cnblogs.com/tinkbe...

云服务器 GPU云服务器编程语言中的+闭包 js闭包 js闭包的理解 js面试闭包如何回答

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82050.html

彻底弄懂函数防抖和函数节流

摘要：若时间差大于间隔时间，则立刻执行一次函数。不同点函数防抖，在一段连续操作结束后，处理回调，利用和实现。函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。原博客地址，欢迎star 函数防抖和节流函数防抖和函数节流：优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 评论0 收藏0
【js 闭包】

摘要：但，这还不是闭包。通过访问外部变量，一个闭包可以维持这些变量。闭包经常用于创建含有隐藏数据的函数但并不总是这样。有人说应该在文章结尾对闭包进行总结，可惜小弟才疏学浅，不能给出一个精辟的总结。越来越觉得国内没有教书育人的氛围，为了弄懂JS的闭包，我使出了我英语四级吃奶的劲去google上搜寻着有关闭包的解释，当我看到stackoverflow上这一篇解答，我脑中就出现了一句话：就是这货...

keelii 2019-08-20 15:16 评论0 收藏0
前端基础

摘要：谈起闭包，它可是两个核心技术之一异步基于打造前端持续集成开发环境本文将以一个标准的项目为例，完全抛弃传统的前端项目开发部署方式，基于容器技术打造一个精简的前端持续集成的开发环境。这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。不论你是javascript新手还是老鸟，不论是面试求职，还是日...

graf 2019-08-21 18:38 评论0 收藏0
JavaScript深入浅出

摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

blair 2019-08-21 18:26 评论0 收藏0
JavasScript重难点知识

摘要：忍者级别的函数操作对于什么是匿名函数，这里就不做过多介绍了。我们需要知道的是，对于而言，匿名函数是一个很重要且具有逻辑性的特性。通常，匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果...

forsigner 2019-08-21 18:36 评论0 收藏0