JS中函数科里化的背景与应用实例教程

目录
  • 背景
  • 使用场景
    • JS中的函数科里化
    • 经典面试题:add(1)(2)(3)
  • 总结

背景

柯里化(Currying)是一种关于函数的高阶技术。它不仅被用于 JavaScript,还被用于其他编程语言。函数柯里化又叫部分求值,维基百科中对柯里化 (Currying) 的定义为:

在数学和计算机科学中,柯里化是一种将使用多个参数的函数转换成一系列使用一个参数的函数,并且返回接受余下的参数而且返回结果的新函数的技术。

用大白话来说就是只传递给函数一部分参数来调用它,让它返回一个新函数去处理剩下的参数。使用一个简单的例子来介绍下,最常用的就是 add 函数了。

// add method
const add = (...args) => args.reduce((a, b) => a + b);

// 传入多个参数,执行 add 函数
add(1, 2) // 返回 3

// 假设我们实现了一个 currying 函数,支持一次传入一个参数
let sum = currying(add);
let addCurryOne = sum(1);
addCurryOne(2) // 返回 3
addCurryOne(3) // 返回 4

使用场景

柯里化是一种函数的转换,它是指将一个函数从可调用的 f(a, b, c) 转换为可调用的 f(a)(b)(c)。柯里化不会调用函数。它只是对函数进行转换。 在平常工作中主要使用场景如下:

  • 1、延迟计算(部分求和、bind 函数)
  • 2、动态创建函数(添加监听 addEvent、惰性函数)
  • 3、参数复用(Function.prototype.call.bind(Object.prototype.toString))

JS中的函数科里化

可以对比下haskell这种天然的函数式语言,js里的珂里化实在是残缺不全...但是利用珂里化这种参数对应函数的思想,结合js的闭包特性,来实现良好的封装。 举个例子:js中最常见的dom的插入和删除。 普通写法:变量都在外部,不能确保每个remove操作都“正确”的

var append = function (parent, child) {
    parent.appendChild(child);
}
var remove = function (dom) {
    dom.remove();
}
//插入 remove(child); //删除
append(parent, child); 

文艺写法:确保了每个删除操作都会删除插入的节点。

var append = function (parent, child) {
    parent.appendChild(child);
    return function () {
        child.remove();
    }
}

//或者是这种,point free风格
var append2 = function (parent, child) {
    parent.appendChild(child);
    return child.remove.bind(child);
}
//插入一个节点,同时返回所插入的节点的删除操作。 remove(); //删除。
var remove = append(parent, child);

总结一下就是说,这种以函作为主体,确保了函数之间不会相互干扰,尤其是在复杂的前端工程下,每一处的代码越“安全”,越独立,越能更好的拓展功能和排查问题。

经典面试题:add(1)(2)(3)

function add(seed) {
    function retVal(later) {
        return add(seed + later);
    }
    retVal.toString = function () {
        return seed;
    };
    return retVal;
}
console.log(add(1)(2)(3).toString()); // 6

add函数返回闭包retVal,在retVal中又继续调用add,最终我们可以写成add(1)(2)(3)(...)这样柯里化的形式。 每调用一次add函数,都会返回retValue函数;调用retValue函数会调用add函数,然后还是返回retValue函数,所以调用add的结果一定是返回一个retValue函数。add函数的存在意义只是为了提供闭包,这个类似的递归调用每次调用add都会生成一个新的闭包。

总结

优点:

  • 参数复用
  • 提前返回
  • 延迟计算/运行

缺点:

  • 函数柯里化可以用来构建复杂的算法 和 功能, 但是滥用也会带来额外的开销。从上面实现部分的代码中,可以看到,使用柯里化函数,离不开闭包, arguments, 递归。
  • 闭包,函数中的变量都保存在内存中,内存消耗大,有可能导致内存泄漏。
  • 递归,效率非常
  • arguments, 变量存取慢,访问性很差

我个人觉得柯里化并非是必须的,而且不熟悉的同学阅读起来可能会遇到麻烦,但是它能帮助我们理解JS中的函数式编程,更重要的是,我们以后在阅读类似的代码时,不会感到陌生。

并非“柯里化”对函数式编程有意义。而是,函数式编程在把函数当作一等公民的同时,就不可避免的会产生“柯里化”这种用法。所以它并不是因为“有什么意义”才出现的。

