JavaScript柯里化

Currying柯里化是函数式语言都有的一个特性,如Perl,Python,JavaScript。本篇就借用一下JavaScript,介绍一下柯里化的思想及应用。

假设函数库里提供这样一个拼接URL地址的函数:

function simpleURL(protocol, domain, path) {
    return protocol + "://" + domain + "/" + path;
}
simpleURL('http','www.jackzxl.net', 'index.html');      //http://www.jackzxl.net/index.html

这是个最普通的函数毫无新意。但对于你的站点来说,第一个参数固定为http,第二个参数固定为www.jackzxl.net,唯一需要改变的是第三个参数。即你的站点中的任何页面或资源,前两个参数永远固定,只需要改变第三个参数。

显然你不想每次调用时都手动敲一下前两个参数,麻烦不说,还容易出错。怎么办呢?你会想直接将库函数改成单参不就行了?

function simpleURL(path) {
    return "http://www.jackzxl.net/" + path;
}

这样改有两个问题,首先如果该库函数还需要被其他人或其他地方使用,直接改库函数这条路是绝对行不通的。其次就算你对函数有绝对的控制权,这样改显得也非常的不灵活,如果哪天你的站点要加上SSL呢?总不能把第一个参数再放回去吧。因此你正确的选择是柯里化。

所谓柯里化就是:将函数与其参数的一个子集绑定起来后返回个新函数。如果感觉比较抽象,可以做一些类比,比如C++模板里的偏特化,这样理解起来能容易点。将上例柯里化一下:

var myURL = simpleURL.bind(null, 'http', 'www.jackzxl.net');
myURL('myfile.js');     //http://www.jackzxl.net/myfile.js

//站点加上SSL
var mySslURL = simpleURL.bind(null, 'https', 'www.jackzxl.net');
mySslURL('myfile.js');  //https://www.jackzxl.net/myfile.js

上述代码用bind来实现柯里化。再回过头体会一下柯里化定义:将函数与其参数的一个子集绑定起来后返回个新函数。柯里化后发现函数变得更灵活,更流畅,是一种简洁的实现函数委托的方式

为何用bind来实现柯里化呢?因为简单嘛,有现成的就不必自己造轮子了。但因为本篇介绍的是柯里化,所以我们自己实现一下柯里化,来加深理解。它需要满足两点:参数子集,返回新函数:

var currying = function(fn) {
    var args = [].slice.call(arguments, 1);
    return function() {
        var newArgs = args.concat([].slice.call(arguments));
        return fn.apply(null, newArgs);
    };
};

var myURL2 = currying(simpleURL, 'https', 'www.jackzxl.net');
myURL2('myfile.js');    //http://www.jackzxl.net/myfile.js

效果和用bind是一样的,我们仔细分析一下自定义的currying函数,首先参数fn是需要柯里化的simpleURL函数,后面均为可变参数(函数的arguments可参考这里),currying里每行代码的执行结果如下:

var currying = function(fn) {
    var args = [].slice.call(arguments, 1);
    //args为["https", "www.jackzxl.net"]

    return function() {
        var newArgs = args.concat([].slice.call(arguments));
        //newArgs为["https", "www.jackzxl.net", "myFile.js"]

        return fn.apply(null, newArgs);
        //相当于return simpleURL("https", "www.jackzxl.net", "myFile.js");
    };
};

上面已经说明了柯里化的原理和实现。那究竟柯里化有什么作用呢?常见的作用是:

  • 参数复用
  • 延迟运行
  • 扁平化

参数复用上面例子已经展示了,不赘述。

延迟运行其实非常直观,因为不是返回运算结果,而是返回新函数,当然是延迟运行啦。例如bind就是延迟执行的代表,不赘述

扁平化的函数更加易读。例如你要从站点的JSON数据里获取所有文章的title:

//JSON数据
{
    "user": "Jack",
    "posts": [
        { "title": "JavaScript Curry", "contents": "..." },
        { "title": " JavaScript Function", "contents": "..." }
    ]
}

//从JSON数据中获取所有文章的title
fetchFromServer()
    .then(JSON.parse)
    .then(function(data){ return data.posts })
    .then(function(posts){
        return posts.map(function(post){ return post.title })
    })

当然你可能写出更优雅的代码…但这不是重点。重点是用柯里化将代码更加易读易维护:

var curry = require('curry');
var get = curry(function(property, object){ return object[property] });

fetchFromServer()
    .then(JSON.parse)
    .then(get('posts'))
    .then(map(get('title')))

提前返回?

最后网上还有个作用是提前返回,例如IE的事件和其他浏览器不同,为实现兼容性,可以这样实现:

function addHandler(target, eventType, handler){
    if (target.addEventListener){
        target.addEventListener(eventType, handler, false);
    } else {        //IE
        target.attachEvent("on" + eventType, handler);
    }
}

但上面这样有个问题,每次调用addHandler函数都要进行一次if…else的判断。常识告诉我们,除非用户在执行过程中更换浏览器(如果能现实的话),否则只需要在用户第一次连接站点时判定一次即可,之后的调用不必再次检查了。

用柯里化返回新函数的特性可以实现:

var addEvent = (function(){
    if (target.addEventListener) {
        return function(target, eventType, handler) {
            target.addEventListener(eventType, handler, false);
        };
    } else {        //IE
        return function(target, eventType, handler) {
            target.attachEvent("on" + eventType, handler);
        };
    }
})();   

但在我看来,这里用柯里化意义不大。因为柯里化虽然优点很多,缺点同样明显,就是学习成本有点高。用柯里化实现“提前返回”,维护的成本大于收益。

不用柯里化怎么实现呢?一个三元运算符就搞定了:

var addHandler = document.body.addEventListener ?
    function(target, eventType, handler){
        target.addEventListener(eventType, handler, false);
    } :
    function(target, eventType, handler){
        target.attachEvent("on" + eventType, handler);
    };

或者函数内部重写该函数也行:

function addHandler(target, eventType, handler){
    if (target.addEventListener){
        addHandler = function(target, eventType, handler){  //重写该函数
            target.addEventListener(eventType, handler, false);
        };
    } else {        //IE
        addHandler = function(target, eventType, handler){  //重写该函数
            target.attachEvent("on" + eventType, handler);
        };
    }
    addHandler(target, eventType, handler); //调用新函数
}

两种方法都非常直观,简单明了,不要为了用柯里化而用柯里化。

总结

柯里化虽然有一个神秘的名字,但其实说穿了并不神秘。在前端它的应用场并不多(当然也可能我经验比较浅),更多的应该是用在后端异步函数里,如Node.js,对于异步API用柯里化可以减少回调嵌套。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容