闭包 为什么总是return

前言

以前对闭包的理解就是：可以访问外部函数的参数，并且保存起来了。
闭包怎么用呢？写个return function就好啦。
上面的理解其实是不全面的。
今天又自习看了红宝书的闭包部分，终于有了新的理解。

1. 先上个例子

<div i="div">
        <button class="btn">10</button>
        <button class="btn">11</button>
        <button class="btn">12</button>
        <button class="btn">13</button>
        <button class="btn">14</button>
        <button class="btn">15</button>
        <button class="btn">16</button>
    </div>

这里有很多个button，我想要点击哪个就哪个背景变红，于是写了如下代码：

var btns = document.getElementsByClassName("btn");
    for (var i = 0; i < btns.length; ++i) {
        btns[i].onclick = function() {
                console.log(i);
                btns[i].style.backgroundColor = 'red';            
        }
    }

想法很好，i为几就点击为红色，当然有更好的方法，我现在说的是希望可以获取i，点击哪个button就获取button的i，可以做很多事情的，获取内部元素内容之类的。。。
但是结果会发现console.log出来的i一直是7，也不会变红。。

这是为什么呐？

我曾经以为是function会最后执行，所以全局i在for循环结束之后是7，所以会一直是7。。。
这种想法并不完全正确。

其实真正的原因为：
** 因为每个函数的作用域链中都保存着函数的活动对象， 所以它们引用的都是同一个变量i 。**
也就是function里面的i，都是引用i，那么自然click的时候看的是全局i为几，就调用几。

2. 闭包写法

var btns = document.getElementsByClassName("btn");
    for (var i = 0; i < btns.length; ++i) {
        btns[i].onclick = function(num) {
            return function() {
                console.log(num);
                btns[num].style.backgroundColor = 'red';
            }
        }(i);
    }

如上代码就能达成我想要的结果，点哪个，哪个背景变红色。

这里最标准的解释是:

由于函数参数是按值传递的，所以就会将变量i 的当前值复制给参数num。

我突然明白了，之前的是引用，而这里因为是通过函数参数传进去的，所以num不再随着i变化而变化，而是妥妥的当前button对应的那个i。

3.return是什么鬼？

我今天奇思妙想，我如果把return去掉了，难道传进去的i就又是引用了吗？
先换个例子：

function createFunctions1() {
        var result = new Array();
        for (var i = 0; i < 10; i++) {
            result[i] = function(num) {
                return function() {
                    return num;
                };
            }(i);
        }
        return result;
    }

    function createFunctions2() {
        var result = new Array();
        for (var i = 0; i < 10; i++) {
            result[i] = function(num) {

                return num;

            }(i);
        }
        return result;
    }

这里两个函数，区别就是有没有return个function。

测试结果：

区别就在于一个renturn的是num值，一个是renturn的function，而里面的内容都是期望的0,1,2,3...不是10啦。。。
也就是说，return function并不是闭包的标准写法，而将参数用函数传进去并且立马执行就已经是闭包了。

那么我为什么非要用return function？？

再回到最开始的例子：

var btns = document.getElementsByClassName("btn");
    for (var i = 0; i < btns.length; ++i) {
        btns[i].onclick = function(num) {
            // return function() {
                console.log(num);
                btns[num].style.backgroundColor = 'red';
            // }
        }(i);
    }

我尝试将return function 给注释掉了。。
奇迹发生了，所有的都变红了！！！

我终于明白了其原理：

其实就是我return function的目的是让整个变成一个函数。因为闭包所用的function(num){}(i);这是一个立即执行函数，就是一个js语句，那么当onclick= function(num){}(i);的时候，其实后面并不是个函数了，而不管onclick不click了，就直接执行了，所以出现了我所有的button都变红了的情况。。。

4. 所以结论

return并不是闭包必须的，而其目的是为了让其变成一个函数，如果函数并非必须，那么也就没必要return了，这不是闭包哦！