[Js]闭包理解

通过下题，对闭包进行简单理解。

问题：

描述：

实现函数 makeClosures，调用之后满足如下条件：
1、返回一个函数数组 result，长度与 arr 相同
2、运行 result 中第 i 个函数，即 result[i]()，结果与 fn(arr[i]) 相同

示例：

输入：[1, 2, 3], function (x) { 
                    return x * x; 
                }

输出：4

解决：

简单的描述闭包：如果在函数func内部声明函数inner，然后在函数外部调用inner，这个过程即产生了一个闭包。

题目要求的是返回一个函数数组，如果在循环中直接写result[i] = function(){return fn(arr[i]);}或者result.push(function(){return fn(arr[i]);})，最终的结果是不正确的，因为在每次迭代的时候，那样的语句后面的方法并没有执行，只是创建了一个函数体为“return fn(arr[i]);”的函数对象而已，当迭代停止时，i为最终迭代停止的值，在函数被调用时，i依旧为最终迭代停止的值，因此无法返回正确的结果。

为了解决这个问题，需要声明一个匿名函数，并立即执行它。

function(num){return function(){return fn(arr[num]); }; }(i)，函数执行后，i立即传入并被内部函数访问到，因此就能得到正确的结果。闭包允许你引用存在于外部函数中的变量。

//使用forEach循环
function makeClosures(arr, fn) {
  var result = [];
  arr.forEach(function(e){
    result.push(function(num){
        return function(){
            return fn(num);
        };
    }(e));  //匿名函数，立即执行
  });
     return result; //在函数外调用内部函数，形成闭包
}

//典型for循环
function makeClosures(arr, fn) {
    var result = [];
    for(var i=0;i<arr.length;i++){
        result[i] = function(num){
            return function(){
                return fn(num);
                
            }
        }(arr[i]);//立即执行
    }
    return result;
}

//使用ES5的bind()方法
function makeClosures(arr, fn) {
    var result = new Array();
    for(var i=0;i<arr.length;i++){
        result[i] = fn.bind(null,arr[i]);
    }
    return result;
}

而在ES6中可以使用let,代码如下：

function makeClosures(arr, fn) {	
    var result = new Array();
    for(let i=0;i<arr.length;i++){
        result[i] = function(){
            return fn(arr[i]); 
            //let声明的变量只在let所在代码块内有效，因此每次循环的i都是一个新的变量            
        };
    }
    return result;
}    

参考链接