js代码复用之根据不同参数让回调函数执行类似操作

---

问题引入。
今天遇到一个问题，给回调函数传一些信息（不用回调函数的调用者给回调函数传这些参数。例子中是序号作为信息）。具体例子。

/**
* @param x 这十个人的序号
*/
function doSomething(x){
   // 这个x不由调用函数传给回调函数。
   fnCallBack("吃饭");
}

/**
 * fnCallBack作为init的回调函数
 */
function fnCallBack(arg){
	// 问题是x怎样传过来
    console.log(x+":"+arg);
}

我有10个人（这三个人的序号是1,2,3……10。注意他们的序号是有规律的），要调用init方法，init方法初始化回调函数，在回调函数中要分别打印出谁吃饭x:吃饭（意思是，回调函数做的事情都一样，只不过有些许区别,序号的区别）。

解决办法

/**
 * callBacks的格式为[{id:1,callBack:??},{id:2,callBack:？？}，……,{id:10:callBack:??}]
 */
var callBacks=[];
/**
 * 初始化回调函数数组
 * @param {*} id 人序号
 * @param {*} callBack 该人对应的回调函数
 */
function init(id,callBack){
    callBacks.push({'id':id,'callBack':callBack});
}
/**
 * 循环10次，分别为1-10这10个人设置回调函数（他们的回调函数都一样，只不过序号不一样）
 */
for(var x =1;x<11; ++x){// 循环变量x表示序号
    (
        /**
         * 
         * @param {*} x 参数x表示这十个人的序号
         */
        function(x){
        var callBack = function(arg){
            console.log(x+":"+arg);
        }
        init(x,callBack);
    })(x);//由于es5没有块作用域，所以使用立即执行匿名函数（IIFE）来传递循环变量x的值
}
/**
 * 这就是每个人做的事情。就是吃饭。
 * @param {*} x 
 */
function doSomething(x){
    // 由于数组是从下标0开始的，所以这里需要减一
    callBacks[x-1].callBack("吃饭");
}
// 测试代码
doSomething(1);
doSomething(2);
doSomething(3);

运行结果如图1所示。

总结

1. 一个闭包中，内部函数的作用域链拥有外层函数的活动对象，所以内部函数可以使用外层函数的变量。
2. es5中没有块作用域，所以想要传递循环变量的值需要使用立即执行匿名函数(IIFE)。