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实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
js上传图片预览的实现方法
May 09 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
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实现购物车功能(下)
2016/01/05 PHP
如何打开php的gd2库
2017/02/09 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
学习ExtJS 访问容器对象
2009/10/07 Javascript
javascript Math.random()随机数函数
2009/11/04 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
Python json模块使用实例
2015/04/11 Python
详解Python中break语句的用法
2015/05/14 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
python生成圆形图片的方法
2020/03/25 Python
python实现图片筛选程序
2018/10/24 Python
python交换两个变量的值方法
2019/01/12 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
Python生成词云的实现代码
2020/01/14 Python
flask开启多线程的具体方法
2020/08/02 Python
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
员工培训心得体会
2013/12/30 职场文书
自我评价如何写好?
2014/01/05 职场文书
高考备战决心书
2014/03/11 职场文书
项目合作协议书
2014/09/23 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
刘胡兰观后感
2015/06/16 职场文书
青年联谊会致辞
2015/07/31 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL
Python PIL按比例裁剪图片
2022/05/11 Python