第再談JavaScript中bind、call、apply三個方法的區(qū)別與使用方式ary.slice();

以上兩行簡單的代碼的執(zhí)行過程為：ary這個實(shí)例通過原型鏈的查找機(jī)制找到Atotype上的slice方法，讓找到的slice方法執(zhí)行，在執(zhí)行slice方法的過程中才把a(bǔ)ry數(shù)組進(jìn)行了截取。

注意：slice方法執(zhí)行之前有一個在原型上查找的過程（當(dāng)前實(shí)例中沒有找到，再根據(jù)原型鏈查找）。

當(dāng)知道了一個對象調(diào)用方法會有一個查找過程之后，我們再看：

varobj={name:'iceman'};

functionfn(){

console.log(this);

console.log();

fn();//this--window

//obj.fn();//UncaughtTypeError:obj.fnisnotafunction

fn.call(obj);

call方法的作用：首先尋找call方法，最后通過原型鏈在Function的原型中找到call方法，然后讓call方法執(zhí)行，在執(zhí)行call方法的時候，讓fn方法中的this變?yōu)榈谝粋€參數(shù)值obj，最后再把fn這個函數(shù)執(zhí)行。

知道這個原型上的原理后，咱們就可以動手分析實(shí)現(xiàn)這三個方法了。

bind、call、apply區(qū)別

call和apply都是為了解決改變this的指向。作用都是相同的，只是傳參的方式不同。除了第一個參數(shù)外，call可以接收一個參數(shù)列表，apply只接受一個參數(shù)數(shù)組

leta={

value:1

functiongetValue(name,age){

console.log(name)

console.log(age)

console.log(this.value)

getValue.call(a,'yck','24')

getValue.apply(a,['yck','24'])

bind和其他兩個方法作用也是一致的，只是該方法會返回一個函數(shù)。并且我們可以通過bind實(shí)現(xiàn)柯里化

如何實(shí)現(xiàn)一個bind函數(shù)

對于實(shí)現(xiàn)以下幾個函數(shù)，可以從幾個方面思考

不傳入第一個參數(shù)，那么默認(rèn)為window改變了this指向，讓新的對象可以執(zhí)行該函數(shù)。那么思路是否可以變成給新的對象添加一個函數(shù)，然后在執(zhí)行完以后刪除？

當(dāng)然是肯定的，于是我們可以這樣寫：

Ftotype.myBind=function(context){

if(typeofthis!=='function'){

thrownewTypeError('Error')

var_this=this

varargs=[...arguments].slice(1)

//返回一個函數(shù)

returnfunctionF(){

//因?yàn)榉祷亓艘粋€函數(shù)，我們可以newF()，所以需要判斷

if(thisinstanceofF){

returnnew_this(...args,...arguments)

return_this.apply(context,args.concat(...arguments))

}

如何實(shí)現(xiàn)一個call函數(shù)

Ftotype.myCall=function(context,...arg){

varcontext=context||window//給context添加一個屬性

//getValue.call(a,'yck','24')=a.fn=getValue

//使用symbol選擇一個獨(dú)一無二的值作為新添加的屬性

letsymbol=newSymbol();

context[symbol]=this;

letresult=context[symbol](...arg)

//刪除添加的函數(shù)

deletecontext[symbol]

returnresult

}

如何實(shí)現(xiàn)一個apply函數(shù)

apply實(shí)現(xiàn)原理與call實(shí)現(xiàn)基本類似，只有傳值的方式不一樣。

Ftotype.myApply=function(context,arg){

varcontext=context||window//給context添加一個屬性

//getValue.call(a,'yck','24')=a.fn=getValue

//使用symbol選擇一個獨(dú)一無二的值作為新添加的屬性

letsymbol=newSymbol();

context[symbol]=this;

letresult=context[symbol](arg)

//刪除添加的函數(shù)

deletecontext[symbol]

returnresult

}

經(jīng)過對以上的函數(shù)進(jìn)行檢測,完美通過。

constobj={

name:'xiaoxiao',

getName:function(arg){

console.log(`我是${}里面的,我里面有${arg}`);

obj.getName([0,0,0,0,0]);//我是xiaoxiao里面的

constobj2={

name:'huahua'

//傳值不一樣

obj.getName.myCall(obj2,1,1,1,1,