JavaScript 反柯里化

浅析 JavaScript 中的 函数 uncurrying 反柯里化

柯里化

柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果。
因此柯里化的过程是逐步传参,逐步缩小函数的适用范围,逐步求解的过程。
请见我的另一篇博客· 浅析 JavaScript 中的 函数 currying 柯里化

反柯里化

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

obj.func(arg1, arg2)

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

func(obj, arg1, arg2)

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

当然是有个前提的,函数 y 需要语言上支持鸭子类型, 引自维基 在鸭子类型中,关注的不是对象的类型本身,而是它是如何使用的。...在使用鸭子类型的语言中,这样的一个函数可以接受一个任意类型的对象,并调用它的走和叫方法...

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

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是定义在Functionprototype
    上的方法,因此对所有的函数都可以使用此方法。调用时候: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, 反柯里化函数会返回一个新函数,该新函数接受的第一个实参将绑定为 fnthis的上下文,其他参数将传递给 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.splitsplit 函数就具有了 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);
    }
};

拿开头的 split 的例子,看上面的高B格函数怎么运行的:
var split=uncurrying(String.prototype.split);
split(test,‘,‘);

  1. 传入 String.prototype.splitfn, fn 被应用为 Function.prototype.call 的上下文,然后封装在一个新函数里面返回;
  2. 返回新函数后给 split,调用时 split(test,‘,‘),则 arguments[test,‘,‘]
  3. 接下来由于闭包特定 保存了 fnapply 到call,相当于fn.call(arguments),就是例子中的Function.prototype.split.call(test,‘,‘)`
  4. 因此第一个参数 test 对象被设置为 Function.prototype.split 的上下文,其余参数 ‘,‘ 传给 split 函数

由此可见 Function.prototype.call.apply(fn,arguments) 相对于 fn.apply(arguments[0],args) 应用了 call 之后,相当于自动将 arguments 分拆成第一个参数和剩下的参数,并分别应用。 省去了前面两种写法要分拆第一个参数的步骤。

好了,追求B格提升的路是没有止境的,那么现在高潮来了:

var uncurrying=Function.prototype.bind.bind(Function.prototype.call);

我初次看到这个代码时立马晕晕转,不禁赞叹: 果然 javascript 各种奇技淫巧啊!!!

How it works!

这几个英文单词见过很多啊,哈哈,我还是再重复下,看看它是如何工作的:

这里主要用到了函数的两个原型方法 Function.prototype.callFunction.prototype.bind
这两个函数 arguments 可以分解成两部分,第一个参数都是用于被设置成函数执行上下文,其余参数都会传递给调用函数,不同之处是 call 立即应用,所有参数全部一次传入; 但 bind 来说,剩余参数会依次传入调用函数,并延迟执行,所以说 bind 是柯里化的 ,呀,扯远了, 但不论如何,把 arguments 分拆成两部分,那么他们的代码看起来这样:

Function.prototype.call= function (scope,...args) {    // 在 ECMAScript 6 中 ...表示获取其余参数

};

Function.prototype.bind= function (scope,...args) {    // 在 ECMAScript 6 中 ...表示获取其余参数

}; 

首先,我们在 Function.prototype.bind 上调用它自己,因为 Function.prototype.bind 是一个函数,所以它也能调用原型函数 bind, 这意味着无论我们给 Function.prototype.bind.bind() 的第二个 bind 传入什么,它都会称为 第一个 bind 函数的第一个参数 scope, 这就相当于把

var uncurrying=Function.prototype.bind.bind(Function.prototype.call);

转化为:

var uncurrying= function(){
    return Function.prototype.bind.apply(Function.prototype.call)
}

等同于:

var uncurrying= function (fn) {
    return Function.prototype.call.bind(fn);
};

注意这里 在call 上调用了 bind我们知道 bind 会绑定,并返回一个新的函数

这就相当于:

var uncurrying= function (fn) {
    return function(scope,...args){
        return fn.call(scope,...args);
    }
};

在 ECMAScript 6 中 ... 表示获取其余参数,现在我们改写下使其不依赖 ES6

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

啊哈,我们现在绕回来了,上面的函数已经转回前文 “通用反柯里化函数” 一样了。

然后,我们现在往前进一步:

var bind = Function.prototype.bind;
uncurryThis = bind.bind(bind.call);
call = uncurryThis(bind.call);

以上代码作用是对 Function.prototype.call 进行反柯里化,不难看出,它其实就是前面高B格写法的变形。

最后我们再来看一段代码,

var bind = Function.prototype.call.bind(Function.prototype.bind);

啊哦,这段代码看起来也骨骼惊奇,相貌不凡...

我们还是继续把它转换成可读版本:

var bind = Function.prototype.call.bind(Function.prototype.bind);

// 下一步转换
var bind= function (scope) {
    return function () {
        return scope.call(arguments);
    }
};

// 下一步转换, 把 scope用实际参数 Function.prototype.bind 带入
var bind= function () {
    return Function.prototype.bind.call(arguments);
};

// 下一步转换, bind 的调用格式 bind(func, scope), 分别表示传入的函数,以及上下文
var bind= function (func,scope) {
    return Function.prototype.bind.call(func,scope);
};

// 下一步转换
var bind= function (func,scope) {
    return func.bind(scope);
};

测试代码:

var bind = Function.prototype.call.bind(Function.prototype.bind);
var context={foo:"bar"};
function returnFoo(){
    return this.foo;
}
var amazing=bind(returnFoo,context);
console.log(amazing());                       // bar

// 这个是我们经过转换得到的函数
var bind2= function (func,scope) {
    return func.bind(scope);
};
var amazing2=bind2(returnFoo,context);
console.log(amazing2());                      // bar

上面的测试代码把原 var bind = Function.prototype.call.bind(Function.prototype.bind); 与我们转换过后的代码进行调用,测试结果都返回相同的 bar

此文写到这里已经很长了,不知道有没有朋友会看到这里 :)
下面再最后补充一个,你看它意思是?

var slice = Function.prototype.call.bind(Array.prototype.slice);

这个从字面上能够看出来,将 call 绑定到了 Array.prototype.slice 上面, 转化过程:

var slice2= function(){
    return Function.prototype.call.apply(Array.prototype.slice);
};
var slice2=function(fn) {
    return Array.prototype.slice.call(fn);
};
var slice2=function() {
    return Array.prototype.slice.call(arguments[0],arguments[1],arguments[2]);
};

测试代码:

var slice = Function.prototype.call.bind(Array.prototype.slice);
console.log(slice([1,2,3],0,1));                              // [ 1 ]
console.log(slice2([1,2,3],0,1));                             // [ 1 ]
console.log(Array.prototype.slice.call([1,2,3],0,1));         // [ 1 ] 

这也算是对 Function.prototype.call , Function.prototype.apply , Function.prototype.bind 三个方法做个很多个练习,这三个方法是 Javascript 函数式风格的重要基础,童鞋们给上述高B格语句做装换的时候有木有一种做函数变换数学题的赶脚?

原文:http://www.cnblogs.com/zztt/p/4152147.html

参考资料:
浅析 JavaScript 中的 函数 currying 柯里化
浅析 JavaScript 中的 Function.prototype.bind() 方法
我对原型对象中this的一个懵懂错误认识
Javascript中有趣的反柯里化技术

时间: 2024-10-11 00:59:13

JavaScript 反柯里化的相关文章

javascript之反柯里化(uncurrying)

在JavaScript中,当我们调用对象的某个方法时,其实不用去关心该对象原本是否被设计为拥有这个方法,这是动态类型语言的特点.可以通过反柯里化(uncurrying)函数实现,让一个对象去借用一个原本不属于他的方法. 通常让对象去借用一个原本不属于它的方法,可以用call和apply实现,如下 更常见的场景之一是让类数组对象去借用Array.prototype的方法: (function(){ Array.prototype.push.call(arguments,4) console.log

柯里化与反柯里化

柯里化 什么是柯里化 柯里化(英语:Currying),是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术. 柯里化的基础 上面的代码其实是一个高阶函数(high-order function), 高阶函数是指操作函数的函数,它接收一个或者多个函数作为参数,并返回一个新函数.此外,还依赖与闭包的特性,来保存中间过程中输入的参数.即: 函数可以作为参数传递 函数能够作为函数的返回值 闭包 通用实现 var currying

js之柯里化与反柯里化

先给大家介绍什么是柯里化与反柯里化 百度翻译: 在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术.这个技术由 Christopher Strachey 以逻辑学家 Haskell Curry 命名的,尽管它是 Moses Schnfinkel 和 Gottlob Frege 发明的. 柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具

JavaScript函数柯里化的一些思考

1. 高阶函数的坑 在学习柯里化之前,我们首先来看下面一段代码: var f1 = function(x){ return f(x); }; f1(x); 很多同学都能看出来,这些写是非常傻的,因为函数f1和f是等效的,我们直接令var f1 = f;就行了,完全没有必要包裹那么一层. 但是,下面一段代码就未必能够看得出问题来了: var getServerStuff = function(callback){ return ajaxCall(function(json){ return cal

JavaScript函数柯里化

函数式 JavaScript是以函数为一等公民的函数式语言.函数在JavaScript中也是一个对象(继承制Function),函数也可以作为参数传递成函数变量.最近几年函数式也因为其无副作用的特性.透明性.惰性计算等在高并发,大数据领域火起来了. JavaScript中也有如Underscore.lodash之类的函数式库,如lodash的使用方式: var names = _.chain(users) .map(function(user){ return user.user; }) .jo

JS的防抖,节流,柯里化和反柯里化

今天我们来搞一搞节流,防抖,柯里化和反柯里化吧,是不是一看这词就觉得哎哟wc,有点高大上啊.事实上,我们可以在不经意间用过他们但是你却不知道他们叫什么,没关系,相信看了今天的文章你会有一些收获的 节流 首先我们来搞一下节流,啥叫节流,就是将高频率触发事件变成低频率触发事件,举个简单的例子,但我们用window.onscroll滚动事件的时候你会发现滚轮滑动一次可能会触发好多次事件, 代码: window.onscroll = function(){ console.log("触发")

js反柯里化个人理解以及操作

学过js的都知道原型是js的灵魂,我刚接触原型的时候觉得还挺绕的,然后看了一系列的解释然后自己理了一下思路,总算是清晰了,今天我弄了一下柯里化和反柯里化,对反柯里化结合原型链有了一定的认识,一下是我所总结的. 反柯里化,个人解释就是通过添加对象或者函数的原型的方法,让原本使用范围具有局限性的一段代码能够适用范围更广,例如,数组的reduce,map,foreach这些函数都只能通过数组对象使用,如果字符串要使用其方法,必须通过call,bind,apply的方式去修改函数的调用主体,但是我们完全

JavaScript的柯里化函数

柯里化,或者说部分应用,是一种函数式编程的技术,对于熟悉以传统方式编写 JavaScript 代码的人来说可能会很费解.但如果使用得当,它可以使你的 JavaScript 函数更具可读性. 更具可读性和灵活性 函数式 JavaScript 被吹捧的优点之一就是拥有短小紧凑的代码风格,可以用最少行数.更少重复的代码得到正确的结果.有时这会以牺牲可读性为代价:如果你还不熟悉函数式编程的方法,这种方法写的代码会很难阅读和理解. 如果之前你遇到过柯里化这个术语,但是不知道它是什么意思,把它当做奇怪的.难

Javascript与柯里化

一.柯里化和柯南的关系是? 回答:如果我说“柯里化 == 柯南”呢?众人:博主,r u ok!? 是不是钓鱼钓久了脑袋秀逗了哈?柯里化可是函数式编程中的一个技巧,而柯南是到哪儿哪儿死人.10年不老的神话般的存在.八竿子都打不到的,怎会相等呢?? 回答:诸位,眼睛睁大点,是==, 不是===哦~众人:嗯哪,我眼睛已经瞪得灯泡大了,粑粑并没有变冰淇淋啊? 回答:这不就结了嘛.我说的是弱等于==, 又不是强等于===. 你想那,JS的世界里,0==false. 你看,这阿拉伯届的数字0,和英美届的单词