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 相关文章推荐
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
使用AOP改善javascript代码
May 01 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 Javascript
基于Cesium绘制抛物弧线
Nov 18 Javascript
js实现圆形菜单选择器
Dec 03 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 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
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
php的ddos攻击解决方法
2015/01/08 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
php实现简单爬虫的开发
2016/03/28 PHP
JS 强制设为首页的代码
2009/01/31 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
Windows下python3.7安装教程
2018/07/31 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
python statsmodel的使用
2020/12/21 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
餐饮业创业计划书范文
2014/01/06 职场文书
中青班党性分析材料
2014/02/16 职场文书
安卓程序员求职信
2014/02/28 职场文书
法学专业求职信
2014/07/15 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
python图像处理 PIL Image操作实例
2022/04/09 Python
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL