JS高階函數的理解（函數作為參數傳遞）

JS高階函數的理解

高階函數是指至少滿足下列條件之一的函數。

· 函數可以作為參數被傳遞

· 函數可以作為返回值輸出

一個例子，我們想在頁面中創建100個div節點，這是一種寫法。我們發現並不是所有用戶都是想把這100個div顯示的的。所以就有第二種寫法

var appendDiv=function(){
        for(var i=0;i<100;i++){
            var div =document.createElement('div');
            div.innerHTML=i;
            document.body.appendChild(div);
　　　　　　　div.style.display='block';
 } }
appendDiv();

　　

第二種寫法

這是我們appendDiv傳入了一個函數

function(node){
   node.style.display='none';
}

　　

然后在appendDiv中判斷這個是否是function，如果是我們就執行他，把它傳入appendDiv()中

    var appendDiv=function(callback){
        for(var i=0;i<100;i++){
            var div =document.createElement('div');
            div.innerHTML=i;
            document.body.appendChild(div);
            if(typeof callback=='function'){
                callback(div);
                //console.log(callback);
            }
        }
    }
    appendDiv(function(node){
        node.style.display='none';
    });

 

結論：

div.style.display='block';//這段代碼是不合理的，這段代碼放進去成為了難以復用的程序，所以我們得用函數作為參數傳進去

//原理是這樣的，function(node){node.style.display='block';}傳入進去后，就相當於把這個匿名函數變成了callback函數
//即
var callback = function(node){
        node.style.display='block';
    }
callback(div);//函數執行