zoukankan      html  css  js  c++  java
  • JavaScript 闭包

    定义

    当内部函数被保存到外部时,会生成闭包。闭包将会导致原有作用域链无法释放,造成内存泄漏。

    示例1

    如下所示 生成了闭包

    <script type="text/javascript">
            function test() {
                var arr = [];
                for (var i = 0; i < 10; i++) {
                    arr[i] = function () {
                        document.write(i + " ");
                    }
                }
                return arr;
            }
            var myArr = test();
            for (var j = 0; j < myArr.length; j++) {
                myArr[j]();
            }
        </script>

    输出结果为

    如上结果并不是我们想要的结果,分析如下

    test函数执行,从预编译到执行完成返回arr。i和arr都为test的变量。通过执行变成了10,等到arr里的函数执行的时候,访问的i都是test的i,所以都变车了10

    解决如下

    function test2() {
                var arr = [];
                for (var i = 0; i < 10; i++) {
                    (function (j) {
                        arr[j] = function () {
                            document.write(j + " ");
                        }
                    }(i))
                }
                return arr;
            }
            var myArr2 = test2();
            for (var j = 0; j < myArr2.length; j++) {
                myArr2[j]();
            }

    输出结果为

    利用积极执行函数的特性,立刻执行,打印的j都是属于立即执行函数的j,保存出来后数组存储的每个函数访问的j都是对应的立即执行执行函数的,所以打印出来的是想要的结果。

     示例2

    function test() {
                var a = document.getElementsByTagName('li');
                for (var i = 0; i < a.length; i++) {
                    a[i].onclick = function () {
                        console.log(i);
                    }
                }
            }
            test();

    给li添加onclick事件,并打印对应索引,对于上面这种写法,打出结果如下

    根据代码可看出,onclick这个函数被存储在了外面,形成了闭包,解决如下

     function test2() {
                var licollection = document.getElementsByTagName("li");
                for (var i = 0; i < licollection.length; i++) {
                    (function (j) {
                        licollection[j].onclick = function () {
                            console.log(j);
                        }
                    }(i));
                }
            }
            test2();

    输出结果如下

    我们用了立即执行函数来避免闭包带来的问题

    逗号操作符

    var a= (2,3),返回3,

    逗号运算符会返回逗号后面的计算结果。

  • 相关阅读:
    C# 根据URL获取网页截屏
    Django——WEB应用程序(手写程序),HTTP协议,BS CS架构
    jQuery——标签操作之(样式、文本内容、属性、文档处理)操作
    jQuery——简介,使用
    jQuery下载及应用
    javaScript——案例演示:点击有惊喜
    javaScript——案例演示:弹出模态框
    JavaScript——DOM操作+案例演示
    JavaScript——BOM操作
    JavaScript——杂碎小知识
  • 原文地址:https://www.cnblogs.com/FashionDoo/p/10516355.html
Copyright © 2011-2022 走看看