JavaScript--闭包(1)

相关参数和变量都保存在返回的函数中，这种称为“闭包。

需要注意的问题是，返回的函数并没有立刻执行，而是直到调用了f()才执行。

例子：

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

 

你可能认为调用f1()，f2()和f3()结果应该是1，4，9，但实际结果是：

f1(); // 16 //此时会执行push里的function，读取变量i时，i的值已经是4了
f2(); // 16
f3(); // 16

全部都是16！原因就在于返回的函数引用了变量i，但它并非立刻执行。等到3个函数都返回时，它们所引用的变量i已经变成了4，因此最终结果为16。

 

解决思路一

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push((function (n) {  //n是形参
            return function () {  //这个匿名函数就是闭包,将这一整个函数作为返回值返回
                return n * n;
            }
        })(i));                   //将实参i传给function（n），立即执行了function（n）,执行到return时返回了闭包函数这个整体，所以闭包函数内部并没有执行，由于闭包引用了外部function的变量n,所以外部function被引用的变量的内存在执行完毕后没有被回收
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

f1(); // 1  //可以看到后面带括号，此时才会执行闭包函数
f2(); // 4
f3(); // 9

返回闭包时牢记的一点就是：返回函数不要引用任何循环变量，或者后续会发生变化的变量。

 

解决思路二

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function (n) {
            return n * n;
        }(i));                  //将实参i传给function（n）,立即执行
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

console.log(f1);//1
console.log(f2);//4
console.log(f3);//9