什么是Currying?Javascript函数柯里化及其应用场景

636 阅读2分钟

本文已参与「创作新人礼」活动,一起开启掘金创作之路。

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

用途总结

  • 柯里化可以让我们给一个函数传递较少的参数得到一个已经记住了某些固定参数的新函数
  • 这是一种对函数参数的缓存
  • 让函数变得更灵活,让函数的粒度更小
  • 可以把多元函数转换成一元函数,可以组合使用函数产生强大的功能