JavaScript 闭包

文章目录

1. 1. 定义
2. 2. 示例1
3. 3. 示例2
4. 4. 逗号操作符

定义

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

示例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,

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