「乾貨」細說 call、apply 以及 bind 的區別和用法

前言

上一篇文章 《「前端面試題系列4」this 的原理以及用法》 中，提到了 call 和 apply。

它們最主要的做用，是改變 this 的指向。在平時的工做中，除了在寫一些基礎類，或者公用庫方法的時候會用到它們，其餘時候 call 和 apply 的應用場景並很少。

不過，忽然遇到的時候，須要想一下才能轉過彎來。因此今天，就讓咱們好好地探究一下，這兩個方法的區別以及一些妙用。最後，還會介紹與之用法類似的 bind 的方法。

call 和 apply 的共同點

它們的共同點是，都可以改變函數執行時的上下文，將一個對象的方法交給另外一個對象來執行，而且是當即執行的。

爲什麼要改變執行上下文？舉一個生活中的小例子：平時沒時間作飯的我，週末想給孩子燉個醃篤鮮嚐嚐。可是沒有適合的鍋，而我又不想出去買。因此就問鄰居借了一個鍋來用，這樣既達到了目的，又節省了開支，一箭雙鵰。

改變執行上下文也是同樣的，A 對象有一個方法，而 B 對象由於某種緣由，也須要用到一樣的方法，那麼這時候咱們是單獨爲 B 對象擴展一個方法呢，仍是借用一下 A 對象的方法呢？固然是借用 A 對象的啦，既完成了需求，又減小了內存的佔用。

另外，它們的寫法也很相似，調用 call 和 apply 的對象，必須是一個函數 Function。接下來，就會說到具體的寫法，那也是它們區別的主要體現。

call 和 apply 的區別

它們的區別，主要體如今參數的寫法上。先來看一下它們各自的具體寫法。

call 的寫法

Function.call(obj,[param1[,param2[,…[,paramN]]]])

須要注意如下幾點：

• 調用 call 的對象，必須是個函數 Function。
• call 的第一個參數，是一個對象。 Function 的調用者，將會指向這個對象。若是不傳，則默認爲全局對象 window。
• 第二個參數開始，能夠接收任意個參數。每一個參數會映射到相應位置的 Function 的參數上。可是若是將全部的參數做爲數組傳入，它們會做爲一個總體映射到 Function 對應的第一個參數上，以後參數都爲空。

function func (a,b,c) {}

func.call(obj, 1,2,3)
// func 接收到的參數其實是 1,2,3

func.call(obj, [1,2,3])
// func 接收到的參數其實是 [1,2,3],undefined,undefined

apply 的寫法

Function.apply(obj[,argArray])

須要注意的是：

• 它的調用者必須是函數 Function，而且只接收兩個參數，第一個參數的規則與 call 一致。
• 第二個參數，必須是數組或者類數組，它們會被轉換成類數組，傳入 Function 中，而且會被映射到 Function 對應的參數上。這也是 call 和 apply 之間，很重要的一個區別。

func.apply(obj, [1,2,3])
// func 接收到的參數其實是 1,2,3

func.apply(obj, {
    0: 1,
    1: 2,
    2: 3,
    length: 3
})
// func 接收到的參數其實是 1,2,3

什麼是類數組？

先說數組，這咱們都熟悉。它的特徵有：能夠經過角標調用，如 array[0]；具備長度屬性length；能夠經過 for 循環或forEach方法，進行遍歷。

那麼，類數組是什麼呢？顧名思義，就是具有與數組特徵相似的對象。好比，下面的這個對象，就是一個類數組。

let arrayLike = {
    0: 1,
    1: 2,
    2: 3,
    length: 3
};

類數組 arrayLike 能夠經過角標進行調用，具備length屬性，同時也能夠經過 for 循環進行遍歷。

類數組，仍是比較經常使用的，只是咱們平時可能沒注意到。好比，咱們獲取 DOM 節點的方法，返回的就是一個類數組。再好比，在一個方法中使用 arguments 獲取到的全部參數，也是一個類數組。

可是須要注意的是：類數組沒法使用 forEach、splice、push 等數組原型鏈上的方法，畢竟它不是真正的數組。

call 和 apply 的用途

下面會分別列舉 call 和 apply 的一些使用場景。聲明：例子中沒有哪一個場景是必須用 call 或者必須用 apply 的，只是我的習慣這麼用而已。

call 的使用場景

一、對象的繼承。以下面這個例子：

function superClass () {
    this.a = 1;
    this.print = function () {
        console.log(this.a);
    }
}

function subClass () {
    superClass.call(this);
    this.print();
}

subClass();
// 1

subClass 經過 call 方法，繼承了 superClass 的 print 方法和 a 變量。此外，subClass 還能夠擴展本身的其餘方法。

二、借用方法。還記得剛纔的類數組麼？若是它想使用 Array 原型鏈上的方法，能夠這樣：

let domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

這樣，domNodes 就能夠應用 Array 下的全部方法了。

apply 的一些妙用

一、Math.max。用它來獲取數組中最大的一項。

let max = Math.max.apply(null, array);

同理，要獲取數組中最小的一項，能夠這樣：

let min = Math.min.apply(null, array);

二、實現兩個數組合並。在 ES6 的擴展運算符出現以前，咱們能夠用 Array.prototype.push來實現。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

Array.prototype.push.apply(arr1, arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6]

bind 的使用

最後來講說 bind。在 MDN 上的解釋是：bind() 方法建立一個新的函數，在調用時設置 this 關鍵字爲提供的值。並在調用新函數時，將給定參數列表做爲原函數的參數序列的前若干項。

它的語法以下：

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

bind 方法 與 apply 和 call 比較相似，也能改變函數體內的 this 指向。不一樣的是，bind 方法的返回值是函數，而且須要稍後調用，纔會執行。而 apply 和 call 則是當即調用。

來看下面這個例子：

function add (a, b) {
    return a + b;
}

function sub (a, b) {
    return a - b;
}

add.bind(sub, 5, 3); // 這時，並不會返回 8
add.bind(sub, 5, 3)(); // 調用後，返回 8

若是 bind 的第一個參數是 null 或者 undefined，this 就指向全局對象 window。

總結

call 和 apply 的主要做用，是改變對象的執行上下文，而且是當即執行的。它們在參數上的寫法略有區別。

bind 也能改變對象的執行上下文，它與 call 和 apply 不一樣的是，返回值是一個函數，而且須要稍後再調用一下，纔會執行。

最後，分享一個在知乎上看到的，關於 call 和 apply 的便捷記憶法：

貓吃魚，狗吃肉，奧特曼打小怪獸。

有天狗想吃魚了

貓.吃魚.call(狗，魚)

狗就吃到魚了

貓成精了，想打怪獸

奧特曼.打小怪獸.call(貓，小怪獸)

貓也能夠打小怪獸了

PS：歡迎關注個人公衆號 「超哥前端小棧」，交流更多的想法與技術。