javascript - 求助關于call和apply的問題,反柯里化
問題描述
下面是uncurring的兩種實現
實現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]
實現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]
兩種結果是一樣的,但是第二種實現的方式我有點迷糊,主要是這里
第一種方式顯示的用self,在這里也就是push方法執行了一下, self.apply(context, arguments);但是如下第二種實現方式,卻沒有發現self執行的痕跡,按我的理解這里就是用apply修改call的上下文為self,這里也就是push,但這樣有執行push方法嗎?難道call內部的實現幫忙執行了self?求解 Function.prototype.call.apply(self, arguments);
瞬間被你點通,謝謝 !
louiszhaiFunction.prototype.call.apply(self, arguments);先用apply修改了call的上下文為self,后續調用uncurrying,相當于在self上調用call方法,也就執行了self
問題解答
回答1: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,誰就等于this或self. 這意味著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,…)
公式1:a.apply(b, arguments) === b.a(arg1, arg2,…)
由于call 和 apply 除參數處理不一致之外,其他作用一致,那么公式可以進一步演化得到:
公式2:a.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.prototype 的 call方法。那么,就有如下恒等式成立:
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方法指南 。
喜歡的同學還可以關注我的專欄路易斯前端深度課
回答2:基礎call和apply的區別和作用不再贅述
call和apply源碼實現他們很接近,這里只介紹call,舉個例子:a.call(b, c)
取出第一個參數x = b || {}
x.fn = a
拼接除第一個參數以外的參數,用逗號分隔,結果為d
創建獨立執行環境的函數e = new Function(),函數內部執行x.fn(d)
執行創建的e
方案二的理解這里就不考慮call和apply擴大對象方法的問題,因為從源碼中方法都會動態創建,以下就不再贅述這個問題。
Function.prototype.call.apply(self, arguments);var push = Array.prototype.push.uncurrying ();
self指向Array.prototype.push
(Function.prototype.call).apply(Array.prototype.push, arguments);
利用剛講解的源碼,把2變形,得出:Array.prototype.push.(Function.prototype.call)(arguments),這里還需要轉化,call接受的不是數組,見4。
arguments是類數組對象[arr, 1],把3變形,得出:Array.prototype.push.(Function.prototype.call)(arr, 1)
call的源碼已經解釋過,于是變化4,得出arr.(Array.prototype.push)(1)
寫得好看一點,arr.push(1)
