回调
在 javascript 中,函数都是对象,这也就表明了他们也可以被作为参数,从而传递给其他函数。例如,将函数 a() 作为参数传递给 b() 时,那么,在某一时刻 b() 可能会执行或者说调用 a(); 在这种情况下,a() 就被称作毁掉函数(callback function),也可简称为回调(callback)。
代码示例:
function b(callback) {
// do something
callback();
}
function a() {
// do something
}
b(a);
这里需要注意的是,在 b(a) 中,作为参数的 a 函数,是不带括号的,括号表示要执行(此函数),而此处只需要将 a 函数传递给 b 函数,让 b 函数在适当的时候,加上括号调用它即可。
注:可以使用 火狐,或者谷歌的 javascript 控制台,如果调用 console.log(a) 的话,就会得到 a 的函数的定义代码,而前面说了括号表示要执行,所以加上括号之后,表示要执行 a 函数的代码,a 其实只是一个名字而已。
代码改写示例
首先不使用回调的方式来定义两个函数,然后使用回调的方式重构这两个函数。
使函数具有通用的,单一功能的行为,这是非常好的思想,可以对函数的功能一目了然,阅读和修改也更方便。下面两个函数都是用这种思想来定义。
makeArray 函数用来生成一个大数组,并且返回这个大数组。
var makeArray = function () {
var i = 100000,
array = [];
while (i) {
i --;
array.push(i);
}
return array;
}
arrayPlus 函数的功能只对数组的元素进行处理。
var arrayPlus = function (array) {
var i = 0,
max = array.length;
for(; i < max; i++) {
console.log(array[i] + 1);
}
}
执行这两个函数
arrayPlus(makeArray()); // 生成数组,并给所有的数字元素 +1 再返回此数组
函数达到了我们的目的,但是对于客户端 javascript 来说,性能在一定程度上也是至关重要的,但是上面的实现是比较低效率的,因为生成数组的 makeArray 有一遍大循环,而处理数组元素的 arrayPlus 函数,做了同样的一遍大循环。如果将 makeArray 中的 array.push(i); 改为 array.push(i+1); 即可,这样是高效的,但是这样生成数组和处理数组高度耦合,其并不再是一个通用的具有单一功能的函数,不符合我们的思想。
那么我们尝试使用回调的方式来重构
var makeArray = function (callback) {
var i = 100000,
array = [];
while (i) {
i --;
if(typeof callback === 'function'){
callback(i);
}
array.push(i);
}
return array;
}
var arrayPlus = function (n) {
console.log(++n);
}
重构之后的代码,makeArray 唯一额外的任务是要检查是否有提供回调函数,如果有则执行,如果没有则不执行,并没有破坏原来 makeArray 函数的功能,makeArray 仍然可以像以前一样使用。而 arrayPlus 则变得更加简单。
调用,执行即可
makeArray(arrayPlus); // 注意和重构前的调用对比
对于回调函数来说,可以是已经定义好的函数,也可以是匿名函数,在调用主函数时创建回调函数,例如:
makeArray(function(n){
console.log(++n);
});
没有评论