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 相关文章推荐
jQuery 开发者应该注意的9个错误
May 03 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
使用Sticker.js实现贴纸效果
Jan 28 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
JS遍历树层级关系实现原理解析
Aug 31 Javascript
微信小程序实现自定义底部导航
Nov 18 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 json_encode奇怪问题说明
2011/09/27 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
初识PHP
2014/09/28 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
href下载文件根据id取url并下载
2014/05/28 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
js定时器实例分享
2016/12/20 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
学生党员思想汇报
2013/12/28 职场文书
采购经理岗位职责
2014/02/16 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
小学语文国培研修日志
2015/11/13 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
HTML基本元素标签介绍
2022/02/28 HTML / CSS