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基础的动画教程,直观易懂
Jan 10 Javascript
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
js的Object.assign用法示例分析
Mar 05 Javascript
原生js实现碰撞检测
Mar 12 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 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笔记之:数据类型与常量的使用分析
2013/05/14 PHP
php中file_exists函数使用详解
2015/05/08 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
jQuery 自定义函数写法分享
2012/03/30 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
JS实现小星星特效
2019/12/24 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
Python 操作文件的基本方法总结
2017/08/10 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
学习python可以干什么
2019/02/26 Python
python多线程同步之文件读写控制
2021/02/25 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
python读取ini配置文件过程示范
2019/12/23 Python
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
小学优秀班干部事迹材料
2014/05/25 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
全陪导游词
2015/02/04 职场文书
SQL中的连接查询详解
2022/06/21 SQL Server