Introduction to higher-order functions in Javascript_javascript skills

This is an interesting thing, which may also illustrate the power of Javascript objects. What we have to do is to output a Hello, World as mentioned in the previous article , and the input is print('Hello')('World'), and this is the so-called high-level function.

Higher-order functions

High-level seems like an esoteric term for an advanced programming technique, and I thought so when I first saw it.

Higher-order functions of Javascript

However, higher-order functions are just functions that take functions as parameters or return values. Take the above Hello, World as a simple example.

Copy code The code is as follows:

var Moqi = function(p1){
This.add = function (p2){
           return p1 ' ' p2;
};
Return add;
};

We can use this function like this

Copy code The code is as follows:

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

Maybe this process is a bit confusing, so take a look at it in more detail.

Copy code The code is as follows:

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

In other words, Moqi('Hello') is actually a function, Moqi('Hello')

Copy code The code is as follows:

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


From the above situation, higher-order functions can make the code more concise and efficient. Naturally we can also create a function so that:

Copy code The code is as follows:

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

> "Hello,World Phodal"


So there is such a function

Copy code The code is as follows:

var Moqi = function(p1){

Return function (p2){
         return function(p3){
                 return p1 ',' p2 ' ' p3;
}
};
};

Restore higher-order functions

It is becoming more and more complex, and the signal that higher-order function abstraction needs to be introduced is the occurrence of repeated or similar code. Then, we restore to the previous function step by step:

Copy code The code is as follows:

var Moqi = function(p1){

This.add = function (p2){
         return function(p3){
                 return p1 ',' p2 ' ' p3;
}
};
Return this.add;
};


Then create a new function

Copy code The code is as follows:

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

Using the call method in javascript, there will be:

Copy code The code is as follows:

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;
};

Higher-order function examples

The above example is just for fun, the following example is for real application.

Copy code The code is as follows:

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

In the above example, the add passed in is a parameter, and when returned, it is just a function. For example, there is a function in jQuery for

Copy code The code is as follows:

// 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 );
},

It is also used in this way, which shows how important high-order functions are to mastering JS well. .