亚洲精品久久久中文字幕-亚洲精品久久片久久-亚洲精品久久青草-亚洲精品久久婷婷爱久久婷婷-亚洲精品久久午夜香蕉

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

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

瀏覽:116日期: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
主站蜘蛛池模板: 免费麻豆国产一区二区三区四区 | 亚洲欧洲日产专区 | 国产一区二区在线观看视频 | 欧美成人亚洲欧美成人 | 亚洲第一页在线播放 | zoofilia活体videos新 | 色婷婷亚洲精品综合影院 | 久久精品国产一区 | 久久99精品久久久久久首页 | 欧美成人亚洲综合精品欧美激情 | 国产黄色在线看 | 91欧美一区二区三区综合在线 | 性欧美一级毛片在线播放 | 黄色免费看 | 又亲又揉摸下面视频免费看 | 麻豆国产一区二区在线观看 | 91视频香蕉视频 | 成人性毛片 | 久久精品亚洲一区二区三区浴池 | 一级毛片私人影院老司机 | 国产精品视频福利一区二区 | 精品九九久久国内精品 | 日韩欧美不卡一区二区三区 | 免费观看一级特黄三大片视频 | 国产亚洲精品97在线观看 | 在线观看欧美一区 | 亚洲一级高清在线中文字幕 | 韩国一级特黄清高免费大片 | 亚洲全网成人资源在线观看 | 日本黄在线| 99热国产这里只有精品免费 | 欧美成人国产一区二区 | 国产精品国偷自产在线 | 巨胸美女扒开腿让我爽 | 国产在线观看不卡免费高清 | 国产免费一区二区三区香蕉精 | 成人网mm视频在线观看 | 亚洲欧美日韩在线观看你懂的 | zoofilia杂交videos新人妖 | 久久久久99精品成人片三人毛片 | 在线播放精品视频 |