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库的方法
Feb 12 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
JavaScript函数柯里化
Nov 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
IStream与TStream之间的相互转换
2008/08/01 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
Python中的filter()函数的用法
2015/04/27 Python
python实现FTP服务器服务的方法
2017/04/11 Python
Python探索之修改Python搜索路径
2017/10/25 Python
Python实现注册、登录小程序功能
2018/09/21 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
django认证系统 Authentication使用详解
2019/07/22 Python
Python Collatz序列实现过程解析
2019/10/12 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
python实现ftp文件传输功能
2020/03/20 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
护士辞职信模板
2014/01/20 职场文书
党建示范点实施方案
2014/03/12 职场文书
个人公开承诺书
2014/03/28 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
公安学专业求职信
2014/07/27 职场文书
2014年质量工作总结
2014/11/22 职场文书
公司股份合作协议书
2014/12/07 职场文书
小学教师节活动总结
2015/03/20 职场文书
收入证明申请书
2015/06/12 职场文书
vue中div禁止点击事件的实现
2022/04/02 Vue.js