JavaScript高阶函数详解：从概念到实战应用

JavaScript高阶函数基础概念

这体现了JavaScript对象系统的灵活性。正如前文所述，我们只需实现一个输出“Hello, World”的功能，其调用形式为 print('Hello')('World')，这种调用方式即构成了所谓的高阶函数。

高阶函数

乍看之下，高阶函数似乎是一种深奥且先进的编程技术，初次接触时我也持有同样的看法。

JavaScript的高阶函数

实际上，高阶函数的定义非常直观：它仅仅是将函数作为参数接收，或者返回另一个函数的函数。以上述“Hello, World”为例，可以清晰地看到这一特征。

var Moqi = function(p1){
this.add = function (p2){
return p1 + ' ' + P2;
    };
return add;
};

我们可以按照以下方式调用该函数：

console.log(Moqi('Hello')('World'));

上述过程可能略显晦涩，让我们通过更详细的步骤来解析。

> typeof Moqi('Hello')
<- "function"
> Moqi('Hello')
<- function (p2){
return p1 + ' ' + P2;
    }

由此可见，Moqi('Hello') 的返回值本身就是一个函数。因此，Moqi('Hello')

> var m = Moqi('Hello')
> m('World')
> "Hello,World"
 

从上述示例可以看出，高阶函数能够使代码更加简洁且高效。基于此，我们可以进一步构建一个支持链式调用的函数：

> Moqi('Hello')('World')('Phodal')
> "Hello,World Phodal"

由此衍生出如下函数定义：

var Moqi = function(p1){
return function (p2){
return function(p3){
return p1 + ',' + P2 + ' ' +p3;
        }
    };
};

高阶函数的链式调用与还原

还原高阶函数

随着代码复杂度增加，当出现重复或相似逻辑时，引入高阶函数进行抽象便成为必然。我们逐步将其还原至之前的函数形式：

var Moqi = function(p1){
this.add = function (p2){
return function(p3){
return p1 + ',' + P2 + ' ' +p3;
        }
    };
return this.add;
};

接着，我们创建一个新的函数变体：

var Moqi = function(p1){
this.add = function (p2){
this.add1 = function(p3){
return p1 + ',' + P2 + ' ' +p3;
        };
return this.add1;
    };
return this.add;
};

利用JavaScript中的 call 方法，可以实现如下逻辑：

var Moqi = function(p1){
var self = this;
function fd(p2) {
 this.add1 = function (p3) {
 return p1 + ',' + P2 + ' ' + P3;
 };
 }
self.add = function (p2){
 fd.call(this, p2);
 return this.add1;
 };
 return self.add;
};

高阶函数的实际应用场景

高阶函数实例

前文的示例主要为了演示原理，以下则是实际应用场景。

add = function(a,b){
return a + b;
};
function math(func,array){
 return func(array[0],array[1]);
}
console.log(math(add,[1,2]));
> math(add,[1,2])
< 3

在上述示例中，add 作为参数传入，而在 return 语句中则表现为一个函数。例如在jQuery中，存在一个用于

// Convert dashed to camelCase; used by the css and data modules
// Microsoft forgot to hump their vendor prefix (#9572)
camelCase: function( string ) {
return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
},

这也是一种典型的应用，可见掌握高阶函数对于深入理解JavaScript至关重要。