聊一聊call、apply、bind的區(qū)別

kohoh_ 發(fā)布于2019-08-21 18:45 / 2052人閱讀

摘要：指定的參數(shù)列表語法在函數(shù)運行時指定的值。需要注意的是，指定的值并不一定是該函數(shù)執(zhí)行時真正的值，如果這個函數(shù)處于非嚴格模式下，則指定為或時會自動指向全局對象瀏覽器中就是對象，同時值為原始值數(shù)字，字符串，布爾值的會指向該原始值的自動包裝對象。

我們都知道call apply bind都可以改變函數(shù)調用的this指向。那么它們三者有什么區(qū)別，什么時候該用哪個呢？
我們先直接通過代碼實例來了解，后面再借助專業(yè)文檔來解釋。

舉個?

// 有只貓叫小黑，小黑會吃魚
const cat = {
    name: "小黑",
    eatFish(...args) {
        console.log("this指向=>", this);
        console.log("...args", args);
        console.log(this.name + "吃魚");
    },
}
// 有只狗叫大毛，大毛會吃骨頭
const dog = {
    name: "大毛",
    eatBone(...args) {
        console.log("this指向=>", this);
        console.log("...args", args);
        console.log(this.name + "吃骨頭");
    },
}

console.log("=================== call =========================");
// 有一天大毛想吃魚了，可是它不知道怎么吃。怎么辦？小黑說我吃的時候喂你吃
cat.eatFish.call(dog, "汪汪汪", "call")
// 大毛為了表示感謝，決定下次吃骨頭的時候也喂小黑吃
dog.eatBone.call(cat, "喵喵喵", "call")

console.log("=================== apply =========================");
cat.eatFish.apply(dog, ["汪汪汪", "apply"])
dog.eatBone.apply(cat, ["喵喵喵", "apply"])

console.log("=================== bind =========================");
// 有一天他們覺得每次吃的時候再喂太麻煩了。干脆直接教對方怎么吃
const test1 = cat.eatFish.bind(dog, "汪汪汪", "bind")
const test2 = dog.eatBone.bind(cat, "喵喵喵", "bind")
test1()
test2()

好了例子很簡單但是基本的使用方法跟場景都涉及到了。

call跟apply的用法幾乎一樣，唯一的不同就是傳遞的參數(shù)不同，call只能一個參數(shù)一個參數(shù)的傳入。
apply則只支持傳入一個數(shù)組，哪怕是一個參數(shù)也要是數(shù)組形式。最終調用函數(shù)時候這個數(shù)組會拆成一個個參數(shù)分別傳入。
至于bind方法，他是直接改變這個函數(shù)的this指向并且返回一個新的函數(shù)，之后再次調用這個函數(shù)的時候this都是指向bind綁定的第一個參數(shù)。bind傳餐方式跟call方法一致。

由于apply函數(shù)傳參的特殊性，我們又衍生出了一個黑魔法。

// 如果一個數(shù)組我們已知里面全都是數(shù)字，想要知道最大的那個數(shù)，由于Array沒有max方法，Math對象上有
// 我們可以根據(jù)apply傳遞參數(shù)的特性將這個數(shù)組當成參數(shù)傳入
// 最終Math.max函數(shù)調用的時候會將apply的數(shù)組里面的參數(shù)一個一個傳入，恰好符合Math.max的參數(shù)傳遞方式
// 這樣變相的實現(xiàn)了數(shù)組的max方法。min方法也同理
const arr = [1,2,3,4,5,6]
const max = Math.max.apply(null, arr)
console.log(max)    // 6

這里bind函數(shù)也有一個小技巧

// 如果你想將某個函數(shù)綁定新的`this`指向并且固定先傳入幾個變量可以在綁定的時候就傳入，之后調用新函數(shù)傳入的參數(shù)都會排在之后
const obj = {}
function test(...args) {console.log(args)}
const newFn = test.bind(obj, "靜態(tài)參數(shù)1", "靜態(tài)參數(shù)2")
newFn("動態(tài)參數(shù)3", "動態(tài)參數(shù)4")

接著來看看MDN文檔 call語法

fun.call(thisArg, arg1, arg2, ...)

thisArg: 在fun函數(shù)運行時指定的this值。需要注意的是，指定的this值并不一定是該函數(shù)執(zhí)行時真正的this值，如果這個函數(shù)處于非嚴格模式下，則指定為null和undefined的this值會自動指向全局對象(瀏覽器中就是window對象)，同時值為原始值(數(shù)字，字符串，布爾值)的this會指向該原始值的自動包裝對象。

