JavaScript函数之高阶函数

高阶函数（higher-order function）—如果一个函数接收的参数为或返回的值为函数，那么我们可以将这个函数称为高阶函数。众所周知，JavaScript是一种弱类型的语言:JavaScript的函数既不对输入的参数，也不对输出值作强定义和类型检查,那么函数可以成为参数，也可以成为输出值,这就体现了JavaScript对高阶函数的原生支持。

一、参数为函数的高阶函数:

?

1 2 3 4 5 6 7

function funcTest(f){      //简易判断一下实参是否为函数      if (( typeof f)== "function" ){          f();      } } funcTest( function (){ });

      这是一个简易的将参数作为函数的高阶函数。在调用funcTest时，输入一个函数作为参数，在funcTest内部执行这个输入的匿名函数,当然这样的代码片段没有什么实际意义。

二、返回值为函数的高阶函数:

?

1 2 3 4 5

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

     调用funcTest返回一个函数。

三、一个复杂一点的例子:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

//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,回调函数

?

1 2 3 4 5 6 7 8 9 10 11

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,数据筛选与排序算法

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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元素事件定义

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

< 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编程的利器。高阶函数实际上就是对基本算法的再度抽象,我们可以利用这一点，提高代码的抽象度，实现最大限度的代码重用，编写出更简洁、更利于重构的代码。

转载于:https://my.oschina.net/u/2449240/blog/506518