JavaScript 柯里化

简介

柯里化从何而来

柯里化, 即 Currying 的音译。 Currying 是编译原理层面实现多参函数的一个技术。

在说JavaScript 中的柯里化前，可以聊一下原始的Currying是什么，又从何而来。

在编码过程中，身为码农的我们本质上所进行的工作就是——将复杂问题分解为多个可编程的小问题。

Currying 为实现多参函数提供了一个递归降解的实现思路——把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数，在某些编程语言中（如 Haskell），是通过 Currying 技术支持多参函数这一语言特性的。

所以 Currying 原本是一门编译原理层面的技术，用途是实现多参函数。

柯里化去向哪里

在 Haskell 中，函数作为一等公民，Currying 从编译原理层面的技术应运而成了一个语言特性。 在语言特性层面，Currying 是什么？

在《Mostly adequate guide》一书中，这样总结了 Currying ——只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数。

所以 Currying 是应函数式编程而生，在有了 Currying 后，大家再去探索去发掘了它的用途及意义。 然后因为这些用途和意义，大家才积极地将它扩展到其他编程语言中。

在 JavaScript 中实现 Currying

为了实现只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数这句话所描述的特性。 我们先写一个实现加法的函数 add：

function add (x, y) {

  return (x + y)

}

现在我们直接实现一个被 Currying 的 add 函数，该函数名为 curriedAdd，则根据上面的定义，curriedAdd 需要满足以下条件：

curriedAdd(1)(3) === 4

// true

var increment = curriedAdd(1)

increment(2) === 3

// true

var addTen = curriedAdd(10)

addTen(2) === 12

// true

满足以上条件的 curriedAdd 的函数可以用以下代码段实现：

function curriedAdd (x) {

  return function(y) {

    return x + y

  }
}

当然以上实现是有一些问题的：它并不通用，并且我们并不想通过重新编码函数本身的方式来实现 Currying 化。

但是这个 curriedAdd 的实现表明了实现 Currying 的一个基础 —— Currying 延迟求值的特性需要用到 JavaScript 中的作用域——说得更通俗一些，我们需要使用作用域来保存上一次传进来的参数。

对 curriedAdd 进行抽象，可能会得到如下函数 currying ：


function currying (fn, ...args1) {

    return function (...args2) {

        return fn(...args1, ...args2)

    }
}

var increment = currying(add, 1)

increment(2) === 3

// true

var addTen = currying(add, 10)

addTen(2) === 12

// true

在此实现中，currying 函数的返回值其实是一个接收剩余参数并且立即返回计算值的函数。即它的返回值并没有自动被 Currying化 。所以我们可以通过递归来将 currying 的返回的函数也自动 Currying 化。

function trueCurrying(fn, ...args) {

    if (args.length >= fn.length) {

        return fn(...args)

    }

    return function (...args2) {

        return trueCurrying(fn, ...args, ...args2)

    }
}

以上函数很简短，但是已经实现 Currying 的核心思想了。JavaScript 中的常用库 Lodash 中的 curry 方法，其核心思想和以上并没有太大差异——比较多次接受的参数总数与函数定义时的入参数量，当接受参数的数量大于或等于被 Currying 函数的传入参数数量时，就返回计算结果，否则返回一个继续接受参数的函数。

Lodash 中实现 Currying 的代码段较长，因为它考虑了更多的事情，比如绑定 this 变量等。在此处就不直接贴出 Lodash 中的代码段，感兴趣的同学可以去看看看 Lodash 源码，比较一下这两种实现会导致什么样的差异。

然而 Currying 的定义和实现都不是最重要的，本文想要阐述的重点是：它能够解决编码和开发当中怎样的问题，以及在面对不同的问题时，选择一个合适的 Currying，来最恰当的解决问题。

Currying 使用场景

参数复用

固定不变的参数，实现参数复用是 Currying 的主要用途之一。

上文中的increment, addTen是一个参数复用的实例。对add方法固定第一个参数为 10 后，改方法就变成了一个将接受的变量值加 10 的方法。

延迟执行

延迟执行也是 Currying 的一个重要使用场景，同样 bind 和箭头函数也能实现同样的功能。

在前端开发中，一个常见的场景就是为标签绑定 onClick 事件，同时考虑为绑定的方法传递参数。

