第JS前端面試題詳解之手寫bind目錄bind的用法this的指向問題積累參數實現一個bind結尾大家好，我是前端西瓜哥，今天我們用JS來實現內置的bind方法。

bind的用法

在實現之前，我們先學習一下Ftotype.bind的用法。

function.bind(thisArg[,arg1[,arg2[,...]]])

bind是函數特有的一個方法，可以創(chuàng)建一個綁定了this的新函數。

接受的參數為如下。

第1個參數thisArg：用于修改this指向，且this一旦修改后將無法再改變。arg1,arg2,...：剩余的是可選的參數項，會在bind返回的新函數調用時，會作為函數的前幾個參數去調用。

this的指向問題

我們在開發(fā)的時候，有時候會遇到JS的this指向丟失問題。

下面我們看一個例子。

constperson={

nickname:'前端西瓜哥',

eatWatermelon(){

console.log(this.nickname+'吃西瓜');

person.eatWatermelon();

上面的代碼中，在調用person.eatWatermelon時，this指向person，輸入結果為前端西瓜哥吃西瓜。

下面我們再執(zhí)行下面代碼。

consteatWatermelon=person.eatWatermelon;

eatWatermelon();

輸入結果就匪夷所思了起來，它是：undefined吃西瓜

這是因為this的指向變成了eatWatermelon()執(zhí)行時所在作用域的this，在瀏覽器script標簽最外層時，是全局對象window（嚴格模式下，全局對象this會變成undefined）。

所以eatWatermelon()執(zhí)行中的this.nickname等價于window.nickname，因為我們沒有賦值過，所以是undefined。

有時候我們不希望this丟失，該怎么辦？

這時候我們就要用到一個bind方法，可以永久改變this的指向，且不能再改變。

consteatWatermelon=person.eatWatermelon.bind(person);

eatWatermelon();

這樣的話，eatWatermelon函數的this就會永遠指向person，能輸出我們預期的前端西瓜哥吃西瓜。

所以，對于一個函數來說，它的this指向是在執(zhí)行時確定的：

如果函數是bind返回的，this永遠指向執(zhí)行bind綁定的那個thisArg值；如果函數前面有個對象，那this指向這個對象；如果函數前沒有對象，那this指向當前的作用域（可能是函數作用域，可能是全局作用域）。

另一種控制this指向的寫法是使用箭頭函數，尤其適合在函數中調用另一個函數的情況，因為篇幅原因這里不展開講。

積累參數

bind除了常用于強綁this外，另一個用的比較少的作用：預置函數參數。

functionadd(a,b,c){

returna+b+c;

constaddSix=add.bind(null,6);

constaddSixThenAddFour=addSix.bind(null,4);

addSixThenAddFour(5)

//15

addSixThenAddFour(7)

//17

實現一個bind

下面進入正題，實現一個bind。

Ftotype.myBind=function(thisArg,...prefixArgs){

constfn=this;

returnfunction(...args){

returnfn.call(thisArg,...prefixArgs,...args);

要點是利用閉包。

讓返回的新函數可以訪問到三個私有屬性：

fn（原來的函數）thisArg（需要強綁不變的this指向）prefixArgs屬性

當我們調用這個新函數時，我們會執(zhí)行fn函數，并利用call方法來指定this為thisArg，然后將預填充的多個參數，和新函數接收的參數依次填入。

最后不要忘記返回調用后的值。因為新函數是原函數的封裝，返回值也要和原函數表現一致。

結尾

bind方法的實現并不復雜，更重要的是你要