js中修改this的指向方法匯總【新版】

js中修改this的指向方法整理

方法一：call

使用方法：fun.call(thisArg[,arg1[, arg2[, ...]]])

該方法傳遞一個(gè)thisArgs和一個(gè)參數(shù)列表，thisArgs制定了函數(shù)在運(yùn)行中的調(diào)用者，也就是函數(shù)中的this對(duì)象，而參數(shù)列表會(huì)被傳入調(diào)用函數(shù)中。

call 方法可以在一個(gè)對(duì)象上借用另一個(gè)對(duì)象的方法

案例：Object.prototype.tostring.call([])。一個(gè)Array對(duì)象借用了Object對(duì)象上的方法

thisArgs的取值情況：

(1)不傳，或者傳null，undefined，函數(shù)中的this指向window對(duì)象。

(2)傳遞另一個(gè)函數(shù)的函數(shù)名，函數(shù)中的this指向這個(gè)函數(shù)的引用

(3)傳遞字符串，數(shù)值或者不二類型的那個(gè)基礎(chǔ)數(shù)據(jù)類型，函數(shù)中的this指向其對(duì)應(yīng)的包裝對(duì)象，如string，number，boolean

(4)傳遞一個(gè)對(duì)象，函數(shù)中的this指向這個(gè)對(duì)象。

這是call的核心功能，它允許你在一個(gè)對(duì)象上調(diào)用該對(duì)象沒有定義的方法，并且這個(gè)方法可以訪問該對(duì)象中的屬性。

還可以通過call方法來調(diào)用匿名函數(shù)

在下例中的for循環(huán)體內(nèi)，我們創(chuàng)建了一個(gè)匿名函數(shù)，然后通過調(diào)用該函數(shù)的call方法，將每個(gè)數(shù)組元素作為指定的this值執(zhí)行了那個(gè)匿名函數(shù)。這個(gè)匿名函數(shù)的主要目的是給每個(gè)數(shù)組元素對(duì)象添加一個(gè)print方法，這個(gè)print方法可以打印出各元素在數(shù)組中的正確索引號(hào)。當(dāng)然，這里不是必須得讓數(shù)組元素作為this值傳入那個(gè)匿名函數(shù)(普通參數(shù)就可以)，目的是為了演示call的用法。

方法二：apply()方法

fun.apply(thisArg, [argsArray])

apply和call的唯一區(qū)別是第二個(gè)參數(shù)的傳遞方式不同，apply的第二個(gè)參數(shù)必須是一個(gè)數(shù)組，而call允許傳遞一個(gè)參數(shù)列表。值得你注意的是，雖然apply接收的是一個(gè)參數(shù)數(shù)組，但在傳遞給調(diào)用函數(shù)時(shí)，卻是以參數(shù)列表的形式傳遞。

注意：這里的argsArray可以是一個(gè)數(shù)組或者類數(shù)組對(duì)象，如果該參數(shù)的值為null 或 undefined，則表示不需要傳入任何參數(shù)。

apply方法的實(shí)用寫法

當(dāng)參數(shù)是明確知道數(shù)量時(shí)用call;不確定的時(shí)候用apply，然后把參數(shù)push進(jìn)數(shù)組傳遞進(jìn)去，也可以通過arguments這個(gè)數(shù)組來遍歷所有的參數(shù)。

方法三：bind()方法

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

bind是ES5新增的一個(gè)方法，它的傳參和call類似，但又和call/apply有著顯著的不同，即調(diào)用call或apply都會(huì)自動(dòng)執(zhí)行對(duì)應(yīng)的函數(shù)，而bind不會(huì)執(zhí)行對(duì)應(yīng)的函數(shù)，只是返回了對(duì)函數(shù)的引用。

ES5中新增加的bind方法可以彌補(bǔ)call()和apply()方法的不足，由于call/apply會(huì)對(duì)目標(biāo)函數(shù)自動(dòng)執(zhí)行，從而導(dǎo)致它無法在事件綁定函數(shù)中使用，因?yàn)槭录壎ê瘮?shù)不需要我們手動(dòng)執(zhí)行，它是在事件被觸發(fā)時(shí)由JS內(nèi)部自動(dòng)執(zhí)行的。而bind在實(shí)現(xiàn)改變函數(shù)this的同時(shí)又不會(huì)自動(dòng)執(zhí)行目標(biāo)函數(shù)，因此可以完美的解決上述問題，我們來看看一個(gè)例子：

猜你喜歡：

前端touch事件方向的判斷

好用的前端開發(fā)工具：這四款你必須知道！

v-show和v-if有什么區(qū)別？