Javascript中的柯里化

HtmlCssJs 发布于2019-08-20 18:58 / 673人阅读

摘要：三使用场景场景性能优化可以将一些模板代码通过柯里化的形式预先定义好，例如这段代码的作用就是根据浏览器的类型决定事件添加的方式。场景扩展能力中的方法，就是通过柯里化实现的四总结通过本文的介绍，相信你对柯里化已经有一个全新的认识了。

欢迎关注我的公众号睿Talk，获取我最新的文章：

一、前言

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

二、什么是柯里化

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

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. 如果还有本文没有提到的柯里化用法，欢迎留言交流(^-^)

GPU云服务器云服务器柯里化反柯里化 python 柯里化 javascript中的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84963.html

掌握JavaScript函数的柯里化

摘要：原文链接和都支持函数的柯里化函数的柯里化还与的函数编程有很大的联系如果你感兴趣的话可以在这些方面多下功夫了解相信收获一定很多看本篇文章需要知道的一些知识点函数部分的闭包高阶函数不完全函数文章后面有对这些知识的简单解释大家可以看看什么是柯里化原文链接 Haskell和scala都支持函数的柯里化,JavaScript函数的柯里化还与JavaScript的函数编程有很大的联系,如果你感兴...

DTeam 2019-08-21 10:56 评论0 收藏0
JavaScript 函数式编程技巧 - 柯里化

摘要：作为函数式编程语言，带来了很多语言上的有趣特性，比如柯里化和反柯里化。在一些函数式编程语言中，会定义一个特殊的占位变量。个人理解不知道对不对延迟执行柯里化的另一个应用场景是延迟执行。不断的柯里化，累积传入的参数，最后执行。作为函数式编程语言，JS带来了很多语言上的有趣特性，比如柯里化和反柯里化。这里可以对照另外一篇介绍 JS 反柯里化的文章一起看~ 1. 简介柯里化（Currying）...

edgardeng 2019-05-22 16:41 评论0 收藏0
JavaScript 函数式编程技巧 - 反柯里化

摘要：作为函数式编程语言，带来了很多语言上的有趣特性，比如柯里化和反柯里化。而反柯里化，从字面讲，意义和用法跟函数柯里化相比正好相反，扩大适用范围，创建一个应用范围更广的函数。作为函数式编程语言，JS带来了很多语言上的有趣特性，比如柯里化和反柯里化。可以对照另外一篇介绍 JS 柯里化的文章一起看~ 1. 简介柯里化，是固定部分参数，返回一个接受剩余参数的函数，也称为部分计算函数，目的是为了缩...

zhjx922 2019-05-22 15:17 评论0 收藏0
JS中的柯里化

摘要：作为函数式编程语言，带来了很多语言上的有趣特性，比如柯里化和反柯里化。个人理解不知道对不对延迟执行柯里化的另一个应用场景是延迟执行。不断的柯里化，累积传入的参数，最后执行。作为函数式编程语言，JS带来了很多语言上的有趣特性，比如柯里化和反柯里化。这里可以对照另外一篇介绍 JS 反柯里化的文章一起看~ 1. 简介柯里化（Currying），又称部分求值（Partial Evalu...

Hancock_Xu 2019-08-21 18:45 评论0 收藏0
高阶函数应用 —— 柯里化与反柯里化

摘要：柯里化通用式上面的柯里化函数没涉及到高阶函数，也不具备通用性，无法转换形参个数任意或未知的函数，我们接下来封装一个通用的柯里化转换函数，可以将任意函数转换成柯里化。 showImg(https://segmentfault.com/img/remote/1460000018998373); 阅读原文前言在 JavaScript 中，柯里化和反柯里化是高阶函数的一种应用，在这之前...

wyk1184 2019-08-23 12:19 评论0 收藏0