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,

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

  • 相关阅读:
    基于element-ui图片封装组件
    计算时间间隔具体每一天
    C语言学习笔记 —— 函数作为参数
    AtCoder Beginner Contest 049 题解
    AtCoder Beginner Contest 048 题解
    AtCoder Beginner Contest 047 题解
    AtCoder Beginner Contest 046 题解
    AtCoder Beginner Contest 045 题解
    AtCoder Beginner Contest 044 题解
    AtCoder Beginner Contest 043 题解
  • 原文地址:https://www.cnblogs.com/FashionDoo/p/10516355.html
Copyright © 2011-2022 走看看