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

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

方法一：call

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

該方法傳遞一個thisArgs和一個參數列表，thisArgs制定了函數在運行中的調用者，也就是函數中的this對象，而參數列表會被傳入調用函數中。

call 方法可以在一個對象上借用另一個對象的方法

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

thisArgs的取值情況：

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

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

(3)傳遞字符串，數值或者不二類型的那個基礎數據類型，函數中的this指向其對應的包裝對象，如string，number，boolean

(4)傳遞一個對象，函數中的this指向這個對象。

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

還可以通過call方法來調用匿名函數

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

方法二：apply()方法

fun.apply(thisArg, [argsArray])

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

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

apply方法的實用寫法

當參數是明確知道數量時用call;不確定的時候用apply，然后把參數push進數組傳遞進去，也可以通過arguments這個數組來遍歷所有的參數。

方法三：bind()方法

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

bind是ES5新增的一個方法，它的傳參和call類似，但又和call/apply有著顯著的不同，即調用call或apply都會自動執(zhí)行對應的函數，而bind不會執(zhí)行對應的函數，只是返回了對函數的引用。

ES5中新增加的bind方法可以彌補call()和apply()方法的不足，由于call/apply會對目標函數自動執(zhí)行，從而導致它無法在事件綁定函數中使用，因為事件綁定函數不需要我們手動執(zhí)行，它是在事件被觸發(fā)時由JS內部自動執(zhí)行的。而bind在實現改變函數this的同時又不會自動執(zhí)行目標函數，因此可以完美的解決上述問題，我們來看看一個例子：

猜你喜歡：

前端touch事件方向的判斷

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

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