面試系列：改變this指向的方法有哪些？

大家好，我是前端發(fā)現(xiàn)者，一名有一丟丟代碼強(qiáng)迫癥的前端代碼仔，喜歡的朋友可以點(diǎn)個(gè)關(guān)注，一起踩坑前端知識(shí)。

面試官：說說改變this的指向有哪些方法？

聽到這個(gè)問題我首先想到的是小程序經(jīng)常用的 let that = this 這句代碼，著實(shí)有點(diǎn)菜哈?！拔抑肋@個(gè)肯定不是，所以沒有跟面試官說這個(gè)答案”。然后我思前想后說了一個(gè):“閉包算嗎？”，“閉包應(yīng)該不算”面試官有點(diǎn)尷尬的答道。最后面試官為了緩解尷尬，提醒了我說call、apply、bind用過嗎？顯然我平時(shí)沒怎么用過它們。

今天就來總結(jié)下這三個(gè)改變this的用法吧！

bind方式

@參數(shù)說明

• 第一個(gè)參數(shù)：改變this指向
• 第二個(gè)參數(shù)之后：實(shí)參
• 結(jié)果：返回值為一個(gè)新的函數(shù)使用的時(shí)候
• 使用：需要手動(dòng)調(diào)用下返回的新函數(shù)（不會(huì)自動(dòng)執(zhí)行）

function?fn(a,?b,?c)?{
??console.log(this,?a?+?b?+?c)
}
fn(1,?2,?3)?//?window?6
let?newFn?=?fn.bind('小明',?1,?2,?3)
newFn()?//?小明?6

call方式

@參數(shù)說明

• 第一個(gè)參數(shù)：改變this指向
• 第二個(gè)參數(shù)之后：實(shí)參
• 使用之后會(huì)自動(dòng)執(zhí)行該函數(shù)(無需手動(dòng)調(diào)用)

function?fn(a,b,c){
??console.log(this,a+b+c)
}
fn(1,2,3)?//?window?6
fn.call('小紅',1,2,3)??//小紅?6

apply方式

@參數(shù)說明

• 第一個(gè)參數(shù)：改變this指向
• 第二個(gè)參數(shù)：數(shù)組（里面為實(shí)參，且總共只有2個(gè)參數(shù)）
• 使用之后會(huì)自動(dòng)執(zhí)行該函數(shù)(無需手動(dòng)調(diào)用)

function?fn(a,b,c){
??console.log(this,a+b+c)
}
fn(1,2,3)?//?window?6
fn.apply('張三',[1,2,3])?//?張三?6

總結(jié)

「相同點(diǎn)」

• 都可以改變函數(shù)內(nèi)部的this指向。

「不同點(diǎn)」

• call、apply會(huì)自動(dòng)調(diào)用函數(shù)，bind需要手動(dòng)調(diào)用。
• call、bind有無數(shù)個(gè)參數(shù)，apply只有2個(gè)參數(shù)，且第二個(gè)參數(shù)必須為數(shù)組。

「使用場景」

• call 經(jīng)常做繼承。
• apply 經(jīng)常跟數(shù)組有關(guān)系。比如借助數(shù)學(xué)對(duì)象實(shí)現(xiàn)數(shù)組最大值最小值
• bind 不調(diào)用函數(shù),但是還想改變this指向時(shí)。比如改變定時(shí)器內(nèi)部的this指向。