Shulou(Shulou.com)06/01 Report--

This article will explain in detail what the JavaScript function is. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

First, a simple understanding of apply and call

Both call and apply exist to change the context or context of a function's runtime, in other words, to change the direction of the this inside the function body.

Call and apply serve exactly the same purpose, except that they accept parameters in a different way. Call is actually a grammatical sugar of apply.

Format: apply (context, [arguments]), call (context,param1,param2,...).

Second, what is the Corialization of functions?

Currying is a technique that transforms a function that accepts multiple parameters into a function that accepts a single parameter (the first parameter of the initial function) and returns a new function that accepts the remaining parameters and returns the result.

For example, there is an add () function that handles the parameters we passed to it (param1,params2,...). A function of summation.

/ / here the first function function add (x, y) `with two parameters `x` and `y` is function add (x, y) {return x + y;} / / the function `add ()` is called, and the two parameters `4` and `6`add (4Yu6) are given; / / to simulate computer operation, pass in the first parameter 4function add (4, y) {return 4 + y } / / simulate computer operation. The first parameter 6function add (4,6) {return 4 + 6;} is passed in the second step.

What would it look like if we colorified the add () function? Here is a simple implementation:

/ / the Corified add () function can accept some arguments function add (x, y) {if (typeof y = 'undefined') {return function (newy) {return x + newy;}} / / fully apply return x + y;} / / Test call console.log (typeof add (4)) / / [Function] console.log (add (4) (6)); / / 10max / you can create the save function let saveAdd = add (4); console.log (saveAdd (6)); / / 10

As you can see from the simple add () function above, the function can take part of the function and return a new function to continue processing the rest of the function.

Third, write a common Corialization function

Here we create a common Corey function so that we don't have to implement a complex Corey process within it every time we write a function.

/ / define a createCurry function function createCurry (fn) {var slice = Array.prototype.slice, stored_args = slice.call (arguments,1); return function () {let new_args = slice.call (arguments), args = stored_args.concat (new_args); return fn.apply (null,args);}}

In the above common Corialization function:

Arguments is not a real array, but just an object with length property, so we borrow the slice method from Array.prototype to help us turn arguments into a real array, making it easier for us to operate better.

When we call the function createCurry for the first time, the variable stored_args holds the parameter except the first parameter, because the first parameter is the function we need to Corify.

When we execute the function returned in the createCurry function, the variable new_args takes the parameter and converts it to an array.

The function returned internally merges the value stored in the variable stored_args and the value of the variable new_args into a new array through a closure and assigns a value to the variable args.

Finally, the fn.apply (null,args) method is called to execute the function that is Corey.

Now let's test the common Corey function.

/ / ordinary function add () function add (x, y) {return x + y;} / / get a new function var newAdd = createCurry (add,4); console.log (newAdd (6)); / / 10 createCurry / another simple way console.log (add,4) (6); / / 10

Of course, this is not limited to the Corialization of two parameters, but can also have multiple parameters:

/ / the ordinary function function add with multiple parameters {return a + b + c + d;} / the Coriarization function obtains a new function, and multiple parameters can be divided into console.log (createCurry (add,4,5) (5Power6)); / / 20pm / two-step Corialization let add_one = createCurry (add,5); console.log (add_one (5L5)); / / 20let add_two = createCurry (add_one,4,6) Console.log (add_two (6)); / / 21

From the above example, we can find a limitation, that is, whether it is two or more parameters, it can only be executed in two steps, such as the following formula:

Fn (xPowery) = > fn (x) (y)

Fn (xrem yjournal zpeng w) = = > fn (x) (ypenh zpenh w) | | fn (xpene y) (zpene w) | |...

If we want to be more flexible:

Fn (xPowery) = > fn (x) (y)

Fn (xjinger z) = > fn (xjiny) (z) | | fn (x) (y) (z)

Fn (xpeny) = > fn (xpeny) (z) (w) | | fn (x) (y) (z) (w) |

How can we make it happen?

Fourth, create a flexible Corey function

After the above practice, we found that the Coriarization function we created has some limitations, and we hope that the function can be executed in multiple steps:

/ / create a Corialization function that can be executed in multiple steps, and execute it when the parameter satisfies the number: / / function formula: fn (xmemyrezjinw) = > fn (x) (y) (z) (w); let createCurry = (fn,...params) = > {let args = parsms | | []; let fnLen = fn.length / / specify the parameter length of the Corialization function return (... res) = > {/ / get all the previous parameters let allArgs = args.slice (0) through the scope chain / / deeply copy the args parameters shared by closures to avoid subsequent operations affecting (reference type) allArgs.push (.res); if (allArgs.length)

< fnLen){ // 当参数数量小于原函数的参数长度时，递归调用createCurry函数 return createCurry.call(this,fn,...allArgs); }else{ // 当参数数量满足时，触发函数执行 return fn.apply(this,allArgs); } }}// 多个参数的普通函数function add(a,b,c,d){ return a + b + c + d;}// 测试柯里化函数let curryAdd = createCurry(add,1);console.log(curryAdd(2)(3)(4)); // 10 以上我们已经实现了灵活的柯里化函数，但是这里我们又发现了一个问题： 如果我第一次就把参数全部传入，但是它并没有返回结果，而是一个函数（function）。 只有我们再次将返回的函数调用一次才能返回结果：curryAdd(add,1,2,3,4)(); 可能有人说如果是全部传参，就调用原来的add()函数就行了，这也是一种办法；但是我们在这里既然是满足参数数量，对于这种情况我们还是处理一下。 在这里我们只需要在返回函数前做一下判断就行了： let createCurry = (fn,...params)=>

{let args = parsms | | []; let fnLen = fn.length; / / specify the parameter length of the Corialization function if (length = = _ args.length) {/ / add the judgment. If the number of parameters for the first time is sufficient, call the function directly to get the result return fn.apply (this,args). } return (... res) = > {let allArgs = args.slice (0); allArgs.push (.res); if (allArgs.length)

< fnLen){ return createCurry.call(this,fn,...allArgs); }else{ return fn.apply(this,allArgs); } }} 以上可以算是完成了一个灵活的柯里化的函数了，但是这里还不算很灵活，因为我们不能控制它什么时候执行，只要参数数量足够它就自动执行。我们希望实现一个可以控制它执行的时机该怎么办呢？ 五、写一个可控制的执行时间的柯里化函数 我们这里直接说明一下函数公式： fn(a,b,c) ==>

Fn (a) (b) (c) ()

Fn (a dint bjorc) = > fn (a); fn (b); fn (c); fn ()

It will not execute when we have enough parameters, it will execute and return the result only if we call the function again. Here we can achieve it by adding a small condition to the above example.

/ / when the parameter is satisfied, call the function let createCurry = (fn,...params) = > {let args = parsms | | []; let fnLen = fn.length / / specify the parameter length of the Corialization function / / of course, the judgment here needs to be commented out, otherwise the result / / if (length = _ args.length) {/ / join the judgment will be directly executed when the number of arguments is sufficient for the first time. If the number of arguments for the first time is sufficient, call the function directly to get the result / / return fn.apply (this,args) / /} return (... res) = > {let allArgs = args.slice (0); allArgs.push (... res) / / determine whether the input parameter is greater than 0 here. If the parameter greater than 0 determines whether the number of parameters is sufficient, / / you cannot use & & here. If you use & &, if the number of parameters is sufficient, the result will be executed. If (res.length > 0 | | allArgs.length < fnLen) {return createCurry.call (this,fn,...allArgs);} else {return fn.apply (this,allArgs);} / / ordinary function function add with multiple parameters (a return a + b + c + d) } / / Test controllable Corialization function let curryAdd = createCurry (add,1); console.log (curryAdd (2) (3) (4)); / / functionconsole.log (curryAdd (2) (3) (4) ()); / / 10console.log (curryAdd (2) (3) ()) / / return NaN when the parameters are not enough. This is the end of the article on "what is the Corialization of JavaScript functions?". I hope the above content can be helpful to you so that you can learn more knowledge. If you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.