1. 程式人生 > 其它 >call/apply/bind的實現

call/apply/bind的實現

一:手寫函式實現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) : window
6 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) : window
4 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來轉變