Home  >  Article  >  Web Front-end  >  Introduction to higher-order functions in Javascript_javascript skills

Introduction to higher-order functions in Javascript_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:09:241226browse

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:


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


So there is such a function


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:


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. .
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn