资讯专栏INFORMATION COLUMN

柯里化

ormsf / 1310人阅读

摘要:关于柯里化的概念,网上资料也比较多,这里就不再赘述,我们先来看几个简单的例子需求求三个数的和解法解法使用了化,其实柯里化可以简单地理解为将原来接受两个参数的函数变成新的接受一个参数的过程,新的函数返回一个以原有第二个参数为参数的函数。

关于柯里化的概念,网上资料也比较多,这里就不再赘述,我们先来看几个简单的例子

需求

求三个数的和

解法:

1、

function add(a, b, c) {
    return a + b +c;
  }

console.log(add(5, 10, 15));
const curryAdd = function(a) {
    return function(b) {
      return function(c) {
        return a + b + c;
      }
    }
}

const curryResult =  curryAdd(5)(10)(15);
 console.log(curryResult);


 const add5 = curryAdd(5);
 const add10 = add5(10);

 console.log(add10(15));

解法2使用了 curry 化,其实柯里化可以简单地理解为将原来接受两个参数的函数变成新的接受一个参数的过程,新的函数返回一个以原有第二个参数为参数的函数。

为什么要使用 curry 化

从前面的例子对比来看,curry 化咋一看比简单的函数使用起来还有复杂,为什么我们还要大费周章去使用它,其实 curry 化有几个有点:

参数复用


如上面的例子中,返回新的函数保留了对原先函数参数的引用,每次调用计算不必重新传入

提前返回,性能优化

关于这个,我们看个简单的例子--事件绑定

 var addEvent = function() {
  if(window.addEventListener) {

    el.addEventListener(type, function(e) {
      fn.call(el, e);
    }, capture)
      
    }else if(window.attachEvent) {

      el.attachEvent("on" + type, function() {
        fn.call(el, e);
      }, capture)
  }
};

以上例子中需要根据浏览器的兼容性进行事件绑定,每次绑定事件都需要判断一次

改进后:

var addEvent = (function() {
   if(window.addEventListener) {
     return function(el, type, fn, capture) {
       el.addEventListener(type, function(e) {
         fn.call(el, e);
       }, capture)
     }
   }else if(window.attachEvent) {
     return function(el, type, fn, capture) {
       el.attachEvent("on" + type, function() {
         fn.call(el, e);
       }, capture)
     }
   }
 })();

通过自调用函数返回一个新的函数,判断逻辑只执行了一次

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

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

相关文章

  • 高阶函数应用 —— 柯里与反柯里

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

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

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

    chengtao1633 评论0 收藏0
  • JavaScript 函数式编程技巧 - 柯里

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

    edgardeng 评论0 收藏0
  • JS中的柯里

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

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

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

    shixinzhang 评论0 收藏0
  • 前端基础进阶(八):深入详解函数的柯里

    摘要:函数被转化之后得到柯里化函数,能够处理的所有剩余参数。因此柯里化也被称为部分求值。那么函数的柯里化函数则可以如下因此下面的运算方式是等价的。而这里对于函数参数的自由处理,正是柯里化的核心所在。额外知识补充无限参数的柯里化。 showImg(https://segmentfault.com/img/remote/1460000008493346); 柯里化是函数的一个比较高级的应用,想要...

    kk_miles 评论0 收藏0

发表评论

0条评论

ormsf

|高级讲师

TA的文章

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