JavaScript函數之高階函數


      高階函數(higher-order function)—如果一個函數接收的參數為或返回的值為函數,那么我們可以將這個函數稱為高階函數。眾所周知,JavaScript是一種弱類型的語言:JavaScript的函數既不對輸入的參數,也不對輸出值作強定義和類型檢查,那么函數可以成為參數,也可以成為輸出值,這就體現了JavaScript對高階函數的原生支持。

一、參數為函數的高階函數:

function funcTest(f){
    //簡易判斷一下實參是否為函數
    if((typeof f)=="function"){
        f();
    }
}
funcTest(function(){ });

      這是一個簡易的將參數作為函數的高階函數。在調用funcTest時,輸入一個函數作為參數,在funcTest內部執行這個輸入的匿名函數,當然這樣的代碼片段沒有什么實際意義。

二、返回值為函數的高階函數:

function funcTest(){
   return function(){
   };
}
var f=funcTest();

     調用funcTest返回一個函數。

三、一個復雜一點的例子:

//Number類型相加
   function addInt(a,b){
       return parseInt(a)+parseInt(b);
   }
   //String類型相加
   function addString(a,b){
       return a.toString()+ b.toString();
   }
   function add(type){
       if(type==="string"){
           return addString;
       }else{
           return addInt;
       }
   }
   var data1=add("string")("1","2");     //12
   var data2=add("int")("1","2");        //3

      以上示例實現了一個String類型相加與Number類型相加的分離。調用add函數如果輸入參數為”string”時,輸出一個字符串拼接函數;如果輸入參數為”int”則輸出數字相加函數。

四、高階函數的實際作用:

      上面的代碼示例基本說明什么是高階函數,下面來看看高階函數與我們實際編程有什么關系:

      1,回調函數

function callback(value){
    alert(value);       
}

function funcTest(value,f)
  //f實參檢測,檢查f是否為函數
  if(typeof callback==='function'){
      f(value);
  }
}
funcTest('1',callback);        //1

       示例在當調用funcTest時,funcTest內部會調用callback函數,即實現回調。

       2,數據篩選與排序算法

var arr=[0,2,11,9,7,5];
    //排序算法
    function funcComp(a,b){
        if(a<b){
            return -1;
        }else if(a>b){
           return 1;
        }else{
            return 0;
        }
    }
    //過濾算法
    function funcFilter(item,index,array){
        return item>=5;
    }
    //數組順序排列
    arr.sort(funcComp);
    alert(arr.join(','));     	  //0,2,5,7,9,11
    
    //篩選數組
    var arrFilter=arr.filter(funcFilter);
        alert(arr.join(','))           //5,7,9,11

        3,DOM元素事件定義

<html>
<head>
    <title>
    </title>
</head>
<body>
     <input type="button" value="ClickMe" id="myBtn" >
     <script type="text/javascript">
          var btnClick=document.getElementById("myBtn");
          //測試環境為FireFox
          btnClick. addEventListener("click",function(e){
              alert("I’m a button!");                          //I’m a button
          },false);
     </script>
</body>
</html>

        在以上示例中,文檔中定義了一個id為myBtn的按鈕,js腳本為其添加了一個點擊事件,其中addEventListener的第二個參數是一個函數。

        結束語:高階函數並不是JavaScript的專利,但絕對是JavaScript編程的利器。高階函數實際上就是對基本算法的再度抽象,我們可以利用這一點,提高代碼的抽象度,實現最大限度的代碼重用,編寫出更簡潔、更利於重構的代碼。



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM