Javascript中的柯里化

15

欢迎关注我的公众号睿Talk,获取我最新的文章:
clipboard.png

一、前言

柯里化,是函数式编程的一个重要概念。对于没接触过的人来说,会被一串串的小括号弄得摸不着头脑。但一旦理解了其中的含义和具体的使用场景,你一定会对它爱不释手。它既能减少代码冗余,也能增加可读性,可谓程序猿居家旅行,装逼撕逼必备之良药。

二、什么是柯里化

如果一个函数可以接收多个参数,将这个函数转化为每次只接收一部分参数的函数的多次调用形式,就是柯里化。文字上理解比较困难,先来看看下面的代码:

function add(a, b, c) {
    return a + b + c;
}

这个add函数接收3个参数,返回3个参数相加的结果。可以通过以下2种形式对其进行柯里化:

function addOne(a) {
    return function(b) {
        return function(c) {
            return a + b + c;
            }
        }
    }
}

function addTwo(a,b) {
    return function(c) {
        return a + b + c;
    }
}

执行的时候,以下3种方式都会获得一样的结果:

add(1, 2, 3);        // return 6
addOne(1)(2)(3);     // return 6
addTwo(1, 2)(3);     // return 6

如果使用ES6语法,能更简洁的写出柯里化后的函数,以addOne为例:

const addOne = (a) => (b) => (c) => (a + b + c)

上面的例子没有什么实际的意义,只是为了说明概念而已。在了解基本概念后,我们来聊聊实际的使用场景。

三、使用场景

  • 场景1: 性能优化

可以将一些模板代码通过柯里化的形式预先定义好,例如:

var addEvent = function(el, type, fn, capture) {
    if (window.addEventListener) {
        el.addEventListener(type, function(e) {
            fn.call(el, e);
        }, capture);
    } else if (window.attachEvent) {
        el.attachEvent("on" + type, function(e) {
            fn.call(el, e);
        });
    } 
};

addEvent(element, "click", handleClick, true);

这段代码的作用就是根据浏览器的类型决定事件添加的方式。实际上if...else的判断只需要进行一次。将它柯里化后可以得到以下结果:

function addCrossBrowserEvent() {
    if (window.addEventListener) {
        return function(el, sType, fn, capture) {
            el.addEventListener(sType, function(e) {
                fn.call(el, e);
            }, (capture));
        };
    } else if (window.attachEvent) {
        return function(el, sType, fn, capture) {
            el.attachEvent("on" + sType, function(e) {
                fn.call(el, e);
            });
        };
    }
}

var addEvent = addCrossBrowserEvent();

addEvent(element, "click", handleClick, true);
  • 场景2: 代码复用

在有回调函数的场景下,可以通过柯里化传入一些预设的值,排列组合后,达到代码复用的效果:

// 匹配任何正则的函数
const match = (reg) => (str) => str.match(reg);
// 专门匹配空格
const hasSpace = match(/\s+/g);

// 封装数组的 filter 方法
const filter = (fn) => (arr) => arr.filter(fn);
// 专门找空格的 filter 方法
const findSpace = filter(hasSpace);

// 使用
let result = findSpace(['hi man', 'hi_man']);    //['hi man']

使用传统的方法实现以上效果,如下:

let result = ['hi man', 'hi_man'].filter( (item) => (item.match(/\s+/g)) );

虽然传统的方法看起来代码量比较少,但如果在很多地方需要使用的时候,就体现出封装的威力了。而且,还可以为filter方法传入其它的条件生成各式各样的find工具函数!

  • 场景3: 使代码便于理解

react-redux的connect方法,就是使用了柯里化增加代码的可读性:

let Container = connect(mapStateToProps, mapDispatchToProps)(Component);

在这里,connect的作用就是将Component要用到的state切面和action注入到它的property中,达到展示型组件和容器组件分离的目的。如果将这个方法的定义改为:

let Container = connect(mapStateToProps, mapDispatchToProps, Component);

就没那么好理解了。而且,mapStateToProps和mapDispatchToProps实际上也是可选参数,在不传它们的情况下传入Component会显得很恶心: connect(null, null, Component)。

  • 场景4: 扩展Javascript能力

ES5中的bind方法,就是通过柯里化实现的:

if (!Function.prototype.bind) {
  Function.prototype.bind = function(oThis) {
    if (typeof this !== 'function') {
      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
    }

    var aArgs   = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP    = function() {},
        fBound  = function() {
          return fToBind.apply(this instanceof fNOP
                 ? this
                 : oThis,
                 aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    if (this.prototype) {
      fNOP.prototype = this.prototype; 
    }
    fBound.prototype = new fNOP();

    return fBound;
  };
}

四、总结

通过本文的介绍,相信你对柯里化已经有一个全新的认识了。它最少有以下4种功能:

  • 性能优化
  • 代码复用
  • 使代码便于理解
  • 扩展Javascript能力

灵活使用柯里化,提高代码质量不是梦!

P.S. 如果还有本文没有提到的柯里化用法,欢迎留言交流(^-^)

你可能感兴趣的

farmerz · 2017年08月28日

这个不是发过了吗?

回复

0

首发呢~

dabai 作者 · 2017年08月28日
0

@dabai 卧槽,我之前收过一篇跟你这一模一样的文章,你们谁copy谁呀?

farmerz · 2017年08月28日
0

不可能一摸一样呀~有部分代码的例子我是参考其它文章的,其它部分都是原创

dabai 作者 · 2017年09月02日
joker · 2017年08月28日

貌似讲的不是很清楚…

回复

0

重点理解场景2和场景3

dabai 作者 · 2017年08月28日
载入中...