前几天有间单提到该如何声明函式及在Hositing中会发生什么事,但是函式的奥妙不仅于此。
身为一个使用JS的工程师,我们一定要熟悉函式到比恋人还熟!
这几天将会把函式逐一扒开跟各位一起探讨其中的奥妙。
函式是头等物件
这句话代表着函式与任何JS物件共存,也被当成一个物件。
函式可以被当成变量引用、用实值作声明,或是作为函式参数传递。
这个我们在前几天虽然有提到,但并没有说为什么函式可以这样作,今天就有说明到是因为头等物件所造成的,也让大家复习一下:
//实质建立
function myFun(){}
//指派给变量、数组或其他物件属性
var myFun = function(){};
var myArr = [];
myArr.push(function(){});
var myObj = {};
myObj.funA = function(){};
//作为参数传递给其他函式
function myFun(val){
val();
}
myFun(function(){});
//作为函式的回传值
function myFun(){
return function(){}
}
//动态建立和指派属性
var myFun = function(){};
myFun.data =“Hola”;
回呼函式Callback function
头等物件的其中一样特性,可以作为参数传递给函式,而在某个时间点,可能会呼叫这个被传入的函式,这就是「回呼函式」的概念。
每当我们设置一个准备在之后呼叫的函式,不论是透过浏览器的事件处理阶段或是透过其他代码,这个行为就是在设置一个回呼函式。我们可以这样解释:这个被建立的函式,会在稍候某个适当的时机点,由其他代码「回呼」(call back)。
这会或还是有点难以理解,不过你或许已经使用过回呼函式只是你不知道而已,不论是最简单的按钮按下执行程序还是从服务器接收数据,这都是回呼函式!
我们来看一个最简单的示例:
var text = 'get Text';
function unlessFun(callback){
console.log('In unlessFUn');
return callback();
}
function getText(){
console.log('In getTxt function');
return text;
}
unlessFun(getText);
执行后会得到如下图:
或许你认为我直接在unlessFun里面印出text就好了啊,为什么要用回呼函式多此一举。
那也许接下来这个示例会让你体验到回呼函式的美好:
如果我们今天有一组数字[2,1,6,12,3,77,100,4]需要做比较大小,这时候可能很多人就会开始自己写个算法的函式,像是这样:
var arr = [2,1,6,12,3,77,100,4];
function compare(val){
for(let i = 0;i<val.lenght;i++){
…
}
}
也许你花了好几天终于写出了这个算法,但是其实我们可以发现JS早就帮你写好了一个sort()函式,
你可以拿来用,只需要写好回呼函式:
var arr = [2,1,6,12,3,77,100,4];
arr.sort(function(a,b){
return a - b;
});
console.log(arr);//[1,2,3,4,6,12,77,100]
我们不需要考虑算法的底层细节,JS早就针对这些算法函式进行最佳化了,没有必要重复造轮子而且造出来的性能还不一定比较好,所以学好回呼函式并使用他们吧!
参考资料:
忍者Javascript开发技巧探讨