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 相关文章推荐
javascript 数组排序函数
Aug 20 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
Angular ElementRef简介及其使用
Oct 01 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 手机归属地查询 api
2010/02/08 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
jQuery autocomplete插件修改
2009/04/17 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
儿童学习python的一些小技巧
2018/05/27 Python
python实现简单http服务器功能
2018/09/17 Python
python中的协程深入理解
2019/06/10 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
基于Python测试程序是否有错误
2020/05/16 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
英国女装网上商店:I Saw It First
2018/10/18 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
大学生个人自荐信
2014/02/24 职场文书
演讲稿的写法
2014/05/19 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
无房证明范本
2014/09/17 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
如何优化vue打包文件过大
2022/04/13 Vue.js