色综合图-色综合图片-色综合图片二区150p-色综合图区-玖玖国产精品视频-玖玖香蕉视频

您的位置:首頁技術文章
文章詳情頁

javascript - 求助關于call和apply的問題,反柯里化

瀏覽:130日期:2022-12-15 15:57:36

問題描述

下面是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);

瞬間被你點通,謝謝 !

louiszhai

Function.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)

標簽: JavaScript
主站蜘蛛池模板: 国产真实乱子伦精品视手机观看 | 久久香蕉国产线看观看精品yw | 91久久精品一区二区三区 | 国产精品三级手机在线观看 | 免费观看欧美一区二区三区 | 97在线碰碰观看免费高清 | 丁香狠狠色婷婷久久综合 | 国产精品一区高清在线观看 | 高清成人 | 99久久精品费精品国产一区二区 | 美国一级片在线 | 在线欧洲成人免费视频 | 精品乱人伦一区二区 | 亚洲国产第一区二区香蕉日日 | 99在线视频播放 | 欧美极品第1页专区 | 美女网站视频黄色 | 久久久久久全国免费观看 | 中文字幕咪咪网 | 日本无卡码免费一区二区三区 | 精品国产品国语在线不卡丶 | 日本高清视频www夜色资源 | 成人爱做日本视频免费 | 成年人免费视频观看 | 亚洲悠悠色综合中文字幕 | 国产精品国产三级国产an | 成人国产精品视频频 | 久久成人性色生活片 | 国产成人精品女人不卡在线 | 国产成人aaa在线视频免费观看 | 一级成人毛片免费观看欧美 | 日韩一级免费视频 | 99九九国产精品免费视频 | 黑人巨大videos极度另类 | 久久青草视频 | 免费播放国产性色生活片 | 中文字幕巨乱亚洲 | 中文字幕在线观看日韩 | 亚洲视频一| 久久99久久精品视频 | 国产女厕偷窥系列在线视频 |