iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
0
自我挑戰組

學JS的心路歷程系列 第 6

學JS的心路歷程 Day6-函式(一)

  • 分享至 

  • xImage
  •  

前幾天有間單提到該如何宣告函式及在 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開發技巧探討


上一篇
學JS的心路歷程 Day5-參數的傳遞方式(下)
下一篇
學JS的心路歷程 Day7-函式(二) arguments
系列文
學JS的心路歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
anli
iT邦新手 5 級 ‧ 2019-11-13 18:10:44

這麼多人看 沒人提醒你第一行 錯字 間單=簡單*

我要留言

立即登入留言