Closure

概念

直接来看两个函数的对比

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

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

执行 count1()调用第一个函数，很简单。我们会得到 arr1 = [1, 4, 9]

那么第二个函数呢？它居然在 arr2.push() 中执行了函数定义，也就是说，当我们调用 count2() 以后，arr2中将不会是三个数字，而是三个函数。

我们得继续调用 arr2 中的函数才能获得结果。

已知执行 count2() 得到 arr2， 而 arr2 中都是函数方法，需要括号来执行。

尝试 count2()[0]()，居然得到结果为 16 ！

这是为什么呢？梳理一下函数执行的过程。

1. count2()执行时，定义 arr2 为空。
2. 接着进行 for 循环赋予 arr2三个函数。注意，就在这里发生了变化。由于这种闭包结构的特殊性，i * i并不会立即执行，因为它外层还包裹了一个函数定义嘛，你得调用函数才能得到结果。
3. 随着 for 循环的运行，i * i 从 1 * 1变化成 2 * 2，再变化...
4. 等到 return arr2的时候，i 已经为 4 了，arr2中已经是三个返回 4 * 4的待执行函数，当你执行以后，结果当然都是 16 。

这也就是说，在闭包结构下，引用这种变化量是很危险的。

如果一定要引用的话，需要传入一个立即执行的匿名函数。

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

也就是这一块

(function(n) {
    return function() {
        return n * n;
    }
})(i);

匿名函数的语法是这样的：(function (x) { return x * x }) (3);

作用域

当利用了作用域以后，就可以在函数里封装状态了。

function create_counter(initial) {
    var x = initial || 0;
    return {
        inc: function () {
            x += 1;
            return x;
        }
    }
}

inc 可以引用它上一级的 x 变量，而你从外部不能访问到这个变量 x 。

学习资料

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143449934543461c9d5dfeeb848f5b72bd012e1113d15000
里面还有个很变态的推导，我并没有去推...

http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
另一篇通俗易懂的文章。