资讯专栏INFORMATION COLUMN

Javascript currying柯里化详解

mengbo / 1089人阅读

摘要:面试题实现结果,题的核心就是问的的柯里化先说说什么是柯里化,看过许多关于柯里化的文章,始终搞不太清楚,例如柯里化是把接受多个参数的函数变换成接受一个单一参数最初函数的第一个参数的函数,并且返回接受余下的参数且返回结果的新函数的技术。

面试题:实现add(1)(2)(3) //结果 = 6,题的核心就是问的js的柯里化

先说说什么是柯里化,看过许多关于柯里化的文章,始终搞不太清楚,例如:柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。大多数的blog都是这种说法,说实话我是懵逼的。
我的理解是,curry是一个收集参数的方法,收集够了去执行函数。

实现前我们先列一下要点
1、收集参数(就像面试题多次执行多个参数)是的利用闭包
2、每次执行参数有多有少例如add(1)(2,3)(4)
3、我们需要知道什么时候参数够了

        //如题
        //add(1)(2)(3)
        //逻辑应该是这样add(1)执行收集参数1继续执行收集参数2依次类推直到收集完毕。
       function curry(fn) {
            let arg = []; //用于收集参数
            //做一个闭包https://segmentfault.com/a/1190000017824877
            return function() {
                //每执行一次收集一次参数,为什么用concat是因为有时候后是多个参数(2,3)
                arg = arg.concat([...arguments]);
                //直到参数收集完成执行fn
                // 我们需要知道什么时候收集完了,条件就是curry参数fn的参数个数 fn.length
                //如果收集的参数个数大于等于fn的参数个数执行fn,如果没有递归执行
                if (arg.length >= fn.length) {
                    return fn(...arg)
                }
                // 参数没有收集完我们需要继续收集,递归
                return arguments.callee
            }
        }

        // 测试一下
        let testAdd = curry(add1)
        // console.log(testAdd(1)(2)(3))
        // console.log(testAdd(1, 2)(3))
        //console.log(testAdd(1)(2, 3))

一不小心写完了!

不过不能标题党,说好的详解,接下来我们解析一下网上大多数柯里化的实现代码

function curry(fn) {
  function _c(restNum, argsList) {
    return restNum === 0 ?
      fn.apply(null, argsList) :
      function(x) {
        return _c(restNum - 1, argsList.concat(x));
      };
  }
  return _c(fn.length, []);
}

一眼看不明白没事,我们多看几眼。
解析:
1、curry也是接收一个参数(fn)这个是必然
2、返回了一个函数,接收两个参数,fn.length和一个空数组这个好解
释,我写的简版也说过了,fn.length是为了判断参数是否收集够
了,参数传一个空数组其实也是闭包的一种实现,用来收集参数。
3、里边是一个三目判断,看着花里胡哨的没那么复杂,判断fn的参数个数如果是0,那就没必要收集了直接执行fn,至于fn.apply(null,argList)我很明白的大声说出来会用个apply就到处用吗?在我看来没有一分钱用,之所以用是因为argList是一个数组,正好apply正好支持第二个参数是数组,主要看起来很牛逼的样子。
4、收集参数,fn参数个数不为零,每次收集fn函数参数的个数减一,直到等于0执行fn,这个就没有我写的通用了,我一次传俩就挂了。

再来一个例子:bind方法实现

Function.prototype.bind = function(context) {
            //返回一个绑定this的函数,我们需要在此保存this
            let self = this
                // 可以支持柯里化传参,保存参数
            let arg = [...arguments].slice(1)
                // 返回一个函数
            return function() {
                //同样因为支持柯里化形式传参我们需要再次获取存储参数
                let newArg = [...arguments]
                console.log(newArg)
                    // 返回函数绑定this,传入两次保存的参数
                    //考虑返回函数有返回值做了return
                return self.apply(context, arg.concat(newArg))
            }
        }

        // 搞定测试
        let fn = Person.say.bind(Person1)
        fn()
        fn(18)

是的bind方法就是用的柯里化,bind实现详情请移步:https://segmentfault.com/a/11...

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

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

相关文章

  • 掌握JavaScript函数的柯里

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

    DTeam 评论0 收藏0
  • 函数式编程之柯里和组合详解

    摘要:提到函数式编程,就不得不提柯里化和组合。说实话,在之前的项目开发中,对柯里化和组合的运用不是太多,因为不太清楚应该在哪些情况下应该使用它们。所以在这篇文章中,我们将详细的介绍柯里化和组合的用法以及使用场景。 提到函数式编程,就不得不提柯里化和组合。说实话,在之前的项目开发中,对柯里化和组合的运用不是太多,因为不太清楚应该在哪些情况下应该使用它们。所以在这篇文章中,我们将详细的介绍柯里化...

    Jonathan Shieber 评论0 收藏0
  • SegmentFault 技术周刊 Vol.16 - 浅入浅出 JavaScript 函数式编程

    摘要:函数式编程,一看这个词,简直就是学院派的典范。所以这期周刊,我们就重点引入的函数式编程,浅入浅出,一窥函数式编程的思想,可能让你对编程语言的理解更加融会贯通一些。但从根本上来说,函数式编程就是关于如使用通用的可复用函数进行组合编程。 showImg(https://segmentfault.com/img/bVGQuc); 函数式编程(Functional Programming),一...

    csRyan 评论0 收藏0
  • 前端进击的巨人(五):学会函数柯里(curry)

    摘要:函数柯里化是把支持多个参数的函数变成接收单一参数的函数,并返回一个函数能接收处理剩余参数,而反柯里化就是把参数全部释放出来。但在一些复杂的业务逻辑封装中,函数柯里化能够为我们提供更好的应对方案,让我们的函数更具自由度和灵活性。 showImg(https://segmentfault.com/img/bVburN1?w=800&h=600); 柯里化(Curring, 以逻辑学家Has...

    chengtao1633 评论0 收藏0
  • 高级函数技巧-函数柯里

    摘要:如果你对函数式编程有一定了解,函数柯里化是不可或缺的,利用函数柯里化,可以在开发中非常优雅的处理复杂逻辑。同样先看简单版本的方法,以方法为例,代码来自高级程序设计加强版实现上面函数,可以换成任何其他函数,经过函数处理,都可以转成柯里化函数。 我们经常说在Javascript语言中,函数是一等公民,它们本质上是十分简单和过程化的。可以利用函数,进行一些简单的数据处理,return 结果,...

    shixinzhang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<