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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 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学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
php获取字段名示例分享
2014/03/03 PHP
YII实现分页的方法
2014/07/09 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
js运动事件函数详解
2016/10/21 Javascript
详解a++和++a的区别
2017/08/30 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
详解vue路由
2020/08/05 Javascript
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
django 创建过滤器的实例详解
2017/08/14 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
Python线程同步的实现代码
2018/10/03 Python
WxPython建立批量录入框窗口
2019/02/27 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
白色公司:The White Company
2017/10/11 全球购物
电子商务专业自我鉴定
2013/12/18 职场文书
给领导的致歉信范文
2014/01/13 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
2014年检验员工作总结
2014/11/19 职场文书
优秀党员先进材料
2014/12/18 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
员工安全责任协议书
2016/03/22 职场文书
JavaScript获取URL参数的方法分享
2022/04/07 Javascript