学习JS的心路历程-函式（一）

前几天有间单提到该如何声明函式及在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开发技巧探讨