用原生js實現乙個bind方法

bind()方法建立乙個新的函式, 當被呼叫時，將其this關鍵字設定為提供的值，在呼叫新函式時，在任何提供之前提供乙個給定的引數序列。

這段是來自mdn:bind的介紹,我們可以理解bind方法返回乙個新的函式，這個函式內部的this指向提供的引數值，來看個例子

const person = 
}const getage = person.getage
console.log(getage()) // output :undefined

上面**輸出了undefined，什麼原因呢？相信大家都知道，getage()執行時內部的this指向了window,而window並沒有age這個屬性，我們並沒有定義全域性的age變數，那我們怎麼解決這個問題呢？那就是用哪個bind方法，需要注意的是bind方法的相容性,ie9以上包括ie9。其他現代瀏覽器不用說肯定是支援的。下面我們用一下bind方法來修改上面的例子

const person = 
}const getage = person.getage.bind(person)
console.log(getage()) // output :20

我們看到通過bind方法就可以輸出age了

fun.bind(thisarg[, arg1[, arg2[, ...]]])

thisarg

當繫結函式被呼叫時，該引數會作為原函式執行時的 this 指向。當使用new 操作符呼叫繫結函式時，該引數無效。

arg1, arg2, ...

當繫結函式被呼叫時，這些引數將置於實參之前傳遞給被繫結的方法

返回由指定的this值和初始化引數改造的原函式拷貝

個人理解：bind方法接受的第乙個引數是你想繫結的this值，通常是個物件，這個物件在函式內部用this可以獲取到，第乙個引數後面可以跟若干個引數，這些引數可以在bind的時候傳遞，相當於預設引數。

好了，知道用法和引數後我們就可以實現乙個簡陋版的了

function.prototype.bind=function (context)  is not a function`)
} const srcfun=this// 儲存原始函式
const arg=array.prototype.slice.call(arguments,1)// 把arguments類陣列轉為真實陣列
let noop=function(){}
const fbound= function () 
// 合併新舊引數
} if(this.prototype)
fbound.prototype=new noop()//新函式的prototype的__proto__指向noop.prototype
return fbound
}

很簡陋，沒有嚴謹的判斷。

乙個繫結函式也能使用new操作符建立物件：這種行為就像把原函式當成構造器。提供的 this 值被忽略，同時呼叫時的引數被提供給模擬函式。

上面是mdn的一段話，也就是bind返回的函式也可以當做建構函式來用，此時bind傳遞的第乙個引數無效，但是其他引數有效。

那麼要做判斷處理就是

//**2
if(this instanceof noop)

這段**就可以區分出是在把函式當做建構函式來new了還是當做普通方法來呼叫了，我們知道

當new 的時候實際做了這點事

var obj={}
obj._proto_=建構函式的prototype
建構函式.call(obj)

所以現在在**2中的this是建構函式的例項,那就得更改bind後的函式，讓bind後的fbound函式的prototype指向noop的例項，這樣此時的this就借助noop例項指向了noop的原型，那麼this instanceof noop就是true了

上面是我對bind方法的一些理解和實現，僅供參考和學習。bind方法在react中會比較常用到，有些面試題也會讓自己實現乙個，所以嘗試一下也能學到不少東西了。

用原生js實現乙個bind方法

原生JS實現bind方法

用原生js實現乙個new方法

用原生js實現乙個new？

用原生js實現乙個bind方法

原生JS實現bind方法

用原生js實現乙個new方法

用原生js實現乙個new？

相關推薦