到此这篇关于JS中函数科里化的背景与应用的文章就介绍到这了,更多相关JS函数科里化应用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript函数柯里化详解

    什么是柯里化 柯里化是这样的一个转换过程,把接受多个参数的函数变换成接受一个单一参数(译注:最初函数的第一个参数)的函数,如果其他的参数是必要的,返回接受余下的参数且返回结果的新函数. 柯理化函数思想:一个js预先处理的思想:利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预先存储的值进行相关的操作处理即可: 柯里化函数主要起到预处理的作用: bind方法的作用:把传递进来的callba

  • Javascript闭包与函数柯里化浅析

    闭包和柯里化都是JavaScript经常用到而且比较高级的技巧,所有的函数式编程语言都支持这两个概念,因此,我们想要充分发挥出JavaScript中的函数式编程特征,就需要深入的了解这两个概念,闭包事实上更是柯里化所不可缺少的基础. 一.柯里化的概念 在计算机科学中,柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术.这个技术由Christopher Strachey以逻辑学家 Haskell Curry 命名的,尽管

  • JavaScript函数柯里化实现原理及过程

    简介 当我们在读Vue源码到时候会发现,在它的 _update 实例中就用到了函数柯里化,(createPatchFunction方法)有兴趣的可以 去看一下. 柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术. 在<Mostly adequate guide>中,这样总结了 Currying --只传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数. Currying 是函数式编

  • JavaScript偏函数与柯里化实例详解

    本文实例讲述了JavaScript偏函数与柯里化.分享给大家供大家参考,具体如下: 到目前为止我们仅讨论绑定this,现在让我们更深入学习. 我们不仅能绑定this,也可以是参数,这较少使用,但有时很方便. bind完整的语法为: let bound = func.bind(context, arg1, arg2, ...); 可以绑定上下文this和函数的初始参数.举例,我们有个乘法函数mul(a,b): function mul(a, b) { return a * b; } 我们可以在该函

  • javascript中利用柯里化函数实现bind方法

    柯理化函数思想:一个js预先处理的思想:利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预先存储的值进行相关的操作处理即可: 柯里化函数主要起到预处理的作用: bind方法的作用:把传递进来的callback回调方法中的this预先处理为上下文context; /** * bind方法实现原理1 * @param callback [Function] 回调函数 * @param con

  • js函数柯里化的方法和作用实例分析

    本文实例讲述了js函数柯里化的方法和作用.分享给大家供大家参考,具体如下: 函数柯里化的方法: 1,利用数组的reduce方法可实现柯里化,具体参见我的另外一篇文章 2,代码如下 const curry = (fn, ...args) =>{ console.log('args',args) // console.log(fn.length,args.length) return args.length < fn.length // 参数长度不足时,重新柯里化该函数,等待接受新参数 ? (..

  • 深入剖析JavaScript中的函数currying柯里化

    curry化来源与数学家 Haskell Curry的名字 (编程语言 Haskell也是以他的名字命名).   柯里化通常也称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是逐步传参,逐步缩小函数的适用范围,逐步求解的过程. 柯里化一个求和函数 按照分步求值,我们看一个简单的例子 var concat3Words = function (a, b, c) { r

  • 详解JS中的柯里化(currying)

    何为Curry化/柯里化? curry化来源与数学家 Haskell Curry的名字 (编程语言 Haskell也是以他的名字命名). 柯里化通常也称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是逐步传参,逐步缩小函数的适用范围,逐步求解的过程. 柯里化一个求和函数 按照分步求值,我们看一个简单的例子 var concat3Words = function (

  • javascript中利用柯里化函数实现bind方法【推荐】

    • 柯理化函数思想:一个js预先处理的思想:利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预先存储的值进行相关的操作处理即可: • 柯里化函数主要起到预处理的作用: • bind方法的作用:把传递进来的callback回调方法中的this预先处理为上下文context; /** * bind方法实现原理1 * @param callback [Function] 回调函数 * @par

  • 深入详解JS函数的柯里化

    一.补充知识点之函数的隐式转换 来一个简单的思考题. function fn() { return 20; } console.log(fn + 10); // 输出结果是多少? 稍微修改一下,再想想输出结果会是什么? function fn() { return 20; } fn.toString = function() { return 10; } console.log(fn + 10); // 输出结果是多少? 还可以继续修改一下. function fn() { return 20;

  • JS中如何比较两个Json对象是否相等实例代码

    在js前端面试过程中,经常会遇到这样的笔试题:JS中如何比较两个Json对象是否相等实例代码,下面小编抽点时间给大家整理下,一起看看吧. 1.先准备三个工具方法,用于判断是否是对象类型,是否是数组,获取对象长度 function isObj(object) { return object && typeof (object) == 'object' && Object.prototype.toString.call(object).toLowerCase() == &quo

  • JS中实现函数return多个返回值的实例

    近期开始着手web前端的工作,主要用到JS.html5+css.以及JS框架(jQuery.dojo等等),在学习和写代码的过程中有一些小经验跟大家一起交流与学习. 今天主要针对"JS实现函数return多个返回值"的方法. 1.函数的基本方法如下: functionA(fp1,fp2,fp3){ ....... return {a1:a,b1:b,c1:c}; //将得到的值a,b,c,封装在一个字段分别有a1,b1,c1的对象中 } 2.调用函数: 调用functionA(fp1,

  • vue.js中toast用法及使用toast弹框的实例代码

    1.首先引入 import { Toast } from 'vant' 写个小列子 绑定一个click事件 2.写事件 在methods写方法 showToast() { this.$toast({ message: "今日签到+3", }) }, 3.效果图如下 一个简单的toast提示成就好了 下面通过实例代码看下vue 中使用 Toast弹框 import { ToastPlugin,ConfirmPlugin,AlertPlugin} from 'vux' Vue.use(To

  • js中获取URL参数的共用方法getRequest()方法实例详解

    下面通过一段代码给大家介绍js中获取URL参数的共用方法getRequest()方法,具体代码如下所示: getRequest : function() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&am

  • Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程

    前言 最近在做一个项目改版,第一次在项目中真正使用Angular,和平时自己写写小demo,做做练习的感觉还是非常不同的,感觉非常的新鲜.有几个指令是经常用到的,这里由于这几个有点共性,所以一起介绍一下ng-if,ng-show/ng-hide,ng-switch 这几个指令.下面来看看详细的介绍: 共性 1.这里个指令都是Angular框架提供给我们的设置页面内容显示和隐藏的方法,使用起来非常方便,尤其是做业务逻辑. 2.都是通过一个表达式的值来实现切换显示的,只不过 ng-switch 可以

随机推荐