美文网首页JavaScript码无界前端%……%
前端基础进阶(八):深入详解函数的柯里化

前端基础进阶(八):深入详解函数的柯里化

作者: 这波能反杀 | 来源:发表于2017-02-27 01:40 被阅读14076次

由于某些原因,文章已经删除,打算迁移到别处,目前正在寻找更合适的平台。

请大家关注我的新公众号ar_indus,随后我会在公众号里推送新的博客地址。

后续计划的《react进阶系列》文章也会在新公众号中推送。

公众号二维码

ar_indus

相关文章

  • 前端基础进阶(八):深入详解函数的柯里化

    由于某些原因,文章已经删除,打算迁移到别处,目前正在寻找更合适的平台。 请大家关注我的新公众号ar_indus,随...

  • 手写简单.bind()实现

    手写一个实现柯里化的.bind() 柯里化:《函数柯里化小结》柯里化:前端开发者进阶之函数柯里化Currying ...

  • 阅迹(三)

    3.24看过 redux-tutorial-cn lodashjs 前端开发者进阶之函数柯里化Currying R...

  • 前端基础进阶系列

    前端基础进阶(一):内存空间详细图解前端基础进阶(二):执行上下文详细图解前端基础进阶(三):变量对象详解前端基础...

  • 前端开发进阶之函数柯里化

    概念:只传递给函数一部分参数来调用,让它返回一个函数去处理剩下的参数 开篇之前,我们先来看一个例子 例子中,创建了...

  • 函数柯里化(基础)

    简介 与函数绑定紧密相关的主题是函数柯里化(function currying),它用于创建已经设置好了一个或多个...

  • [译]JavaScript中的函数柯里化

    原文 Currying in JS 函数柯里化 函数柯里化以Haskell Brooks Curry命名,柯里化是...

  • 详解JS函数柯里化

    第一次看到柯里化这个词的时候,还是在看一篇算法相关的博客提到把函数柯里化,那时一看这个词就感觉很高端,实际上当你了...

  • 详解JS函数柯里化

    第一次看到柯里化这个词的时候,还是在看一篇算法相关的博客提到把函数柯里化,那时一看这个词就感觉很高端,实际上当你了...

  • 函数操作v1.0.0

    目录 函柯里化函数节流函数防抖 正文 函柯里化 函数节流 函数防抖

网友评论

  • 月肃生:大致能看懂,但是丢给我一个这样的问题,让我去做,又是一脸懵比:sob:
  • 白霁:function _map(func, array) {
    return array.map(func);
    }
    function _filter(func, array) {
    return array.filter(func);
    }
    波同学,上述关于这两个例子是否出错,因为封装的createCurry的参数传递格式是从右到左,但是关于这两个函数的例子,参数传递的方式则是从左到右。
  • 8b60672f77e8:偶然搜到的这个文章 ,看了8章的内容。特别注册了一个号来评价,就八个字! 偶像人物!!! 大师风范!!!
  • a2d7b36d630e:如果只是了解概念, 会不会说的太复杂了点。
  • 80aa4f77c88a:没看懂 :sob:
    这波能反杀:@huhuf5 没看懂也没关系
  • BenjaVan:波哥 这里的参数是不是写反了
    function check(targetString, reg) {
    return reg.test(targetString);
    }
    check(/^1[34578]\d{9}$/, '14900000088');
    check(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/, 'test@163.com');
  • 4dfab65f4d18:function add() {
    var _args = [...arguments]
    var _add = function () {
    _args.push(...arguments)
    return _add
    }
    _add.toString=function () {
    return _args.reduce(function (a,b) {
    return a+b
    })
    }
    return _add
    }
    4dfab65f4d18:一层闭包就可以啦。。好像第二层函数没有啥用啊
  • 聚宝大当家:var _find = createCurry(_filter);
    var find20 = _find(function(item, i) {
    if (typeof item === 20) {
    return i;
    }
    })
    find20([1, 2, 3, 30, 20, 100]); // 4

    你这里小错误好像不少:smile: 比如这里 if (typeof item === 20)
    还有这里明明是打印出 [20],怎么会是4呢? find20([1, 2, 3, 30, 20, 100]); // 4
    聚宝大当家:要是有刚学习的新手看到了 没准会卡在这里百思不得其解:smiley:
  • 聚宝大当家:var checkPhone = _check(/^1[34578]\d{9}$/);
    var checkEmail = _check(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/);

    checkPhone('183888888');
    checkEmail('xxxxx@test.com');

    它们一起出现 会有错误
    这波能反杀:@聚宝大当家 调整了一下createCurry的实现
    聚宝大当家:var checkPhone = createCurry(check)(/^1[34578]\d{9}$/);
    var checkEmail = createCurry(check)(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/);
    console.log(checkPhone('15940316823'))
    console.log(checkEmail('176940099@qq.com'))

    这样才对
  • 7e78b1b67718:从入门到放弃
    这波能反杀:@7e78b1b67718 别放弃 ~
  • hello_zhimin:昨天看老版本没太看明白,今天在看,怎么不一样了呢,哈哈
    这波能反杀:@hello_zhimin 更新了,看明白了吗?
  • bbe483699f1a:你好,很感谢您的这篇文章,让我对闭包这儿有了进一步的理解,不过我在测试中,有一些疑问,针对文章中 add 方法,我经过测试,返回的结果并不是 15 而是 f 15 ,而且 typeof f 15 是一个函数的类型 因为 _adder是递归定义的,如果是需要得出正确的 一个 运算结果 是需要文章中的结果与一个number类型进行+运算:
    console.log(add(1, 2, 3, 4, 5)); // f 15 返回值为function类型
    console.log(add(1, 2, 3, 4, 5) + 0); // 15 返回值为number
    bbe483699f1a:@这波能反杀 嗯嗯 不过还是很感谢 对这块的理解又进了一步:smile:
    这波能反杀:@katoonzhe 我近期会更新这篇文章,有的知识,你先别信:joy:
    这波能反杀:@katoonzhe f 15表示返回的是一个函数,但是如果直接用函数参与计算,会隐式转换为15
  • b2a382334db8:valueOf会比toString优先级高
  • c1c38f6f74eb:add()这个函数最后一句,return adder.apply(null, [].slice.call(arguments));为什么还要把[].slice.call(arguments)传进去,直接写成adder()不可以吗?
    a2d7b36d630e:是啊, 没必要, 去掉也是一样的
  • 黄苗笋:最后那个通用柯里化函数,如果这样 sum(10,20)(5) 执行 就会报错误
  • 7c834e7a768e:看懵逼了,大佬0.0
  • Amor_Hy:map 里面的context 指的是什么啊🤔
    这波能反杀:@Amor_Hy :relaxed:
  • 扎着羊角辫的小女孩:智商不是一般的高。
  • 3dcc8a0588a3:波同学,add函数那部分打印出来是function 15,这是怎么一回事
  • 599681964575:大神 能讲在细点名
    3dcc8a0588a3:波同学,add函数那部分打印出来是function 15,这是怎么一回事
    这波能反杀:@萝卜爱白兔 可以先不用那么着急去搞懂,等以后积累多了再回过头来学习也是可以的
  • 浩风起兮:四五 理解着有点难:sob:
    这波能反杀:@浩风起兮 确实不好理解,慢慢来
  • hey前端攻城狮:模拟map方法时context指的什么,call里为什么有四个参数?
    这波能反杀:表示手动设定this指向
  • 5ba025773a72:add部分看了3小时才搞懂,是不是没救了QAQ
    a2d7b36d630e:3个小时太夸张了, 你要调试, 不要硬看。
    d01d8d7404c0:看了2遍了还是没懂,继续啃。。
    这波能反杀:@Nokay 看懂了就是收获:+1:很少人看懂
  • nikolausliu:var arr = [1, 2, 3, 4, 5];

    // 实际开发中并不建议直接给Array扩展新的方法
    // 只是用这种方式演示能够更加清晰一点
    Array.prototype.merge = function(chars) {
    return this.join(chars);
    }

    var string = arr.merge('-')

    console.log(string); // 1-2-3-4-5

    想问一下,这个和直接用join方法没什么区别吧?
  • 281a14add96b:收获很多,感谢楼主,继续支持:smile:
  • lastnigtic::+1: 无敌无敌
  • 9ab719968975:@波老师,累计相加的例子我简化了下,不知道有什么问题吗?(计算正确)

    function add(){
    // 第一次执行时,定义一个数组专门用来存储所有参书
    var _args = [].slice.call(arguments);

    // 在内部声明一个函数,利用闭包的特性保存_args并收集所有参数值
    var _adder = function(){
    [].push.apply(_args, [].slice.call(arguments));
    return _adder;
    }

    // 利用隐式转换的特性,当最后执行时隐式转换,并计算最终的值返回
    _adder.toString = function(){
    return _args.reduce(function(a,b){
    return a+b;
    })
    }

    return _adder;
    }
  • 08328781b80d:这篇文章看不懂,水平还没到。头晕了,等等在看。
  • 128f587d6ed6:看了好几遍,收获很大,谢谢波哥!
    这波能反杀:@我要成为你 有收获就好
  • 077fa51c09b2:连续把之前的进阶文章看了,讲得好好,好多地方之前都不能理解,现在都能理解,谢谢大神。不过这章柯里化还是有点不大明白,自己的理解有限,看起来懂了,但是实际运用起来感觉会有点没底。。。。,特别是文里的bind,有点不明白,这个也是实现绑定事件的吗?
  • YUKI酱不要打酱油:再提个校对:“但是如果我们又想要让数组每一项都减去一个数组之后再连起来呢?” 应该是“减去一个数”
    另外感谢一下楼主,真的是好文章~
    这波能反杀:@YUKI酱不要打酱油 感谢指正
  • 墨雪_2705:感觉这篇对我来说有难度,得多看几遍
    这波能反杀:@墨雪_2705 :+1:
  • c5e2a94f1b07::stuck_out_tongue_closed_eyes: 最近几天都在看你写的文章,收获很大,谢谢!
    这波能反杀:有帮助就好
  • 其实杰伦:很厉害的前辈:heart_eyes:
  • 36f191e542cf:有笔误。实现map方法那块,最后调用的应该是[]._map()吧
    其实杰伦:很好的文章 值得持续学习:smiley:
    这波能反杀:奥,对,感谢指正
  • 9e494d8ba26d:“当我们没有重新定义toString与valueOf时,函数的隐式转换会调用默认的toString方法,它会将函数的定义内容作为字符串返回。” 这句总结有问题。函数隐式转换会先调用valueOf方法,但是转化的结果不是primitive type,所以才会去调用toString方法。
    这波能反杀:@曾浩_a8a9 不能
    c5e2a94f1b07:那样的话,隐式转换的优先级能不能简单理解为先尝试转换为数字,然后才是转换为字符串?
    这波能反杀:感谢指正
  • 阿斯顿自行车:虽然勉强看懂了,但是感觉要是自己写的话,还是写不出来
    这波能反杀:没事,只要有个概念,以后遇到了知道是这么回事就行了,经验多了自然就顺手了
  • 胡子大哈:写的这个系列太赞了啊,请问可以转载吗?
    DCbryant:大哈你真是哪里都在哈哈,波同学写的比书上的容易理解多了!!
    胡子大哈:@波同学 :好的,太可惜啦:sob:
    这波能反杀:不好意思,不可以哈 ~ ~
  • d2d980d89645:最后一个例子有些问题,应该是这样的才对吧:

    Object.prototype.bind = function(context) {
    var _this = this;
    var args = [].slice.call(arguments, 1);

    return function() {
    return _this.apply(context, args.concat([].slice.call(arguments)))
    }
    }
    这波能反杀:@呆呆的阿饭 两种写法都可以,都是利用数组的原型方法
    d2d980d89645:@波同学 [].prototype.slice 这个应该是输错了,应该是 Array.prototype.slice 或者 [].slice
    这波能反杀:主要是看我们在使用的时候,在哪里加参数。函数调用bind时一般就在bind方法里加一些参数就行了
  • 4ce69c455c03:周末一直在等更新,周一一来公司就看到啦:+1:
    isnoth:@波同学 @阿玖De故事 我也试过似乎不需要加参数直接返回addr()即可,第一次执行参数都已经到_arg里面了吧。
    这波能反杀:@阿玖De故事 需要加参数,用来传入第一次函数执行的参数。
    4ce69c455c03:@波同学 那个数字相加的例子最后的返回没有必要加参数吧?我认为直接返回adder()就可以了,不会用到第一次调用时的参数,因为已经保存在args里面了。

    function add(){
    var _arg = [].slice.call(arguments);

    var adder = function(){
    var _adder = function(){
    [].push.apply(_arg,[].slice.call(arguments));
    return _adder;
    };

    _adder.toString = function(){
    return _arg.reduce(function(addUp,current){
    return addUp + current;
    });
    };

    return _adder;
    };

    return adder();// 波老师看这里
    }
  • 年轻小子:厉害厉害 ,工作那么晚,注意身体了
  • A1SoloturboYY:厉害厉害:+1:
    这波能反杀:@A1SoloturboYY - -,刚发出来你就看到了

本文标题:前端基础进阶(八):深入详解函数的柯里化

本文链接:https://www.haomeiwen.com/subject/sairwttx.html