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 相关文章推荐
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
Javascript 按位与运算符 (&)使用介绍
Feb 04 Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
vue添加class样式实例讲解
Feb 12 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 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
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
Python 实现12306登录功能实例代码
2018/02/09 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
如何在python中写hive脚本
2019/11/08 Python
python几种常用功能实现代码实例
2019/12/25 Python
python3 实现口罩抽签的功能
2020/03/11 Python
python中xlrd模块的使用详解
2021/02/01 Python
应用数学自荐书范文
2013/11/24 职场文书
业务内勤岗位职责
2014/04/30 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
摩登时代观后感
2015/06/03 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android