• js 闭包


    原文链接是:http://www.w3cfuns.com/blog-5478103-5409749.html
        <p>闭包是js语言学习中一个必不可少的部分,如果你熟悉Angularjs框架,那么你会发现闭包在Angularjs中经常会使用到。如果你对闭包是什么东西或者连闭包都没听过的话,建议你先阅读一下大牛的文章。http://www.cnblogs.com/mzwr1982/archive/2012/05/20/2509295.html</p> 文章通俗易懂,博主在初了解闭包时也是参考的该篇文章~
            <p>废话不多说,正戏开始。</p>
            
            题目:下面一段Html结构,如何实现当点li时输出该li的索引。
           

    <ul>
    <li>这是第一条alert(0);</li>
    <li>这是第二条alert(1);</li>
    <li>这是第三条alert(2);</li>
    </ul>

      误区:有的童鞋就会说,这个很好解决啊,,然后噼啪噼啪一顿敲,就成了下面这样。

    <ul id="test">
    <li>这是第一条alert(0);</li>
    <li>这是第二条alert(1);</li>
    <li>这是第三条alert(2);</li>
    </ul>
    <script type="text/javascript">
        var elements = document.getElementById('test').querySelectorAll('li');
        for (var i = 0; i < elements.length; i++) {
            elements[i].onclick = function () {
                alert(i);
            }
        }
    </script>


            结果拿着上面的代码一运行,无论点哪一个都是alert出来2。这是因为在for循环是i一直在累加,最后i的值当然就是2了。为了解决这个我们只有想办法把每次的遍历li的索引给记录下来。下面就是我们闭包登场的时候了。
     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <ul id="test">
        <li>这是第一条</li>
        <li>这是第二条</li>
        <li>这是第三条</li>
    </ul>
    <script type="text/javascript">
        var elements = document.getElementById('test').querySelectorAll('li');
        for (var i = 0; i < elements.length; i++) {
            (function () {                                                        //用匿名函数构成一个闭包
                var j = i;                                                        //将i的值保存到闭包的变量j中        
                elements[i].onclick = function () {
                    alert(j);
                }
            })();                                                                        //立即调用该匿名函数
        }
    </script>
    </body>
    </html>


            细心的朋友就会注意到我们原来绑定onclick事件的函数外面多了一个匿名函数,这个匿名函数就是构成一个闭包,并把j保存到该闭包的变量中。这样循环3次就会得到3个不同且独立的变量j,每一个变量j存在于单独的闭包中。如果你对OOP熟悉的话,这个匿名函数闭包其实就类似于一个对象,而j是这个对象的成员变量。for循环就产生了3个闭包也就是三个对象,且各个对象之间是独立存在的。
            希望对学习前端的朋友有帮助,谢谢。本文完!~

  • 相关阅读:
    AcWing 852. spfa判断负环 边权可能为负数。
    面试题 02.01. 移除重复节点
    1114. 按序打印
    剑指 Offer 38. 字符串的排列
    557. 反转字符串中的单词 III
    645. 错误的集合
    面试题 05.03. 翻转数位
    1356. 根据数字二进制下 1 的数目排序
    748. 最短完整词
    剑指 Offer 32
  • 原文地址:https://www.cnblogs.com/zoumiaomiao/p/4913211.html
Copyright © 2020-2023  润新知