call, apply, bind的分析與實(shí)現(xiàn)

1、call, apply, bind的分析與實(shí)現(xiàn)如何轉(zhuǎn)變函數(shù)的this指向 假如是函數(shù)聲明，那么函數(shù)內(nèi)部的this指向全局對象或者調(diào)用該函數(shù)的對象。 箭頭函數(shù)的this綁定的是父級作用域內(nèi)的this 用法call，apply，bind可以綁定this指向。其中bind是永遠(yuǎn)轉(zhuǎn)變this指向并且不會立刻執(zhí)行。apply，call暫時轉(zhuǎn)變this指向并且立刻執(zhí)行。 apply，call不同之處在于調(diào)用的參數(shù)形式： call（thisarg, arg1?, arg2?, arg3?）第一個參數(shù)代表this指向，剩下的參數(shù)就是原函數(shù)的參數(shù)。 apply（thisarg, argarray?）第一個參數(shù)代

2、表this指向，其次個參數(shù)是以數(shù)組的形式傳遞參數(shù)。 /* bind, call, apply調(diào)用示例 */ var obj = x: &39;obj&39;, getx: function（） / 注重這里不能用法箭頭函數(shù) return this.x; ; / 調(diào)用 obj 對象上的函數(shù)屬性， this就會綁定為obj / &39;obj&39; console.log（obj.getx（）; var x = &39;window&39; function target（a, b, c） console.log（a, b, c）; return this.x; /* bind */ / und

3、efined undefined undefined / &39;window&39; console.log（target（）; const targetbound = target.bind（obj, 1）; / 此時targetbound就是一個轉(zhuǎn)變了this指向的target / 1 2 3 / &39;obj&39; console.log（targetbound（2, 3）; /* call */ / 4 5 6 / &39;obj&39; console.log（target.call（obj, 4, 5, 6）; /* apply */ / 7 8 9 / &39;obj&39

4、; console.log（target.apply（obj, 7, 8, 9）; 自定義實(shí)現(xiàn)call，apply，bind 這三個函數(shù)都有很強(qiáng)的錯誤處理功能，如果傳入的thisarg是一個基本類型，也會被用法包裝類替換，雖然不會報錯，但是不推舉這樣寫，盡量傳遞復(fù)雜類型的變量作為thisarg。 自定義實(shí)現(xiàn)mybind，mycall，myapply / 先定義一個函數(shù)將隨意類型都轉(zhuǎn)換成對象，用于指向this function anytoobj（value） / symbol, bigint 就不推斷了，挺直在default中 switch （typeof value） case &39;boo

5、lean&39;: return new boolean（value）; case &39;number&39;: return new number（value）; case &39;string&39;: return new string（value）; case &39;undefined&39;: return this; case &39;object&39;: if （value = null） return this; / 這里的this就指向了全局對象 return value; default: return value; /* mybind */ f

6、totype.mybind = function （thisarg, argarray） / 防止浮現(xiàn) const mybind = ftotype.mybind; mybind（）; if （typeof this != &39;function&39;） throw new typeerror（&39;mybind must be called on a function&39;）; const that = this; / this 就指向 f.mybind（） 的 f const thatarg = anytoobj（thisarg）; / 處理一下thisarg

7、 const mybound = function （args） / 指定唯一的鍵 const tempkey = symbol（&39;_innerfunction_&39;）; thatarg.tempkey = that; / 將 that 函數(shù)賦值給一個對象的屬性 let ret; if （this instanceof mybound） / 調(diào)用 mybind 之后返回的是 mybound，如果調(diào)用 new mybound（），就會進(jìn)這個分支 ret = new thatarg.tempkey（argarray.concat（args）; else / 這里是調(diào)用 mybound（）

8、，這樣調(diào)用 tempkey 辦法里的 this 就指向了 thatarg ret = thatarg.tempkey（argarray.concat（args）; / 不會對對象造成污染 delete thatarg.tempkey; return ret; ; return mybound; ; /* mycall */ / 與 mybind 相比挺直調(diào)用了 ftotype.mycall = function （thisarg, argarray） if （typeof this != &39;function&39;） throw new typeerror（&39;

9、mycall must be called on a function&39;）; const thatarg = anytoobj（thisarg）; const tempkey = symbol（&39;_innerfunction_&39;）; thatarg.tempkey = this; const ret = thatarg.tempkey（argarray）; delete thatarg.tempkey; return ret; ; /* myapply */ / 與 mycall 相比，其次個參數(shù)希翼是數(shù)組形式，多了個 createlistfromarraylike 用于轉(zhuǎn)化

10、 argarray ftotype.myapply = function （thisarg, argarray） if （typeof this != &39;function&39;） throw new typeerror（&39;myapply must be called on a function&39;）; const createlistfromarraylike = function （val） / 同樣缺乏 bigint 的處理，挺直放在 default 中 switch （typeof val） case &39;string&39;: case &3

11、9;number&39;: case &39;boolean&39;: case &39;symbol&39;: throw new typeerror（&39;createlistfromarraylike called on non-object&39;）; case &39;object&39;: if （array.isarray（val） return val; if （val = null） return ; return array.from（val）; default: return ; ; / 檢測 argarray 的類型 const tempargarray = crea

12、telistfromarraylike（argarray）; const thatarg = anytoobj（thisarg）; const tempkey = symbol（&39;_innerfunction_&39;）; thatarg.tempkey = this; const ret = thatarg.tempkey（tempargarray）; delete thatarg.tempkey; return ret; ; / 這樣 mybind，mycall，myapply就完成了，下面舉行測試 var obj = x: &39;obj&39;, getx: function（a

13、, b, c） console.log（a, b, c）; return this.x; var x = &39;window&39; / 1 2 3 / &39;obj&39; console.log（obj.getx（1, 2, 3）; / target變成一個全局函數(shù)，this 指向全局對象 const target = obj.getx; / 1 2 3 / &39;window&39; console.log（target（1, 2, 3）; /* mybind */ const targetbound = target.mybind（obj, 1）; / 1 2 3 / &39;obj&39; console.log（targetbound（2, 3）; /* mycall */