以下列出了几种常见的方法，来比较优劣：

  1. 通过 data 属性

    <div data-name="name" onClick={handleOnClick} />

    通过 data 属性本质只能传递字符串的数据，如果需要传递复杂对象，只能通过 JSON.stringify(data) 来传递满足 JSON 对象格式的数据，但对更加复杂的对象无法支持。（虽然大多数时候也无需传递复杂对象）

  2. 通过bind方法

    <div onClick={handleOnClick.bind(null, data)} />

    bind 方法和以上实现的 currying 方法，在功能上有极大的相似，在实现上也几乎差不多。可能唯一的不同就是 bind 方法需要强制绑定 context，也就是 bind 的第一个参数会作为原函数运行时的 this 指向。而 currying 不需要此参数。所以使用 currying 或者 bind 只是一个取舍问题。

  3. 箭头函数

    <div onClick={() => handleOnClick(data))} />

    箭头函数能够实现延迟执行，同时也不像 bind 方法必需指定 context。可能唯一需要顾虑的就是在 react 中，会有人反对在 jsx 标签内写箭头函数，这样子容易导致直接在 jsx 标签内写业务逻辑。

  4. 通过currying

    <div onClick={currying(handleOnClick, data)} />

性能对比

image.png

通过 jsPerf 测试四种方式的性能，结果为：箭头函数>bind>currying>trueCurrying。

currying 函数相比 bind 函数，其原理相似，但是性能相差巨大，其原因是 bind 由浏览器实现，运行效率有加成。

从这个结果看 Currying 性能无疑是最差的，但是另一方面就算最差的 trueCurrying 的实现，也能在本人的个人电脑上达到 50w Ops/s 的情况下，说明这些性能是无需在意的。

而 trueCurrying 方法中实现的自动 Currying 化，是另外三个方法所不具备的。

到底需不需要 Currying

为什么需要 Currying

  1. 为了多参函数复用性

    Currying 让人眼前一亮的地方在于，让人觉得函数还能这样子复用。

    通过一行代码，将 add 函数转换为 increment，addTen 等。

    对于 Currying 的复杂实现中，以 Lodash 为列，提供了 placeholder 的神奇操作。对多参函数的复用玩出花样。

    import _ from 'loadsh'

function abc (a, b, c) {
  return [a, b, c];
}

var curried = _.curry(abc)

// Curried with placeholders.
curried(1)(_, 3)(2)
// => [1, 2, 3]

  2. 为函数式编程而生

    Currying 是为函数式而生的东西。应运着有一整套函数式编程的东西，纯函数、compose、container等等事物。（可阅读《mostly-adequate-guide》 ）

    假如要写 Pointfree Javascript 风格的代码，那么Currying是不可或缺的。

    要使用 compose，要使用 container 等事物，我们也需要 Currying。

为什么不需要 Currying

  1. Currying 的一些特性有其他解决方案

    如果我们只是想提前绑定参数，那么我们有很多好几个现成的选择，bind，箭头函数等，而且性能比Curring更好。

  2. Currying 陷于函数式编程

    在本文中，提供了一个 trueCurrying 的实现，这个实现也是最符合 Currying 定义的，也提供 了bind，箭头函数等不具备的“新奇”特性——可持续的 Currying（这个词是本人临时造的）。

    但是这个“新奇”特性的应用并非想象得那么广泛。

    其原因在于，Currying 是函数式编程的产物，它生于函数式编程，也服务于函数式编程。

    而 JavaScript 并非真正的函数式编程语言，相比 Haskell 等函数式编程语言，JavaScript 使用 Currying 等函数式特性有额外的性能开销，也缺乏类型推导。

    从而把 JavaScript 代码写得符合函数式编程思想和规范的项目都较少，从而也限制了 Currying 等技术在 JavaScript 代码中的普遍使用。

    假如我们还没有准备好去写函数式编程规范的代码，仅需要在 JSX 代码中提前绑定一次参数，那么 bind 或箭头函数就足够了。

结论

  1. Currying 在 JavaScript 中是“低性能”的，但是这些性能在绝大多数场景，是可以忽略的。
  2. Currying 的思想极大地助于提升函数的复用性。
  3. Currying 生于函数式编程，也陷于函数式编程。假如没有准备好写纯正的函数式代码，那么 Currying 有更好的替代品。
  4. 函数式编程及其思想，是值得关注、学习和应用的事物。所以在文末再次安利 JavaScript 程序员阅读此书 —— 《mostly-adequate-guide》

参考链接

https://juejin.im/post/5af13664f265da0ba266efcf?utm_source=gold_browser_extension

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,098评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,213评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,960评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,519评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,512评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,533评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,914评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,574评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,804评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,350评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,933评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2赞 342