Javascript函数柯里化及其应用场景

1.什么是柯里化

柯里化，英语：Currying，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

2.柯里化的用途

参数复用

看下面这个例子：

function uri (protocol,hostname,pathname){
    return `${protocol}${hostname}${pathname}`;
}

const uri1 = uri("https://","www.csdn.net","/blog");
console.log(uri1);

在这个函数中，protocol这个参数可能每个url都会用到，会造成参数重复。
优化如下：

function uri_curring (protocol){
    return function(hostname,pathname){
        return `${protocol}${hostname}${pathname}`;
    }
}

const uri_https = uri_curring("https://");
console.log(uri_https);
const uri1 = uri_https("www.csdn.net","/blog");
console.log(uri1);

[Function]
https://www.csdn.net/blog

上面的代码将接受多个参数的函数改造为只接受一个参数的函数。这个函数内部返回了一个接受其余参数的函数，由作用域链可知，被返回的最内层函数可以访问外层函数的参数，故可在最内层函数完成原有所有参数的处理。

兼容性检测：提前确认/提前返回

const whichEvent = ( function () {
    // 优先判断addEventListener
    if(window.addEventListener){
        return function(element,type,listener,useCapture){
            element.addEventListener(type,function(e){
                listener.call(element,e);
            },useCapture);
        }
    // 判断IE 
    }else if(window.attchEvent){
        return function(element,type,handler){
            element.attchEvent('on'+element,function(e){
                handler.call(element,e);
            });
        }
    }
} )();

延迟执行

// add(1)(2)(3) = 6;
// add(1,2,3)(4) = 10;
// add(1)(2)(3)(4)(5) = 15;

function add(){
    let args = Array.prototype.slice.call(arguments);
    let inner = function(){
        args.push(...arguments);
        return inner;
    }
    inner.toString = function(){
        return args.reduce(function(prev,cur){
            return prev + cur;
        });
    }
    return inner;
}

console.log(add(1)(2)(3));