浅谈JS中的反柯里化( uncurrying)


Posted in Javascript onAugust 17, 2017

反柯里化

相反,反柯里化的作用在与扩大函数的适用性,使本来作为特定对象所拥有的功能的函数可以被任意对象所用.

即把如下给定的函数签名,

obj.func(arg1, arg2)

转化成一个函数形式,签名如下:

func(obj, arg1, arg2)

这就是 反柯里化的形式化描述。

例如,下面的一个简单实现:

Function.prototype.uncurrying = function() {
  var that = this;
  return function() {
    return Function.prototype.call.apply(that, arguments);
  }
};

function sayHi () {
  return "Hello " + this.value +" "+[].slice.call(arguments);
}
var sayHiuncurrying=sayHi.uncurrying();
console.log(sayHiuncurrying({value:'world'},"hahaha"));

解释:

  • uncurrying是定义在Function的prototype上的方法,因此对所有的函数都可以使用此方法。调用时候:sayHiuncurrying=sayHi.uncurrying(),所以uncurrying中的 this 指向的是 sayHi 函数; (一般原型方法中的 this 不是指向原型对象prototype,而是指向调用对象,在这里调用对象是另一个函数,在javascript中函数也是对象)
  • call.apply(that, arguments) 把 that 设置为 call 方法的上下文,然后将 arguments 传给 call方法,前文的例子,that 实际指向 sayHi,所以调用 sayHiuncurrying(arg1, arg2, ...) 相当于 sayHi.call(arg1, arg2, ...);
  • sayHi.call(arg1, arg2, ...), call 函数把 arg1 当做 sayHi的上下文,然后把 arg2,... 等剩下的参数传给sayHi,因此最后相当于 arg1.sayHi(arg2,...);
  • 因此,这相当于 sayHiuncurrying(obj,args) 等于 obj.sayHi(args)。

最后,我们反过来看,其实反柯里化相当于把原来 sayHi(args) 的形式,转换成了 sayHiuncurrying(obj,args),使得sayHi的使用范围泛化了。 更抽象地表达, uncurryinging反柯里化,使得原来 x.y(z) 调用,可以转成 y(x',z) 形式的调用 。 假设x' 为x或者其他对象,这就扩大了函数的使用范围。

通用反柯里化函数

上面例子中把uncurrying写进了prototype,这不太好,我们其实可以把 uncurrying 单独封装成一个函数;

var uncurrying= function (fn) {
  return function () {
    var args=[].slice.call(arguments,1);
    return fn.apply(arguments[0],args);    
  }  
};

上面这个函数很清晰直接。

使用时 调用 uncurrying 并传入一个现有函数 fn, 反柯里化函数会返回一个新函数,该新函数接受的第一个实参将绑定为 fn 中 this的上下文,其他参数将传递给 fn 作为参数。

所以,对反柯里化更通俗的解释可以是 函数的借用,是函数能够接受处理其他对象,通过借用泛化、扩大了函数的使用范围。

所以 uncurrying更常见的用法是对 Javascript 内置的其他方法的 借调 而不用自己都去实现一遍。

文字描述比较绕,还是继续看代码:

var test="a,b,c";
console.log(test.split(","));

var split=uncurrying(String.prototype.split);  //[ 'a', 'b', 'c' ]
console.log(split(test,','));          //[ 'a', 'b', 'c' ]

split=uncurrying(String.prototype.split) 给 uncurrying 传入一个具体的fn,即String.prototype.split ,split 函数就具有了 String.prototype.split 的功能,函数调用 split(test,',') 时,传入的第一个参数为 split 执行的上下文,剩下的参数相当于传给原 String.prototype.split 函数。

再看一个例子:

var $ = {};
console.log($.push);             // undefined
var pushUncurrying = uncurrying(Array.prototype.push);
$.push = function (obj) {
  pushUncurrying(this,obj);
};
$.push('first');
console.log($.length);            // 1
console.log($[0]);              // first
console.log($.hasOwnProperty('length'));   // true

这里模仿了一个“类似jquery库” 实现时借用 Array 的 push 方法。 我们知道对象是没有 push 方法的,所以 console.log(obj.push) 返回 undefined,可以借用Array 来处理 push,由原生的数组方法(js引擎)来维护 伪数组对象的 length 属性和数组成员。

同样的道理,我们还可以继续有:

var indexof=uncurrying(Array.prototype.indexOf);
$.indexOf = function (obj) {
  return indexof(this,obj);
};
$.push("second");
console.log($.indexOf('first'));       // 0
console.log($.indexOf('second'));       // 1
console.log($.indexOf('third'));       // -1

例如我们在实现自己的类库时,有些方法如果有些方法和原生的类似,那么可以通过 uncurrying 借用原生方法。

我们还可以把 Function.prototype.call/apply 方法 uncurring,例如:

var call= uncurrying(Function.prototype.call);
var fn= function (str) {
  console.log(this.value+str);
};
var obj={value:"Foo "};
call(fn, obj,"Bar!");            // Foo Bar!

这样可以非常灵活地把函数也当做一个普通“数据”来使用,有函数式编程的赶脚,在一些类库中经常能看到这样的用法。

通用 uncurrying 函数的进击

上面的 uncurrying 函数是比较符合思维习惯容易理解的版本,接下来一路进击,看几个其他版本:

首先,如果B格高一点,uncurrying 也可能写成这样:

var uncurrying= function (fn) {
  return function () {
    var context=[].shift.call(arguments);
    return fn.apply(context,arguments);
  }
};

当然如果还需要再提升B格,那么还可以是这样:

var uncurrying= function (fn) {
  return function () {    
    return Function.prototype.call.apply(fn,arguments);
  }
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
js编写简单的聊天室功能
Aug 17 #Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 #Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 #Javascript
js实现方块上下左右移动效果
Aug 17 #Javascript
JavaScript中一些特殊的字符运算
Aug 17 #Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 #Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 #Javascript
You might like
PHP的中问验证码
2006/11/25 PHP
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
php 代码优化之经典示例
2011/03/24 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
浅谈php调用python文件
2019/03/29 PHP
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
node app 打包工具pkg的具体使用
2019/01/17 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
python对html代码进行escape编码的方法
2015/05/04 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
计算机网络专业推荐信
2013/11/24 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
电频谱管理的原则是什么
2022/02/18 无线电
python中 .npy文件的读写操作实例
2022/04/14 Python