call/apply/bind的實現
阿新 • • 發佈:2022-03-16
一:手寫函式實現call的功能,但是可能一些邊界情況沒有考慮完整
1 Function.prototype.hycall = function(thisArg, ...arg) { 2 // 這裡的this指向呼叫這個hycall的函式 3 var fn = this 4 //判斷thisArg是否為空,是的話賦值為window(因為呼叫call如果第一個引數為null或者undefined,this指向window) Object的作用是把括號裡面的東西轉換成為一個物件,以免輸入型別為數值無法給它賦fn 5 thisArg = thisArg ? Object(thisArg) : window6 thisArg.fn = fn 7 var result = thisArg.fn(...arg)
補充 delete thisArg.fn 8 return result 9 } 10 11 function abc(num1, num2) { 12 console.log(this); 13 result = num1 + num2 14 console.log(result); 15 } 16 // console.log(Object(0)); 17 abc.call('hello', 10, 20) 18 abc.hycall('hello', 10, 20)
呼叫結果一致
簡單思路就是 把呼叫call的函式賦值給thisArg 然後呼叫 返回結果即可
需要考慮的情況
1:call會自動把0轉換成為一個Number物件,我們這裡就需要利用到Object(thisArg)來實現
2:如果接收到的第一個引數是null,或者undefined,所以我們需要對thisAgr進行一個判斷,如果有這些情況把它賦值成為window
二:手寫函式實現apply的功能
1 Function.prototype.hyapply = function(thisArg, argArray) { 2 var fn = this 3 thisArg = thisArg ? Object(thisArg) : window4 thisArg.fn = fn 5 argArray = argArray ? argArray : [] 6 var result = thisArg.fn(...argArray) 7 delete thisArg.fn 8 return result 9 } 10 11 function abc(num1, num2) { 12 console.log(this); 13 result = num1 + num2 14 console.log(result); 15 } 16 abc.apply('hello', [10, 20]) 17 abc.hyapply('hello', [10, 20])
apply需要考慮的地方:
1:和call一樣,使用Object()
2:需要判斷傳進來的陣列是否為空,為空的話賦值一個新陣列
三·手寫函式實現bind的功能
bind與前面兩個不同的是,函式呼叫bind會返回一個新的函式 並且bind傳參的方式也不一樣 引用bind的時候可以傳參,引用bind構造的新函式也可以傳參
1 function abc(num1, num2) { 2 console.log(this); 3 result = num1 + num2 4 console.log(result); 5 6 } 7 var heihei = abc.bind('hello', 20) 8 heihei(10)
輸出結果為30 利用function proxyFn來構造新函式 引數可以在最終呼叫的時候用finalarg來合併
程式碼:
1 Function.prototype.hybind = function(thisArg, ...argArray) { 2 var fn = this 3 thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg) : window 4 5 function proxyFn(...arg) { 6 thisArg.fn = fn 7 var finalarg = [...argArray, ...arg] 8 var result = thisArg.fn(...finalarg) 9 delete thisArg.fn 10 return result 11 } 12 return proxyFn 13 } 14 15 function abc(num1, num2) { 16 console.log(this); 17 result = num1 + num2 18 console.log(result); 19 20 } 21 var heihei = abc.bind('hello', 20) 22 var heiheihy = abc.hybind('hello', 20) 23 heihei(10) 24 heiheihy(10)
實現:關鍵就在於利用this來轉變