js function coritization

Function corrilization is closely related to function binding (see the previous article)
It is used to create a function with one or more parameters already set
The basic method of function coritization is the same as function binding: that is, use a closure to return a function
The difference between the two is that when the function is called, the returned function also needs to set some incoming parameters

example:
This code defines two functions, add() and curry()
curry() is essentially the first add() function with a constant argument of 5
curry() is not a corellized function, but shows its concept

function add(num1, num2) {
            return num1 + num2;
        }
        function curry(num2) {
            return add(5, num2)
        }
        console.log(add(2, 3));
        console.log(curry(3));

Creating a coriolised function: call another function and pass it the function to be coriolised and the necessary parameters

The curry() function sorts the parameters of the returned function
The first parameter in curry() is the function to be cored, and the other parameters are the values to be passed in
Call the slice() method on the arguments object to return all parameters starting from the second parameter
The args array then contains the parameters from the outside (that is, the parameters to be passed in)
Create an args1 array inside the function to store all parameters
Use the concat() method to combine the external parameter array args and all parameter arrays args1 into args2
Then pass the result to the function with apply(),
Since this function does not consider the execution environment, the first parameter calling the apply() method is null

function curry(fn) {
            var args = Array.prototype.slice.call(arguments, 1); //Parameters other than the first parameter
            return function () {
                var args1 = Array.prototype.slice.call(arguments); //Store all incoming parameters
                var args2 = args.concat(args1);
                return fn.apply(null, args2)
            }
        }

Application method of curry() function:

1. Create a coriolised version of add() with the first parameter of 5
When the curryAdd() method is called and 3 is passed in, 3 will become the second parameter of add(). The first parameter is 5, and the final result is 8

function curry(fn) {
            var args = Array.prototype.slice.call(arguments, 1); //Parameters other than the first parameter 10
            return function () {
                var args1 = Array.prototype.slice.call(arguments); //Store all incoming parameters 5 10
                var args2 = args.concat(args1); [10 5 10]
                return fn.apply(null, args2)
            }
        }

        function add(num1, num2) {
            return num1 + num2;
        }
        var curryAdd = curry(add, 5);
        console.log(curryAdd(3))//8

2. You can also give all the parameters: both parameters are provided in the add() function of Coriolis, so there is no need to pass them

        var curryAdd = curry(add, 5,10);
        console.log(curryAdd())


Coriolism can also be included as part of function binding to construct a more complex bind() function
For example:

function bind(fn,context){
            var args = Array.prototype.slice.call(arguments,2);
            return function(){
                var args1=Array.prototype.slice.call(arguments);
                var args2=args.concat(args1);
                return fn.apply(context,args2);
            };
        }

The main change to the curry() function is the number of arguments passed in
curry() takes only one function to wrap as an argument
Bind() receives both a function and an object object object, which means that the parameters to the bound function start from the third, so it is necessary to modify the call at the first place of slice() and pass the object object to apply(). When bind() is used, it will return the function bound to the given environment, and some of its function parameters may have been set
This is useful when you want to pass additional parameters to the event handler in addition to the event object
For example:
In this example, the handler.handleClick() method receives two parameters, the name of the element to be processed and the event object. The name passed to the bind() function as the third parameter is passed to handler.handleClick(), and handler.handleClick() will also receive the event object at the same time

var handler={
            message:'Event handled',
            handleClick:function(name,event){
                alert(this.message+':'+event.type);
            }
        };
         var btn = document.getElementById('myBtn');
        var EventUtil = {
            addHandler: function (element, type, handler) {
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false); //DOM2 method add event
                } else if (element.attachEvent) { //IE method add event
                    element.attachEvent("on" + type, handler);
                } else {
                    element["on" + type] = handler; //Adding events to DOM level 0 methods
                }
            }
        }
        EventUtil.addHandler(btn, "click", bind(handler.handleClick,handler,'myBtn'));
        

The bind() method of ECMAScript5 also implements function coritization, as long as another parameter is passed after the value of this!

EventUtil.addHandler(btn, "click", handler.handleClick.bind(handler,'myBtn'));

Coriolis function and binding function provide powerful dynamic function creation function
Whether to use bind() or curry() depends on whether the object object response is required.
Both of them can be used to create complex algorithms and functions. Of course, neither of them can be abused, because each function has additional overhead.

Keywords: Javascript Front-end ECMAScript

Added by davidklonski on Fri, 22 Oct 2021 14:24:00 +0300