JavaScript函数柯里化详解


Posted in Javascript onApril 29, 2016

什么是柯里化

柯里化是这样的一个转换过程,把接受多个参数的函数变换成接受一个单一参数(译注:最初函数的第一个参数)的函数,如果其他的参数是必要的,返回接受余下的参数且返回结果的新函数。

柯理化函数思想:一个js预先处理的思想;利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预先存储的值进行相关的操作处理即可;

柯里化函数主要起到预处理的作用;

bind方法的作用:把传递进来的callback回调方法中的this预先处理为上下文context;

bind方法实现原理1代码如下所示:

/**
* bind方法实现原理1
* @param callback [Function] 回调函数
* @param context [Object] 上下文
* @returns {Function} 改变this指向的函数
*/
function bind(callback,context) {
var outerArg = Array.prototype.slice.call(arguments,2);// 表示取当前作用域中传的参数中除了fn,context以外后面的参数;
return function (){
var innerArg = Array.prototype.slice.call(arguments,0);//表示取当前作用域中所有的arguments参数;
callback.apply(context,outerArg.concat(innerArg));
}
}

下面一段代码模仿在原型链上的bind实现原理

/**
* 模仿在原型链上的bind实现原理(柯理化函数思想)
* @param context [Object] 上下文
* @returns {Function} 改变this指向的函数
*/
Function.prototype.mybind = function mybind (context) {
var _this = this;
var outArg = Array.prototype.slice.call(arguments,1);
// 兼容情况下
if('bind' in Function.prototype) {
return this.bind.apply(this,[context].concat(outArg));
}
// 不兼容情况下
return function () {
var inArg = Array.prototype.slice.call(arguments,0);
inArg.length === 0?inArg[inArg.length]=window.event:null;
var arg = outArg.concat(inArg);
_this.apply(context,arg);
}
}

函数柯里化(Currying)

在计算机科学中,柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术

柯里化就是预先将某些参数传入,得到一个简单的函数。但是预先传入的参数被保存在闭包中,因此会有一些奇特的特性。比如:

例:

var adder = function(num) {
return function(y) {
return num + y;
}
}
var inc = adder(1);
var dec = adder(-1);
//inc, dec现在是两个新的函数,作用是将传入的参数值(+/-)1
alert(inc(99));//100
alert(dec(101));//100
alert(adder(100)(2));//102
alert(adder(2)(100));//102

以上内容是小编给大家介绍的JavaScript函数柯里化及实现bind方法的方法,希望对大家有所帮助!

Javascript 相关文章推荐
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
Bootstrap布局方式详解
May 27 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
JavaScript实现简单计算器功能
Dec 19 Javascript
easyui validatebox验证
Apr 29 #Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 #Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 #Javascript
Bootstrap模态对话框的简单使用
Apr 29 #Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 #Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 #Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 #Javascript
You might like
php用header函数实现301跳转代码实例
2013/11/25 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
IE中createElement需要注意的一个问题
2010/07/13 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
vue实现评论列表功能
2019/10/25 Javascript
python中readline判断文件读取结束的方法
2014/11/08 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
python 如何在测试中使用 Mock
2021/03/01 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
简历中自我评价分享
2013/10/09 职场文书
三方合作协议书范本
2014/04/18 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
《春酒》教学反思
2016/02/22 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
python前后端自定义分页器
2022/04/13 Python
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers