当前位置： 移动技术网 > IT编程>开发语言>JavaScript > javascript高阶函数的深入理解

javascript高阶函数的深入理解

2018年09月14日  | 移动技术网IT编程  | 我要评论

一、定义

高阶函数（higher-order function）：javascript中的函数其实都是指向某个变量，既然变量可以指向函数（用一个变量表示函数），函数的参数能接收变量，那么一个函数就可以接受另一个函数作为参数，这种函数就叫做高阶函数，也就是操作函数的函数，有以下两种情况：

函数可以作为参数被传递 函数可以作为返回值输出

javascript中的函数显示满足高阶函数的条件，在实际开发的，无论是将函数当做参数传递，还是让函数的执行返回另外一个函数。这两种情形都有许多应用场景。下面分别详细介绍。

二、函数当做参数传递

把函数当做参数传递，代表可以抽离出一部分容易变化的业务逻辑，把这部分业务逻辑放在函数参数中，这样一来可以把业务代码中变化的部分和不变的部分分离开。其中最常见的一个应用场景就是回调函数。

【回调函数】

在ajax异步请求的应用中，回调函数的使用非常频繁。想在ajax请求返回之后做一些事情，但又并不知道请求返回的确切时间时，最常见的方案就是把callback函数当作参数传入发起ajax请求的方法中，待请求完成之后执行callback函数。

var getuserinfo = function( userid, callback ){
  $.ajax( 'https://xx.com/getuserinfo' + userid, function( data ){
    if ( typeof callback === 'function' ){
      callback( data );
    }
  });
}
getuserinfo( 123, function( data ){ 
  alert ( data.username );
});

回调函数的应用不仅只在异步请求中，当一个函数不适合执行一些请求时，也可以把这些请求封装成一个函数，并把它作为参数传递给另一个函数，委托另一个函数来执行。

比如：想在页面上创建100个p节点，然后把这些p节点设置为隐藏的，下面是一种编写代码的方式。

var appenddiv = function(){
  for ( var i = 0; i < 100; i++ ){
    var p = document.createelement( 'p' );
    p.innerhtml = i;
    document.body.appendchild( p );
    p.style.display = 'none';
  }
};
appenddiv();

把p.style.display = "none" 的逻辑硬编码在appenddiv中显示是不合理的，appenddiv的功能太过多样，成为一个难以复用的函数，并不是每个人创建了节点之后都会选择立刻将它隐藏。

于是把p.style.display = "none" 这行代码抽取出来，封装成一个函数，用回调函数的形式传入appenddiv()方法。

 var appenddiv = function(callback) {
        for(var i=0; i<100; i++) {
            var p = document.createelement("p");
            p.innerhtml = i;
            document.body.appendchild(p);
            if(typeof callback == "function") {
                callback(p);
            }
        }
    };

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

可以看到，隐藏节点的请求实际上是由客户端发起的，但是客户并不知道节点什么时候会创建好，于是把隐藏节点的逻辑放在回调函数中。“委托”给appenddiv()方法，appenddiv()方法当然知道节点什么创建好，所以在节点创建好的时候，appenddiv()会执行之前用户传入的回调函数。

【数组排序】
函数作为参数传递的另一个常见的场景是数组排序函数的sort()。array.prototype.sort接受一个函数当做参数，这个函数定义了数组元素排序的规则（正序还是逆序）。目的是对数组进行排序，这是不变的部分；而使用什么规则进行排序，则是可变的部分。把可变的部分封装到函数里面，动态传入array.prototype.sort，使得array.prototype.sort可以灵活的被我们控制。

// 从小到大排列，输出: [ 1, 3, 4 ]
[ 1, 4, 3 ].sort( function( a, b ){ 
  return a - b;
});

// 从大到小排列，输出: [ 4, 3, 1 ]
[ 1, 4, 3 ].sort( function( a, b ){ 
  return b - a;
});

三、函数当做返回值输出

相比把函数当做参数传递，函数当做返回值输出应用场景也很多，让函数继续返回一个可执行的函数，意味着运算过程是可持续的。

下面是使用object,prototype.tostring方法判断数据类型的一系列的istype函数。

var isstring = function( obj ){
  return object.prototype.tostring.call( obj ) === '[object string]';
};
var isarray = function( obj ){
  return object.prototype.tostring.call( obj ) === '[object array]';
};
var isnumber = function( obj ){
  return object.prototype.tostring.call( obj ) === '[object number]';
};

实际上，这些函数的大部分实现都是相同的，不同的是object.prototype.tostring.call(obj)返回的字符串。为了避免多余的代码，可以把这些字符串作为参数提前传入istype函数。代码如下：

var istype = function( type ){ 
  return function( obj ){
    return object.prototype.tostring.call( obj ) === '[object '+ type +']';
  }
};

var isstring = istype( 'string' ); //调用这个函数返回的是内层函数
var isarray = istype( 'array' ); 
var isnumber = istype( 'number' );

console.log( isarray( [ 1, 2, 3 ] ) );    // 输出：true

当然，还可以使用循环语句，来批量注册这些函数。

 var type = {};
   for(var i=0, type; type = ['string', 'array', 'number' ][i++];) {
       (function(type) {
           type['is' + type] = function(obj) {
               return object.prototype.tostring.call(obj) == "[object " + type +"]";
           }
       })(type)
   }

console.log(type.isarray([])); //true
console.log(type.isstring("str")); //true

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网