資訊專欄INFORMATION COLUMN
摘要：下面我們用一下方法來修改上面的例子我們看到通過方法就可以輸出了語法格式參數(shù)當綁定函數(shù)被調(diào)用時，該參數(shù)會作為原函數(shù)運行時的指向。一個綁定函數(shù)也能使用操作符創(chuàng)建對象這種行為就像把原函數(shù)當成構(gòu)造器。
bind用法介紹：
bind()方法創(chuàng)建一個新的函數(shù), 當被調(diào)用時，將其this關(guān)鍵字設(shè)置為提供的值，在調(diào)用新函數(shù)時，在任何提供之前提供一個給定的參數(shù)序列。
這段是來自MDN:bind的介紹,我們可以理解bind方法返回一個新的函數(shù)，這個函數(shù)內(nèi)部的this指向提供的參數(shù)值，來看個例子
const person = {
age: 20,
getAge() {
return this.age
}
}
const getAge = person.getAge
console.log(getAge()) // output :undefined
上面代碼輸出了undefined，什么原因呢？相信大家都知道，getAge()執(zhí)行時內(nèi)部的this指向了window,而window并沒有age這個屬性，我們并沒有定義全局的age變量，那我們怎么解決這個問題呢？那就是用哪個bind方法，需要注意的是bind方法的兼容性,IE9以上包括IE9。其他現(xiàn)代瀏覽器不用說肯定是支持的。下面我們用一下bind方法來修改上面的例子
const person = {
age: 20,
getAge() {
return this.age
}
}
const getAge = person.getAge.bind(person)
console.log(getAge()) // output :20
我們看到通過bind方法就可以輸出age了
bind語法格式fun.bind(thisArg[, arg1[, arg2[, ...]]])參數(shù)
thisArg
當綁定函數(shù)被調(diào)用時，該參數(shù)會作為原函數(shù)運行時的 this 指向。當使用new 操作符調(diào)用綁定函數(shù)時，該參數(shù)無效。
arg1, arg2, ...
當綁定函數(shù)被調(diào)用時，這些參數(shù)將置于實參之前傳遞給被綁定的方法返回值
返回由指定的this值和初始化參數(shù)改造的原函數(shù)拷貝
個人理解：bind方法接受的第一個參數(shù)是你想綁定的this值，通常是個對象，這個對象在函數(shù)內(nèi)部用this可以獲取到，第一個參數(shù)后面可以跟若干個參數(shù)，這些參數(shù)可以在bind的時候傳遞，相當于預(yù)設(shè)參數(shù)。
好了，知道用法和參數(shù)后我們就可以實現(xiàn)一個簡陋版的了
Function.prototype.bind=function (context) {
if(typeof this !=="function"){
throw new Error(`${this.name} is not a function`)
}
const srcFun=this// 保存原始函數(shù)
const arg=Array.prototype.slice.call(arguments,1)// 把arguments類數(shù)組轉(zhuǎn)為真實數(shù)組
let noop=function(){}
const fBound= function () {
if(this instanceof noop){
context=this
}
// 合并新舊參數(shù)
return srcFun.apply(context,arg.concat(Array.prototype.slice.call(arguments,0)))
}
if(this.prototype){
noop.prototype=this.prototype//維護原型關(guān)系，指向原始函數(shù)
}
fBound.prototype=new noop()//新函數(shù)的prototype的__proto__指向noop.prototype
return fBound
}
很簡陋，沒有嚴謹?shù)呐袛唷?/p>
一個綁定函數(shù)也能使用new操作符創(chuàng)建對象：這種行為就像把原函數(shù)當成構(gòu)造器。提供的 this 值被忽略，同時調(diào)用時的參數(shù)被提供給模擬函數(shù)。
上面是MDN的一段話，也就是bind返回的函數(shù)也可以當做構(gòu)造函數(shù)來用，此時bind傳遞的第一個參數(shù)無效，但是其他參數(shù)有效。
那么要做判斷處理就是
//代碼2
if(this instanceof noop){
context=this
}
這段代碼就可以區(qū)分出是在把函數(shù)當做構(gòu)造函數(shù)來new了還是當做普通方法來調(diào)用了，我們知道
當new 的時候?qū)嶋H做了這點事
var obj={}
obj._proto_=構(gòu)造函數(shù)的prototype
構(gòu)造函數(shù).call(obj)
所以現(xiàn)在在代碼2中的this是構(gòu)造函數(shù)的實例,那就得更改bind后的函數(shù)，讓bind后的fBound函數(shù)的prototype指向noop的實例，這樣此時的this就借助noop實例指向了noop的原型，那么this instanceof noop就是true了
總結(jié)上面是我對bind方法的一些理解和實現(xiàn)，僅供參考和學(xué)習(xí)。bind方法在react中會比較常用到，有些面試題也會讓自己實現(xiàn)一個，所以嘗試一下也能學(xué)到不少東西了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/95473.html
摘要：方法創(chuàng)建一個新的函數(shù)當被調(diào)用時，它的關(guān)鍵字被設(shè)置為提供的值。語法簡單地看一下這些參數(shù)的含義當綁定函數(shù)被調(diào)用時，該參數(shù)會作為原函數(shù)運行時的指向當使用操作符調(diào)用綁定函數(shù)時，該參數(shù)無效。結(jié)尾文章很簡短，知道怎么實現(xiàn)一個原生的就行。 前言 這是underscore.js源碼分析的第五篇，如果你對這個系列感興趣，歡迎點擊 underscore-analysis/ watch一下，隨時可以看到動態(tài)...
摘要：方法創(chuàng)建一個新的函數(shù)當被調(diào)用時，它的關(guān)鍵字被設(shè)置為提供的值。語法簡單地看一下這些參數(shù)的含義當綁定函數(shù)被調(diào)用時，該參數(shù)會作為原函數(shù)運行時的指向當使用操作符調(diào)用綁定函數(shù)時，該參數(shù)無效。結(jié)尾文章很簡短，知道怎么實現(xiàn)一個原生的就行。 前言 這是underscore.js源碼分析的第五篇，如果你對這個系列感興趣，歡迎點擊 underscore-analysis/ watch一下，隨時可以看到動態(tài)...
摘要：當多個事件觸發(fā)的時候，會把異步事件依次的放入里等同步事件執(zhí)行完之后，再去隊列里一個個執(zhí)行拾遺常用方法總結(jié)面試的信心來源于過硬的基礎(chǔ)參考高級程序設(shè)計你所不知道的深入淺出知識點思維導(dǎo)圖經(jīng)典實例總結(jié)那些剪不斷理還亂的關(guān)系 持續(xù)不斷更新。。。 基本類型和引用類型 vue props | Primitive vs Reference Types 基本類型和字面值之間的區(qū)別 基本類型和字面值相等，...
閱讀 1971·2021-11-15 11:39
閱讀 1314·2021-10-18 13:29
閱讀 1287·2021-08-31 09:42
閱讀 2820·2019-08-30 11:11
閱讀 2183·2019-08-26 12:12
閱讀 2175·2019-08-26 10:17
閱讀 3485·2019-08-23 18:38
閱讀 3293·2019-08-23 18:38
