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


Posted in Javascript onDecember 02, 2020

简介
当我们在读Vue源码到时候会发现,在它的 _update 实例中就用到了函数柯里化,(createPatchFunction方法)有兴趣的可以

去看一下。

柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。

在《Mostly adequate guide》中,这样总结了 Currying ——只传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数。

Currying 是函数式编程的一种实现,可以给我们的编程带来便利。那 Currying 函数到底长什么样呢?请往下看,我们根据它的概念自己来写一个柯里化函数

实现

// 如何实现 add(1,2) === add(1)(2)
let add = (...args) => {
  return args.length === 1 ? a => a + args[0] : args[0] + args[1]
}

这个似乎有一点接近柯里化的意思,但并不是真正的Currying,我们应该做到 add(1,2,3,,,) === currying(add)(1,2,3,,,) 才能算是真正的柯里化函数,OK,我们继续往下来,

let add = (...args) => args.reduce((a,b)=>a+b)
 
let currying = (fn)=>{
  return function(...args){
    return fn.apply(this, args)
  }
}
// add(1,2,3,,,) === currying(add)(1,2,3,,,)

还有人这么玩,可以参考下

let currying = (fn) => {
  var args = [].slice.call(arguments, 1)
  return function() {
    var newArgs = args.concat([].slice.call(arguments))
    return fn.apply(this, newArgs)
  }
}
 
let addCurry = currying(add, 1, 2);
addCurry() // 3
 
addCurry = currying(add, 1);
addCurry(2) // 3
 
addCurry = currying(add);
addCurry(1, 2) // 3

实际上这个实现方法利用闭包的原理,有时间给大家做个对比,

分析

可以看到,实际上柯里化函数并不算难,要想实际运用在我们的开发中,需要我们花点小心思~

参考:https://github.com/FIGHTING-TOP/FE-knowlodge-base/issues/4

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
JAVASCRIPT style 中visibility和display之间的区别
Jan 22 Javascript
我的javascript 函数链之演变
Apr 07 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 #Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 #Vue.js
keep-alive保持组件状态的方法
Dec 02 #Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 #Vue.js
Vue3+elementui plus创建项目的方法
Dec 01 #Vue.js
JS实现超级好看的鼠标小尾巴特效
Dec 01 #Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 #Javascript
You might like
php实现singleton()单例模式实例
2014/11/06 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
jQuery 动态酷效果实现总结
2009/12/27 Javascript
js星星评分效果
2014/07/24 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
详细解析Python当中的数据类型和变量
2015/04/25 Python
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
python能在浏览器能运行吗
2020/06/17 Python
Django 实现图片上传和下载功能
2020/12/31 Python
佳能德国网上商店:Canon德国
2017/03/18 全球购物
母亲节演讲稿范文
2014/01/02 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
座谈会主持词
2014/03/20 职场文书
岗位说明书怎么写
2014/07/30 职场文书
签订劳动合同通知书
2015/04/16 职场文书
实习介绍信范文
2015/05/05 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
演讲比赛主持词
2015/06/29 职场文书