javascript – Ich bitte um Hilfe zu Call and Apply und Anti-Currying
淡淡烟草味
淡淡烟草味 2017-05-16 13:41:58
0
2
445

Das Folgende sind zwei Implementierungen von uncurring

Erreiche 1

Function.prototype.uncurrying = function(){ var self = this; return function(){ // 获取传入的上下文对象 var context = Array.prototype.shift.call(arguments); // 这里的this是调用uncurrying者 return self.apply(context, arguments); }; }; var push = Array.prototype.push.uncurrying (); var arr = []; push(arr, 1); // ==> arr = [1] push(arr, 4); // ==> arr = [1, 4]

Erreiche 2

Function.prototype.uncurrying = function(){ var self = this; return function(){ return Function.prototype.call.apply(self, arguments); }; }; var push = Array.prototype.push.uncurrying (); var arr = []; push(arr, 1); // ==> arr = [1] push(arr, 4); // ==> arr = [1, 4]

Die beiden Ergebnisse sind gleich, aber ich bin etwas verwirrt über die zweite Implementierungsmethode, hauptsächlich hier

第一种方式显示的用self,在这里也就是push方法执行了一下, self.apply(context, arguments); 但是如下第二种实现方式,却没有发现self执行的痕迹, 按我的理解这里就是用apply修改call的上下文为self,这里也就是push, 但这样有执行push方法吗?难道call内部的实现帮忙执行了self?求解 Function.prototype.call.apply(self, arguments);

Ich wurde sofort von dir angeklickt, danke!

louiszhai

Function.prototype.call.apply(self, arguments); 先用apply修改了call的上下文为self, 后续调用uncurrying,相当于在self上调用call方法,也就执行了self
淡淡烟草味
淡淡烟草味

Antworte allen (2)
我想大声告诉你

Function.prototype.call.apply(self, arguments);这个看起来有些绕,其实很好理解。
实际上,由你的第二种实现还可以推出反柯里化的第三种实现

Function.prototype.unCurrying = function () { return this.call.bind(this); }; var push = Array.prototype.push.unCurrying(), obj = {}; push(obj, '123', '456'); console.log(obj); //Object {0: "123", 1: "456", length: 2}

接下来我会先分析下你的第二种实现,再分析第三种实现。你的实现是这样的:

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

谁调用uncurrying,谁就等于thisself. 这意味着self就是数组的push方法.
替换掉self,最终外部的push等同如下函数:

function(){ return Function.prototype.call.apply(Array.prototype.push, arguments); };

函数放在这里,我们先来理解apply函数,apply有分解数组为一个个参数的作用。

推导公式a.apply(b, arguments)意味着把b当做this上下文,相当于是在b上调用a方法,并且传入所有的参数,如果b中本身就含有a方法,那么就相当于b.a(arg1, arg2,…)

公式1a.apply(b, arguments) === b.a(arg1, arg2,…)

由于callapply除参数处理不一致之外,其他作用一致,那么公式可以进一步演化得到:

公式2a.call(b, arg) === b.a(arg)

公式1这些代入上面的函数,有:

a = Function.prototype.call即a等于call方法。

我们接着代入公式,有:

b = Array.prototype.push即b等于数组的push方法

那么Function.prototype.call.apply(Array.prototype.push, arguments)就相对于:

Array.prototype.push.call(arg1, arg2,…),那么:

push([], 1)就相当于Array.prototype.push.call([], 1),再代入公式2,相当于:

[].push(1)

答案已经呼之欲出了,就是往数组中末尾添加数字1。



接下来我来分析反柯里化的第三种实现:

对于this.call.bind(this);部分,this相当于Array.prototype.push,那么整体等同于如下:

Array.prototype.push.call.bind(Array.prototype.push)

这里的难点在于bind方法,bind的实现比较简单,如下:

Function.prototype.bind = function(thisArg){ var _this = this; var _arg = _slice.call(arguments,1); return function(){ var arg = _slice.call(arguments); arg = _arg.concat(arg); return _this.apply(thisArg,arg); } }

想要理解必须化繁为简,理解得越简单,也就理解得越透彻。进一步简化bind的原理,等同于谁调用bind,就返回一个新的function。

我们假设函数fn调用bind方法如fn.bind([1, 2]),经过简化,忽略bind绑定参数的部分,最终返回如下:

function(){ return fn.apply([1, 2], arguments); }

以上,将fn替换为Array.prototype.push.call[1, 2]替换为Array.prototype.push,那么:

Array.prototype.push.call.bind(Array.prototype.push)将等同于:

function(){ return Array.prototype.push.call.apply(Array.prototype.push, arguments); }

这个看起来和反柯里化的第二种实现有些不大相同,不要急,虽然表面上看起来不一致,但骨子里还是一致的。请耐心往下看:

不同的地方在于前半部分Array.prototype.push.call,这里它是一个整体,实际上想代表的就是call方法。而我们都知道,所有函数的call方法,最终都是Function.prototypecall方法。那么,就有如下恒等式成立:

Array.prototype.push.call === Function.prototype.call //true

那么以上函数将等同于:

function(){ return Function.prototype.call.apply(Array.prototype.push, arguments); }

褪去代入的参数,函数可还原为:

function(){ return Function.prototype.call.apply(self, arguments); }

综上,最终反柯里化的第三种实现将和第二种实现完全一致,推理完毕,码字不易,喜欢的请点个赞谢谢~

为了加深对bind和 柯里化的理解,我还专门撰写了博客深入分析它们。

请参看 函数式编程之柯里化与反柯里化 、Function.prototype.bind方法指南 。

喜欢的同学还可以关注我的专栏路易斯前端深度课

    淡淡烟草味

    基础
    call和apply的区别和作用不再赘述

    call和apply源码实现
    他们很接近,这里只介绍call,举个例子:a.call(b, c)

    1. 取出第一个参数x = b || {}

    2. x.fn = a

    3. 拼接除第一个参数以外的参数,用逗号分隔,结果为d

    4. 创建独立执行环境的函数e = new Function(),函数内部执行x.fn(d)

    5. 执行创建的e

    方案二的理解
    这里就不考虑call和apply扩大对象方法的问题,因为从源码中方法都会动态创建,以下就不再赘述这个问题。

    Function.prototype.call.apply(self, arguments); var push = Array.prototype.push.uncurrying ();
    1. self指向Array.prototype.push

    2. (Function.prototype.call).apply(Array.prototype.push, arguments);

    3. 利用刚讲解的源码,把2变形,得出:Array.prototype.push.(Function.prototype.call)(arguments),这里还需要转化,call接受的不是数组,见4。

    4. arguments是类数组对象[arr, 1],把3变形,得出:Array.prototype.push.(Function.prototype.call)(arr, 1)

    5. call的源码已经解释过,于是变化4,得出arr.(Array.prototype.push)(1)

    6. 写得好看一点,arr.push(1)

      Neueste Downloads
      Mehr>
      Web-Effekte
      Quellcode der Website
      Website-Materialien
      Frontend-Vorlage
      Über uns Haftungsausschluss Sitemap
      Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!