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 无符号右移运算符
Apr 17 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
React中的Context应用场景分析
Jun 11 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
图象函数中的中文显示
2006/10/09 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
JS常用知识点整理
2017/01/21 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
详解python做UI界面的方法
2019/02/27 Python
Python实现最大子序和的方法示例
2019/07/05 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
500行python代码实现飞机大战
2020/04/24 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
客服工作职责
2013/12/11 职场文书
生产部岗位职责范文
2014/02/07 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
运动会班级前导词
2015/07/20 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL