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中的异常处理方法
Jun 16 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
Bootstrap Table使用整理(一)
Jun 09 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 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
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
比较完整的微信开发php代码
2016/08/02 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
Python生成随机数的方法
2014/01/14 Python
python获得图片base64编码示例
2014/01/16 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
非常详细的C#面试题集
2016/07/13 面试题
后勤部经理岗位职责
2014/02/23 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
纯html+css实现Element loading效果
2021/08/02 HTML / CSS
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android