arg1, arg2, ... 指定的參數(shù)列表

apply語法

fun.apply(thisArg, [argsArray])

thisArg 在 fun 函數(shù)運行時指定的 this 值。需要注意的是，指定的 this 值并不一定是該函數(shù)執(zhí)行時真正的 this 值，如果這個函數(shù)處于非嚴格模式下，則指定為 null 或 undefined 時會自動指向全局對象（瀏覽器中就是window對象），同時值為原始值（數(shù)字，字符串，布爾值）的 this 會指向該原始值的自動包裝對象。

argsArray 一個數(shù)組或者類數(shù)組對象，其中的數(shù)組元素將作為多帶帶的參數(shù)傳給 fun 函數(shù)。如果該參數(shù)的值為null 或 undefined，則表示不需要傳入任何參數(shù)。從ECMAScript 5 開始可以使用類數(shù)組對象。

bind語法

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

thisArg 當綁定函數(shù)被調用時，該參數(shù)會作為原函數(shù)運行時的 this 指向。當使用new 操作符調用綁定函數(shù)時，該參數(shù)無效。

arg1, arg2, ... 當綁定函數(shù)被調用時，這些參數(shù)將置于實參之前傳遞給被綁定的方法。

總結

當我們使用一個函數(shù)需要改變this指向的時候才會用到call`apply`bind

如果你要傳遞的參數(shù)不多，則可以使用fn.call(thisObj, arg1, arg2 ...)

如果你要傳遞的參數(shù)很多，則可以用數(shù)組將參數(shù)整理好調用fn.apply(thisObj, [arg1, arg2 ...])

如果你想生成一個新的函數(shù)長期綁定某個函數(shù)給某個對象使用，則可以使用const newFn = fn.bind(thisObj); newFn(arg1, arg2...)

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90774.html

underscore 源碼解讀之 bind 方法的實現(xiàn)

摘要：概括地講，如果構造函數(shù)有返回值，且返回值是對象不能是，那么對其進行操作返回該對象，否則返回構造實例。所以在方法中，我們需要進一步判斷這個構造函數(shù)有沒有返回值，返回值是不是對象。自從進入七月以來，我的 underscore 源碼解讀系列更新緩慢，再這樣下去，今年更完的目標似乎要落空，趕緊寫一篇壓壓驚。前文跟大家簡單介紹了下 ES5 中的 bind 方法以及使用場景（沒讀過的同學建...

xiaodao 2019-08-20 10:47 評論0 收藏0
面試知識點總結

摘要：最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問到的是語法，閉包，原型鏈，繼承那一塊。并且將面試題的知識點匯總一下。參考網站面試題圖片過多的時候如何優(yōu)化圖標很多的時候可以用雪碧圖圖片過大時候可以壓縮一下。最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問到的是ES6語法，閉包，原型鏈，繼承那一塊。并且將面試題的知識點匯總一下。有助于下次面試。 1.H...

王晗 2019-08-30 14:15 評論0 收藏0
面試知識點總結

摘要：最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問到的是語法，閉包，原型鏈，繼承那一塊。并且將面試題的知識點匯總一下。參考網站面試題圖片過多的時候如何優(yōu)化圖標很多的時候可以用雪碧圖圖片過大時候可以壓縮一下。最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問到的是ES6語法，閉包，原型鏈，繼承那一塊。并且將面試題的知識點匯總一下。有助于下次面試。 1.H...

CrazyCodes 2019-08-22 15:46 評論0 收藏0
聽飛狐聊JavaScript設計模式系列03

摘要：閉包與柯里化閉包有權訪問另一個函數(shù)作用域中變量的函數(shù)。柯里化把接受多個參數(shù)的函數(shù)變換成接受一個單一參數(shù)最初函數(shù)的第一個參數(shù)的函數(shù)，并且返回接受余下的參數(shù)而且返回結果的新函數(shù)的技術。本回內容介紹上一回聊到JS的Object類型，簡單模擬了一下Java的Map，介一講，偶們來聊一下函數(shù)好唔好，介可系JS世界的一等公民喲。從函數(shù)開始，我們就將逐步過渡到設計模式，來吧，帥狐帶你裝逼帶你飛：...

levy9527 2019-08-21 10:44 評論0 收藏0