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 研究心得 取得属性的值
Nov 30 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
JS target与currentTarget区别说明
Aug 28 Javascript
javascript五图轮播切换实用版
Aug 17 Javascript
很好用的js日历算法详细代码
Mar 07 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
js调用图片隐藏&显示实现代码
Sep 13 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 Javascript
JS扩展方法实例分析
Apr 15 Javascript
网络传输协议(http协议)
Nov 18 Javascript
JavaScript Date 知识浅析
Jan 29 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面向对象程序设计入门教程
2019/06/22 PHP
JS编程小常识很有用
2012/11/26 Javascript
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
Python3 Random模块代码详解
2017/12/04 Python
Python全排列操作实例分析
2018/07/24 Python
python发送告警邮件脚本
2018/09/17 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
团队精神演讲稿
2013/12/31 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
企业承诺书怎么写
2014/05/24 职场文书
环保志愿者活动方案
2014/08/14 职场文书
高中运动会广播稿
2014/09/16 职场文书
企业务虚会发言材料
2014/10/20 职场文书
贷款担保书
2015/01/20 职场文书
复兴之路观后感
2015/06/02 职场文书
导游词之崇武古城
2019/10/07 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
css样式important规则的正确使用方式
2022/06/10 HTML / CSS