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原型继承的陷阱
Dec 03 Javascript
用C/C++来实现 Node.js 的模块(二)
Sep 24 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
浅谈Vue.use的使用
Aug 29 Javascript
Vue中qs插件的使用详解
Feb 07 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中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
JS cookie中文乱码解决方法
2014/01/28 Javascript
简单实现js浮动框
2016/12/13 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
python代码过长的换行方法
2018/07/19 Python
python中对数据进行各种排序的方法
2019/07/02 Python
python实现简单成绩录入系统
2019/09/19 Python
python绘制规则网络图形实例
2019/12/09 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
python打开文件的方式有哪些
2020/06/29 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
党旗在我心中演讲稿
2014/09/15 职场文书
村党组织公开承诺书
2015/04/30 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
八年级历史教学反思
2016/02/19 职场文书
用Python将库打包发布到pypi
2021/04/13 Python
深入理解python多线程编程
2021/04/18 Python
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL